Tworzenie stron WordPress

Jak wygląda właściwy proces projektowania i tworzenia stron internetowych WordPress? W tym artykule postaram się opisać cały proces. Strona internetowa składa się z wielu warstw a w przypadku stron internetowych z funkcjonalnością CMSa dochodzi kolejna – właśnie ta odpowiedzialna za edycję i publikowanie treści przez personel nietechniczny.

Niezależnie jakie system wykorzystamy, proces będzie wyglądał mniej więcej podobnie. niniejszy artykuł będzie na tyle uniwersalny, że po podmianie słowa WordPress na inny znany CMS nie straci swojego sensu.

Dla kogo jest ten artykuł?

Ten artykuł jest dla:

• przyszłych WordPress deweloperów, którzy chcą sprawdzić jak wygląda w praktyce tworzenie witryn z wykorzystaniem środowiska WP i chcieliby zobaczyć jak to wygląda od środka,
• dla klientów, którzy chcą poznać jak wygląda proces powstawania profesjonalnej strony WordPress aby rozpoznać uczciwe i prawdziwe usługi tworzenia stron WordPress od praktyk mających na celu jedynie wytworzenie czegoś co je naśladuje,
• dla każdego, który chce poznać różnicę pomiędzy „stroną na WordPress” a „stroną z WordPress”.

O czym w tym artykule NIE przeczytasz?

• O wykorzystywaniu gotowych szablonów, które z tworzeniem stron nie mają nic wspólnego (bo wykorzystanie szablonu de facto pomija proces tworzenia),
• że projektowanie stron z wykorzystaniem WordPressa jest bardzo łatwe i każdy może to robić ale wystarczy jedynie kupić mojego e-booka który powstał przez skopiowanie i parafrazowanie wszystkiego czego można znaleźć na innych blogach o dostosowywaniu szablonów do własnych celów,
• Nie będzie też mieszania pojęć z czym często mamy do czynienia wpisując w wyszukiwarkę tak ogólnikowe i popularne frazy jak Tworzenie stron WordPress,
• o tym że jest to super trudne i musisz wynająć mnie albo inną firmę z pośród kilku dostępnych w Polsce.

W tym artykule nie będę pisał o tym jak to strona powstaje za pomocą gotowych szablonów bo to nie jest do końca właściwy proces tworzenia stron WordPress. Wykorzystanie gotowych szablonów podsumowałem w artykule wady szablonów stron WWW i nie będę się nad tym dłużej rozwodził. To co powstaje w wyniku takiego procesu mało ma wspólnego z prawdziwą stroną a próby doprowadzenie tego do stanu akceptowalnego często przekracza koszt stworzenia strony od nowa.

Plan i wymagania strony internetowej

To może zabrzmi banalnie ale tworzenie strony WordPress spełnia wszelkie cechy projektu, ponieważ mamy:

• konkretnie określony cel,
• ustalony czas budżet i środki,
• produkt ma charakter unikalny i niepowtarzalny (każdy klient ma swoje wymagania i priorytety).

Skoro mamy do czynienia z projektem bardzo istotne jest zebranie najczęściej od klienta wymagań oraz poświęceniu sporo uwagi i czasu na właściwe planowanie. Te wymagania są następnie dopracowywane i uszczegóławiane przez twórcę strony.

Uwaga: Z opinii wykonawcy strony internetowej musi jasno wynikać, że wybór systemu WordPress jest korzystny i opłacalny w długiej perspektywie czasu w tym konkretnym przypadku.

Skracając sprawę do minimum wymagania powinny się składać z następujących punktów:

1. Wprowadzenie
2. Słownik terminów (w przypadku zaawansowanych stron)
3. Ogólny opis strony (grupa docelowa, nadrzędny cel strony)
4. Wymagania funkcjonalne (co strona musi umożliwiać, np. katalog produktów, skrypt sklepu, konfigurator produktów)
5. Wymagania niefunkcjonalne (np. szybkie działanie, wymagania serwerowe, ograniczenia prawne itd…)

Nie trzeba trzymać się sztywnych schematów, ponieważ opis typu:

Użytkownik wchodząc na stronę, wybiera dostępne opcje, wypełnia formularz i otrzymuje wycenę na e-mail.

