Na czym polega kodowanie PSD do WooCommerce?

Wróć do Bazy wiedzy

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.

Skontaktuj się z nami

Przejdź do formularza wyceny on-line aby skrócić do minimum czas na przygotowanie wyceny realizacji.