PSD, czyli Adobe Photoshop jest obecnie najpopularniejszym programem do projektowania grafiki rastrowej, używanym często przy pracach dotyczących designu stron internetowych. Jest częścią abonamentowego pakietu Adobe Creative Suite, w którym oprócz programu uzyskujemy także dostęp do innych aplikacji firmy.
WooCommerce to z kolei wtyczka do CMS-u WordPress, która umożliwia stworzenie sklepu internetowego. Można dzięki temu w prosty i niedrogi sposób zbudować rozwiązanie e-commerce, z czego korzysta już 42% takich firm.
Aby przekonwertować projekt stworzony w Photoshopie do WooCommerce, należy wykonać następujące kroki:
wyciąć grafiki z projektu PSD
Staranne przycięcie grafik, pozwoli uzyskać pliki, które będą się poprawnie wyświetlały na przyszłej stronie. Należy pamiętać o tym, by wyciąć taką ilość obrazów, która pozwoli grafice ładować się w częściach, zmniejszając przez to obciążenie serwera.
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.
dostosować HTML do motywu WordPress
Witryny WordPress wymagają użycia motywów. Dlatego też nasz kod HTML musi mieć strukturę, która jest odpowiednia dla standardowego motywu CMS-u. Oznacza to m.in. utworzenie takich plików jak style.css, header.php, sidebar.php, footer.php i index.php.
Należy także dodać niestandardowe menu nawigacyjne i przekonfigurować własny arkusz stylów, aby spełniał wymagania WordPressa. Następnie powinniśmy dodać dalsze funkcje WordPressa, co pozwoli m.in. na łatwiejszą edycję i rozbudowę witryny.
zainstalować i skonfigurować wtyczkę WooCommerce
WooCommerce jest bezpłatnym plug-inem, natomiast jego dodatki często są darmowe jedynie w wersji podstawowej. Rozbudować je można po wykupieniu licencji.
Instalacja oprogramowania jest prosta i intuicyjna. Konfiguracja wtyczki polega m.in. na ustaleniu sposobu prezentowania produktów w sklepie, wyświetlania strony, edycji ustawień magazynu czy opcji płatności i dostawy.