Strona musi być zoptymalizowana dla wyszukiwarek (SEO) i osiągać zielony wynik w PageSpeed Insights.

Pozwala na zdefiniowanie wymagań bez obciążania klienta wpasowywaniem się w brief lub schemat definiowania wymagań.

Szablon statyczny strony internetowej

Szablon statyczny to strona internetowa nie posiadająca funkcjonalności, które zapewnia WordPress. Szablon taki powstaje „normalnie” jak statyczna strona internetowa. W trakcie jego budowania można się kierować wiedzą na temat tego jak WordPress będzie zapewniał edycję i dodawanie poszczególnych treści. Na czym to może polegać?

Np. na tworzeniu poszczególnych sekcji <section> w ramach których będziemy izolować treść za pomocą pól niestandardowych lub nowocześniejszego rozwiązania: bloków Gutenberga. Taka edycja jest o wiele łatwiejsza i wygodniejsza z punktu widzenia osób edytujących stronę.

Nadal tworzy się strony WordPress na podstawie modeli szkieletowych, projektów graficznych a także prototypów. Czytaj więcej na ten temat w osobnym wpisie: konwersja projektu graficznego na stronę WordPress.

Z wykorzystaniem gotowych systemów projektowych lub front-endowych frameworków typu Bootstrap. Proces jest wbrew pozorom stosunkowo szybki i toleruje wprowadzanie zmian.

To jak wytwarzany jest szablon statyczny zależy od preferencji klienta i twórcy strony. Osobiście preferuję podejście, w którym szablon strony statycznej jest na bieżąco testowany i wykonywane są jego kolejne elementy. Takie podejście często wykorzystuje się w wytwarzaniu oprogramowania, mamy do czynienia z tzw. zwinnym tworzeniem strony (Agile), czyli tworzenie poszczególnych składowych w iteracjach. Dzięki temu dostarczamy w regularnych odstępach czasu klientowi efekty prac, które na bieżąco są przeglądane i poprawiane. Nie giniemy w gąszczu uwag, które potem dotyczą całości a wszystkie wymagania są na bieżąco monitorowane i mogą ulegać modyfikacjom. Szablon statyczny może miec treść typu „lorem ipsum” ale dobrą praktyką jest umieszczenie sensownych napisów i tekstów, dzięki temu lepiej dopasujemy wielkość obszarów i układ szablonu do ostatecznej treści.

Uwaga: w tym kroku można wykorzystać gotowy szablon HTML. Jest to najpóźniejszy moment, w którym możemy wykorzystać szablon nie poświęcając jakości i wydajności końcowej strony.

Czytaj więcej: jak przebiega tworzenie własnego motywu WordPress.

Tworzenie motywu WordPress

Kiedy wszystkie unikalne elementy witryny WordPress są już gotowe i przetestowane na różnych urządzeniach przystępuje się do integracji szablonu z WordPressem.

Integracja szablonu z WordPressem zmusza dewelopera do stworzenia szablonu strony WordPress na podstawie wcześniej wykonanego szablonu statycznego. W kod statyczny wplata się funkcje zapewniające to, że treść stworzona w systemie WordPress będzie mogła być „wydrukowana” w szablonie w w sposób w jaki przewidział to jego twórca.

Przykładowo, instrukcja:

 <?php the_title() ?>   

Umieszczona w szablonie:

<title><?php the_title() ?></title>

spowoduje wydrukowanie się w szablonie tytułu

<title>Tworzenie stron WordPress</title>

jaki wpisujemy w nowo tworzonym lub edytowanym artykule lub stronie:

I dokładnie tak postępujemy ze wszystkimi elementami, które chcemy aby użytkownik mógł edytować z poziomu panelu WordPress.Jeżeli chcesz widzieć więcej podobnych przykładów zapraszam do osobnego artykułu tworzenie szablonów WordPress.

Końcowym rezultatem tych prac jest indywidualny szablon, który możemy włączyć i ewentualnie dostosowywać w zapleczu WordPress. Szablon WordPress często wymaga stworzenia dodatkowych widgetów, wtyczek i makr tzw. shortcode.

Zamiast tworzyć motyw od zera można posłużyć się gotowym, jednak ten krok może utrudniać optymalizację i rozwój strony w dłuższej perspektywie czasowej.

Wprowadzenie i edycja treści

