3 sposoby na stworzenie strony WordPress na podstawie projektu graficznego

Pierwszy krok w stworzeniu strony internetowej to jej zaprojektowanie – lub przynajmniej gruntowne przemyślenie. Jak będzie wyglądać Twoja strona WordPress? Jakie ma mieć funkcje? Ile ma być na niej treści? One-pager, czy zakładki? Co z animacjami…? To tylko niektóre z pytań, a nie zacząłem jeszcze mówić o jej budowaniu…

Gdy będziesz już dokładnie wiedzieć, jak ma wyglądać Twoja strona i stworzysz jej makietę, rodzi się pytanie – jak najlepiej przekuć Twój projekt w działającą stronę? Poniżej przyjrzałem się paru sposobom, wraz z ich wadami i zaletami.

Page buildery

Najprostszym sposobem na stworzenie strony WordPress na podstawie projektu graficznego jest użycie page buildera, zwanego także visual builderem lub visual composerem. To narzędzie do budowania strony za pomocą klikania i przeciągania elementów (tzw. drag&drop). Jeśli masz zmysł estetyki, ale zerowe pojęcie o kodowaniu – to może być rozwiązanie dla Ciebie. Nie musisz wtedy wiedzieć, co to PHP, HTML, czy CSS – a tym bardziej biegle posługiwać się tymi technologiami.

Najpopularniejsze WordPressowe page buildery:

• Elementor,
• SeedProd,
• Beaver Builder,
• Divi,
• Visual Composer.

Warto dodać, że nie tak dawno temu do WordPressa zaimplementowano domyślnego page buildera – Gutenberg. Daje on możliwość konstruowania stron z bloków, lecz jego funkcjonalności na razie nie dorównują powyżej wymienionym rozwiązaniom.

Zaletą page builderów jest, jak wspomniałem, łatwość tworzenia stron.

Gotowy szablon, czy rozwiązanie customowe – zalety i wady

Co natomiast z wadami? Warto mieć świadomośc, że jest ich parę:

• Z pomocą page buildera nie odtworzysz dokładnie swojego projektu – będziesz mógł się jedynie do niego zbliżyć.
• Kod wytworzony w page builderze nie jest najwyższej jakości – strony są znacznie wolniejsze i narażone na więcej błędów, niż te „napisane” przez developera.
• Strony oparte o page buildery ciężko wysoko wypozycjonować – to dobry pomysł na start Twojego biznesu, ale wraz z rozwojem konieczne będzie stworzenie strony w inny sposób. Może okazać się, że nakłady poniesione na SEO w przeciągu roku przewyższą koszty stworzenia dobrej strony od podstaw.

Motywy potomne

To bardziej zaawansowane rozwiązanie. Jak stworzyć motyw potomny – child theme? Wybierasz szablon WordPress, który Ci się podoba, kupujesz go, a następnie modyfikujesz – dodajesz jakąś sekcję, zmieniasz kolor na taki, który podoba Ci się bardziej, usuwasz niepotrzebne elementy graficzne i wodotryski, które kłują Cię w oczy.

Te modyfikacje zapisane są jako motyw potomny, natomiast motyw główny – ten, który był Twoją bazą, pozostaje bez zmian.

Ta opcja wymaga już trochę znajomości kodowania – nic skomplikowanego, ale podstawowa wiedza CSS i HTML jest koniecznością. Jeśli wybierzesz dobry motyw oraz odpowiednio go dostosujesz, będziesz bliżej odtworzenia Twojego projektu graficznego, ale to wciąż nie będzie przełożenie 1:1.

Wady?

