Baza wiedzy - wszystkie artykuły

Na czym polega kodowanie PSD do WooCommerce?

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.


PSD2CSS jest firmą technologiczną skupioną wokół rozwiązań WordPress / WooCommerce / PHP / HTML5. Oferujemy zarówno usługi wdrożeniowe jak również body leasing programistów front-end oraz back-end. Jeśli trafiłeś tu poszukując odpowiedzi na istniejące problemy i masz dość współpracy z freelancerami a stawiasz na bezkompromisową jakość - zapraszamy do kontaktu.

Cookies Nasza strona internetowa używa plików cookies (tzw. ciasteczka) w celach statystycznych, reklamowych oraz funkcjonalnych. Dzięki nim możemy indywidualnie dostosować stronę do twoich potrzeb. Każdy może zaakceptować pliki cookies albo ma możliwość wyłączenia ich w przeglądarce, dzięki czemu nie będą zbierane żadne informacje. Polityka prywatności