Kiedy szablon WordPress jest już gotowy, można przystępować do uzupełnienia wszystkich podstron o właściwą treść. Po wprowadzeniu wszystkich tekstów, zdjęć, filmów i innych treści może być konieczność wdrożenia poprawek w kodzie. Jest to ostatni moment, w którym będzie to stosunkowo proste i bezproblemowe.

Coraz rzadziej korzysta się z ACF, Piklist czy Pods. Rolę page-buildera przejął edytor Gutenberg, który jest wbudowany w WordPressa. Gutenberg pozwala wprowadzać zmiany i śledzić jak będzie wyglądała finalna strona internetowa:

Na tym etapie należy zainstalować mechanizmy lub wtyczki związane z obsługą wielu języków, ponieważ WordPress nie posiada takiego mechanizmu w standardzie.

Jeżeli buduje się nową wersję istniejącej strony ten krok odbywa się w lokalizacji deweloperskiej, dlatego nie należy nie dopuścić do sytuacji, w której zostanie ona indeksowana przez wyszukiwarki.

Optymalizacja i testy jakościowe

Kiedy tworzona strona WordPress osiągnie zamierzony kształt należy przejść do szeroko pojętej optymalizacji. O tym jakie elementy wymagają zoptymalizowania pomogą nam ręczne i automatyczne testy jakościowe wraz z odpowiednią interpretacją wyników. O tym jak testować strony już pisałem w artykule o jakości stron WWW.

W dużym skrócie należy wykonać:

• ręczny test strony na różnych urządzeniach wykorzystując różne przeglądarki,
• automatyczny test syntaktyki kodu HTML5, CSS, JS,
• szybkość serwera i odpowiedzi (w tym certyfikat SSL i poprawność przekierowań),
• szybkość wczytywania się i ogólna wydajność front-endu,
• optymalizacja zdjęć WordPress,
• optymalizacja mobilna,
• dane strukturalne,
• wszelkie inne audyty SEO.

Na tym etapie instalujemy wtyczki przydatne w optymalizacji przykładowo WP Super Cache lub testowana niedawno WP-Sweep, którą będzie można użyć w niedalekiej przyszłości.

Instalacja i zabezpieczenia

Instalacja jest de facto przeniesieniem strony WordPress z lokalizacji deweloperskiej na właściwą – produkcyjną. Jest to krytyczny moment zarówno dla optymalizacji dla wyszukiwarek, pozycjonowania i doświadczeń użytkownika. Czytaj więcej jak poprawnie zaktualizować i przenieść nową stronę w miejsce starej.

Przy instalacji możemy wykonać dodatkowe działania mające na celu zabezpieczyć WordPressa przed popularnymi atakami np. DoS i DDos. Czytaj więcej na temat bezpieczeństwa systemu WordPress.

Powdrożeniowa obsługa serwisowa

Instalacja strony WordPress to tak naprawdę początek przygody. Istnieje takie powiedzenie, że „strona nigdy nie jest gotowa”. I w pełni się z tym zgadzam. Strona powinna być pod stałą opieką twórców. Instalacje wtyczek i wszelkie inne działania, które wykraczają poza redagowanie nowych i edycję artykułów, powinny być konsultowane z twórcą aby uniknąć konfliktów w systemie lub wspólnego wyboru najlepszych rozwiązań kierując się dobrem całego serwisu.

Zdrowa relacja klient – wykonawca powinna zapewnić klientowi wsparcie bez uiszczania dodatkowych opłat po wykonaniu strony. Dopiero kiedy musimy poważnie zainterweniować – możemy wycenić taką usługę. Przy złożonych serwisach można stosować płatną albo wliczoną w tworzenie strony obsługę pogwarancyjną. W ramach niej można przeprowadzać aktualizacje a nawet drobne poprawki w kodzie i wyglądzie strony WordPress.

Podsumowanie

Jak widać na tworzenie strony WordPress składa się wiele kroków. Stosując takie podejście mamy szansę wykorzystać w pełni potencjał tego najpopularniejszego systemu CMS. Zaniedbania na którymkolwiek z wymienionych kroków lub wykorzystanie „gotowców” będą w najbardziej optymistycznym scenariuszu hamowały i utrudniały rozwój naszej strony, w najgorszym – będą go niestety uniemożliwiały.