Aby stworzyć poprawnie działającą stronę opartą na WordPress z projektu Sketch, należy po pierwsze wygenerować kod HTML. Następnie konieczne jest zbudowanie własnego motywu przy wykorzystaniu kodu.
Proces ten można podzielić na następujące etapy:
wycięcie grafik z projektu Sketch
Eksport obrazów z projektu Sketch przebiega stosunkowo szybko, nie wymagając czasochłonnego wycinania. Wystarczy zaznaczyć warstwę, na której znajduje się grafika i wybrać parametry oraz formatu pliku docelowego.
przeprowadzić kodowanie HTML:
Ważne jest zawarcie w kodzie podstawowych elementów struktury strony, czyli np. nagłówka, elementów nawigacji czy stopki. Należy także mieć na uwadze standardy budowy witryn HTML i przeprowadzać proces wyjątkowo starannie, ponieważ poszukiwanie błędów w gotowym już kodzie jest bardzo czasochłonne.
stworzyć arkusze stylów CSS:
Dzięki arkuszom stylów możemy używać na stronie wielu efektów graficznych, co sprawia, że ograniczona zostaje liczba i objętość obrazów a witryna działa bardziej wydajnie. Kodowanie CSS ułatwić mogą takie frameworki jak np. Bootstrap czy preprocesory rodzaju SASS, LESS i Stylus.
dostosowanie HTML do motywu WordPress
Następnie kod HTML należy przełożyć na strukturę zrozumiałą dla WordPressa. Oznacza to m.in. utworzenia plików style.css, header.php, sidebar.php, footer.php i index.php, przekształcenie istniejącego arkusza stylów na plik CSS WordPressa czy dodanie niestandardowego menu nawigacyjnego.
Na koniec pozostaje dodanie funkcji WordPress do strony, dzięki którym wykorzystamy możliwości systemu oraz pozwolimy użytkownikowi na wygodną edycję i rozbudowę witryny.