• Dużo oferowanych w sklepach pokroju Envato Elements motywów to solidnej jakości kod – niestety, muszą one być uniwersalne i zdolne do maksymalnej liczby zastosowań. Kod w gotowych szablonach jest więc bardzo przeładowany – ciężki. Rezultat? Większa prędkość ładowania, cięższe wypozycjonowanie.
• Jeśli strona ma Ci służyć przez co najmniej kilka lat, mogą pojawić się problemy ze wsparciem – większośc gotowych szablonów z czasem przestaje wspierać kolejne wersje WordPressa. A jego aktualizacja jest konieczna, jeśli zależy Ci na bezpieczeństwie Twojej witryny.
• Najlepiej napisane, sprawdzone szablony, są niezwykle popularne. Jestem pewien, że odwiedzasz niekiedy strony i myślisz sobie – gdzieś już to widziałem. Niestety – jeśli zależy Ci na unikalności, nawet motyw potomny nie zagwarantuje Ci jej w pełni – do tego potrzebna jest opcja trzecia.

Custom themes

Ostatnią opcją (i moim faworytem – lecz jestem stronniczy), jest dedykowany szablon WordPress. Tutaj ogranicza Cię tylko umiejętność kodowania – Twoja lub Twojego dewelopera. Motyw customowy oznacza, że możesz zbudować stronę identyczną z projektem graficznym. Konieczna jest tutaj jednak biegłość w kodowaniu, więc musisz swobodnie operować HTML, CSS i PHP.

Zalety dedykowanych szablonów:

• dokładne przeniesienie Twoich makiet do kodu – 1:1, lub, jak wolisz po branżowemu – pixel perfect.
• szybkość oraz solidny grunt pod SEO – dokładne przeciwieństwo page builderów oraz gotowych szablonów. W kodzie dedykowanego motywu jest tylko to, co potrzebne.
• skalowalność – nie ważne, jak rozwinie się Twój biznes, dedykowany motyw będzie w stanie za nim nadążyć. Można do niego zaimplementować wszystko, co tylko wymyślisz.
• zaawansowane funkcjonalności – chcesz zintegrować się z systemem rezerwacyjnym, ATS’em lub po prostu masz marzenie, żeby kursor na Twojej stronie przybierał kształt różdżki, a kliknięciu w element towarzyszyło wypowiadane głosem Hermione Alohomora? W dedykowanym szablonie można zakodować wszystko.

Niestety, nawet najlepsze rozwiązania mają swoje wady. Jak pewnie się już domyślasz, wadami WordPressowego custom developmentu są:

• czas – jeśli pali Ci się grunt pod nogami i potrzebujesz strony gotowej w dwa dni – to się nie uda.
• cena – użycie CMS WordPressa powoduje, że to wciąż nie są olbrzymie koszty. Nie będę jednak owijał w bawełnę – zakodowanie dedykowanego szablonu kosztuje więcej, niż subskrypcja page buildera lub zakup gotowego motywu. Jak jednak wspomniałem wyżej – chytry dwa razy płaci. Strona stworzona page builderem lub w oparciu o gotowy motyw może bardzo szybko okazać się niewystarczająca, a koszty pozycjonowania mogą być wielokrotnie wyższe.

Nie mogę więc definitywnie stwierdzić, które z powyższych rozwiązań będzie dla Ciebie najlepsze. Zależy to od starych jak świat czynników: ile masz czasu, pieniędzy i własnych umiejętności. Wypadkowa tych trzech zdecyduje, którym ze sposobów ożywisz swój projekt graficzny – podobną logikę stosujemy, gdy dobieramy rozwiązania do potrzeb naszych klientów.

Ja oczywiście jestem wielkim fanem dedykowanych szablonów, no ale umówmy się – piszę to jako reprezentant CodeToWP – specjalizujemy się w custom developmencie, więc nie możesz spodziewać się po mnie innej opinii…

Mam nadzieję, że powyższe wskazówki pomogą Ci dokonać wyboru i niedługo Twoja strona dołączy do tych 39% ogółu Internetu, które oparte są na WordPressie.

 

Autor: Adam Baldy, business development representative w appwise software house. Po godzinach czas upływa mu głównie na staraniach, by się nie zabić, uprawiając mniej lub bardziej niebezpieczne sporty ekstremalne, robiąc przy tym zdjęcia.