Aby przekonwertować projekt stworzony w Figma do WordPressa, należy przeprowadzić proces kodowania z Figma do HTML, a następnie dostosować kod do wymagań tego CMS-u.
W tym celu powinniśmy:
wyeksportować obrazy z Figma
Grafiki w ramach projektów Figma osadzone są w oddzielnych warstwach, co sprawia, że jedyne co musimy zrobić to wybrać obraz oraz format pliku eksportu.
stworzyć kod HTML witryny
Ważne, aby przestrzegać przy tym podstawowych zasad tego języka, poprawnie definiując np. takie sekcje strony jak nagłówek, elementy nawigacji czy stopka. W trakcie kodowania należy wykazać się wysoką starannością, aby uniknąć ewentualnych błędów.
tworzenie arkuszy stylów CSS
Dzięki CSS możemy uzyskać wiele efektów graficznych, przez co zmniejszymy ilość i objętość obrazów na stronie. Zaowocuje to szybszym ładowaniem się witryny. Kodowanie CSS mogą ułatwić takie frameworki jak np. Bootstrap czy preprocesory rodzaju SASS, LESS i Stylus.
budowanie interakcji JavaScript
Język JavaScript pozwala na dodanie do strony dynamicznych elementów czy dodatkowych efektów. Podczas kodowania wykorzystuje się często frameworki, takie jak np. Angular.
dostosowanie kodu HTML do standardów WordPress
Budując stronę opartą na WordPressie, wykorzystujemy motywy. W przypadku posiadania własnego kodu HTML musimy stworzyć autorski motyw. Oznacza to dostosowanie kodu do struktury akceptowalnej przez ten CMS.
Aby to zrobić, należy m.in. utworzyć takie pliki jak style.css, header.php, sidebar.php, footer.php i index.php. Powinniśmy także przekształcić stworzony przez nas plik CSS na format CSS WordPress czy dodać niestandardowe menu nawigacyjne.
Następnie należy dołączyć do witryny dodatkowe funkcje CMS-u, dzięki którym wykorzystamy potencjał systemu, a także umożliwimy administratorom łatwą edycję i rozbudowę strony.
