Tworzenie stron WordPress

WordPress dla wielu oznacza podstawę do tworzenia stron. Nie sposób się z tym nie zgodzić – stanowi bazę 35% wszystkich stron na świecie i przez ostatnie 8 lat jego udział w rynku rósł z roku na rok. W niniejszym artykule pokażemy, jak krok po kroku przejść od pomysłu do realizacji witryny z wykorzystaniem tego potężnego narzędzia.

Tworzenie stron opartych o CMS WordPress

W dużej mierze nie różni się niczym od tworzenia stron ogólnie. Jak w każdym projekcie webdesignu, niektóre elementy są niezmienne. W przypadku WordPressa mamy jednak rozwiązania wspomagające oraz kilka ścieżek wyboru, którymi możemy pójść przy projektowaniu witryny. Od czego zacząć? Od tego co zwykle, czyli planowania.

1. Analiza potrzeb

Przed podjęciem jakichkolwiek decyzji odnośnie do budowania struktury kodu czy wybierania bibliotek do wykorzystania, musimy sobie zadać kilka podstawowych pytań.

Często z punktu widzenia klienta są to pytania niepotrzebne, tymczasem dzięki nim i przedstawieniu szerszego kontekstu (dlaczego w ogóle o to pytamy), uświadamiamy mu mnogość opcji i zwiększamy szansę, że rozwinie swoją wypowiedź ponad nieraz słyszane “strona ma sprzedawać” ;-).

W naszej pracy posługujemy się owianym legendami briefem, który choć wielu kojarzy się z korpoświatem, jest przydatnym narzędziem skracającym proces tworzenia adekwatnej oferty. Aby rozpocząć współpracę, musimy zawsze zrozumieć najważniejsze cele biznesowe strony.

W jakim celu witryna powstaje?

Z pozoru banalne pytanie, jednak odpowiedź na nie jest kluczowa dla każdego projektu.

Strona może spełniać wiele celów. Może być:

  • Informacyjna – przekazujemy nią komunikaty, uczymy naszych odwiedzających czegoś lub przedstawiamy jakąś ideę.
  • Sprzedażowa – zależy nam na zbieraniu leadów, telefonach lub formularzach, generowanych przez witrynę.
  • Sklep – prowadzimy aktywną sprzedaż internetową i ma ona obsługiwać zamówienia online.
  • eLearning – oferujemy kursy i szkolenia online, zarządzamy użytkownikami i dostępami do kursów.

W zależności od tego, jaki cel nasza witryna ma osiągać, każda z funkcji bardzo mocno wpływa na kolejny punkt.

Jakie funkcje musi posiadać?

Tworząc stronę informacyjną, mocniej stawiamy na możliwość edycji tekstu, dodawania grafik, plików, wykresów czy wideo. Mniej potrzebne stają się w tym przypadku elementy takie jak: płatności online, formularze, dynamiczny konfigurator produktu, które są z kolei kluczowe na stronach sprzedażowych i sklepowych.

Poprawne określenie celu witryny naprowadza nas na funkcje, które są potrzebne, aby dany cel spełnić. Choć klient mógł nie rozważać newslettera, rejestracji użytkowników, zarządzanie danymi czy wersji językowych – jasne określenie celu może wskazać, iż takie elementy są niezbędne w jego realizacji.

Jak powinna wyglądać?

Zanim ktoś powie, że to kwestia projektanta, chciałbym doprecyzować. Tym pytaniem wprowadzamy klienta w proces projektowania. Prosimy o inspiracje i nie chodzi tutaj o podanie strony, którą mamy skopiować – chodzi o podanie stron, które się klientowi podobają, czy to funkcjonalnie czy kolorystycznie – aby odkryć stylistykę i generalne upodobania, a następnie zawęzić tworzenie projektu do tej wizji. Unikamy w ten sposób zgadywania i domysłów.

Oczywiście są sytuacje, w których dostajemy pełną swobodę w wizji. Bywa też, że klient nie ma pojęcia jak coś powinno wyglądać. Wtedy przydaje się analiza jego konkurencji. Możemy dzięki temu sprawdzić standardy branży oraz określić funkcje, z których warto w tym kontekście skorzystać.

2. Projektowanie

Przechodząc do etapu projektowania, stajemy przed najbardziej kluczowym wyborem, jeśli chodzi o tworzenie stron na WordPressie – szablon strony. Nie jest to jednak wybór dyktowany wyłącznie zmysłem estetycznym – decyzja, z której z opisanych poniżej technik skorzystać, może bardzo mocno wpłynąć na:

  • możliwość dalszej rozbudowy strony,
  • opcje jej zabezpieczenia,
  • prostotę codziennej obsługi.

W ramach projektowania szablonu, możemy skorzystać z kilku technik, przy czym każda z nich ma swoje wady i zalety.

Dedykowane rozwiązanie – w tej opcji tworzymy od podstaw lub na minimalnej podstawie (Boilerplate/Blank/Barebones/Starter) szablon, który jest skrojony pod wymagania i potrzeby klienta. Taki szablon jest zazwyczaj najdroższy, bo budujemy go od fundamentów pod określoną wizję..

Wady i zalety:

  • + rozwiązanie szyte na miarę – spełnia wszelkie wymagania klienta, zarówno pod kątem wyglądu, jak i funkcjonalności.
  • + mniejsza podatność na exploity – z racji, iż wykorzystywany kod jest pisany od podstaw, zmniejsza to znacznie podatność na szeroko pojęte exploity czy malware. Bezpieczeństwo nie będzie nigdy stuprocentowe, jednak unikalny kod znacząco zmniejsza prawdopodobieństwo infekcji.
  • – nie ma możliwości aktualizacji automatycznej – kod tworzony jest pod określone rozwiązanie, więc aktualizacja automatyczna nie jest możliwa. Jeśli u podstaw technologii, na której zbudowana jest strona (np. PHP, MySQL) pojawią się exploity, w większości przypadków przepisanie funkcji lub jej modyfikacja do nowych standardów będzie operacją serwisową i dodatkowo płatną.
  • – autorskie rozwiązania trudniejsze w zmianach – jeśli z jakiegoś względu nowy programista będzie musiał wprowadzać zmiany na autorskim szablonie, może to być zdecydowanie trudniejsze i bardziej czasochłonne, niż w przypadku gotowych rozwiązań. Autorski kod bez dokumentacji i nie napisany pod rozbudowę, może bardzo mocno utrudniać nawet najprostsze zmiany.

Darmowy szablon – kluczową zaletą WordPressa jest jego społeczność. Przez lata od premiery powstały tysiące darmowych szablonów do wykorzystania.

Wady i zalety:

  • + brak opłat za sam szablon – jak sama nazwa wskazuje, darmowe szablony nie wymagają od nas żadnych opłat,
  • + szeroki wybór stylów i możliwości – mnogość stylów, opcji i rozpiętość funkcji sprawiają, że każdy znajdzie coś dla siebie i dopasuje do swoich potrzeb,
  • – koszty dostosowania do potrzeb – wybór szablonu, który nam się podoba, nie zawsze oznacza, że znajdziemy w nim wszystkie funkcje, których potrzebujemy. Dostosowanie go do naszych potrzeb, czy to przez użycie wtyczek, czy pomocy webdevelopera, może wiązać się z dodatkowymi kosztami – zarówno finansowymi jak i bezpieczeństwa.
  • – podatność na exploity – jest to przypadłość wszystkich darmowych i popularnych rozwiązań.
    Popularność WordPressa otwiera go na próby hakowania i wykorzystywania podatności (exploitów) do SPAM-u czy innych nieetycznych i nielegalnych działań. Żadnego kodu nie da się zabezpieczyć na sto procent, ale wykorzystywnie jego otwartej wersji, zwiększa ryzyko shakowania.

Płatny Szablon – jeśli chcemy skorzystać z niestandardowych rozwiązań lub już napisanych funkcji możemy wybrać szablon płatny. Tym samym wykorzystujemy developera, ale bez bezpośredniego zatrudniania – oczywiście współdzielimy wtedy jego pracę z innymi, jednak pozwala to znacząco obniżyć koszt szablonu, nadal pozwalając cieszyć się funkcjami premium.

Wady i zalety:

  • + profesjonalnie wyglądający i aktualizowany szablon – szablony płatne w dużej mierze są o wiele bardziej dopracowane pod kątem wizualnym niż ich darmowe odpowiedniki. Mogą wykorzystywać własne style dla ogólnodostępnych wtyczek lub posiadać wbudowane rozwiązania, dzięki czemu nie potrzebujemy ich dodawać. Płatne szablony często są powiązane z rocznym lub dłuższym wsparciem w zakresie aktualizacji i wprowadzania nowych funkcji, co pozwala witrynie cieszyć się większym bezpieczeństwem niż inne.
  • + wbudowane płatne wtyczki premium – często płatne szablony posiadają wbudowane płatne wtyczki, których wartość nieraz przekracza wartość samego szablonu. Developer szablonu sprzedając go masowo, może pozwolić sobie na współpracę z developerami wtyczek, co daje obu dodatkowe możliwości – szablon wzbogaca się o nowe funkcje, wtyczka zyskuje nowe możliwości sprzedaży.
  • – brak licencji do aktualizacji wtyczek – o ile wtyczki premium mogą wchodzić w skład danego szablonu, odbywa się to często kosztem ich dalszych aktualizacji. Wtyczki premium są często rozliczane w abonamencie lub płatnych aktualizacjach. O ile z niektórych nie musimy korzystać i możemy je pominąć, o tyle niektóre tj. pagebuildery (o których za chwilę) czy slidery stanowią tak integralną część szablonu że brak ich aktualizacji naraża całą witrynę na exploity.
  • – podatność na exploity – jak już wspominałem popularność sprowadza wrogów. Fakt, że szablon jest płatny – nie oznacza, że nie jest podatny na ten sam los co jego darmowi odpowiednicy. Błędy kodowania i podatności pojawiają się w każdym kodzie prędzej czy później. Wykorzystywanie wtyczek, nad którymi nie ma się kontroli, czy opieranie szablonu o rozwiązania, które same w sobie mogą z czasem zostać złamane jest nieuniknione.

Page Builder – jest to narzędzie pozwalające na swobodne budowanie wyglądu witryny z gotowych elementów. Można to przyrównać do budowania strony z klocków Lego – gdzie wszystko do siebie pasuje, nie potrzeba żadnych narzędzi, ale jednocześnie elementy są standaryzowane.

Wady i zalety:

  • + przyjazne UI nawet dla użytkownika końcowego – bardzo mocną zaletą jest relatywnie prosty interfejs użytkowania. Mamy tutaj zarówno wizualne buildery na zasadzie drag’n’drop (przeciągnij i upuść), jak również takie, gdzie wybieramy elementy i układamy je w odpowiednie miejsca.
  • + elastyczne tworzenie stron – drugą zaletą jest elastyczność. Zarówno osoba, która chce zbudować prostą stronę informacyjną, jak i specjalista chcący zbudować profesjonalny landing page, są w stanie z łatwością osiągnąć swoje cele.
  • – podatność na exploity – niestety jak już widać na przykładzie poprzednich elementów – popularność sprowadza kłopoty. Zawsze mając do czynienia z popularnym rozwiązaniem, narażamy się na błędy programowania i słabości bibliotek, z których skorzystał programista.
  • – rozbudowany backend generujący mnóstwo niepotrzebnego kodu – jest to dość techniczny minus, jednak warto o nim wiedzieć zwłaszcza przy próbach tworzenia jak najefektywniejszej witryny. Buildery opłacają swoje przyjazne UI i prostotę często ogromnymi ilościami niepotrzebnego kodu, który może nie tylko zaśmiecać architekturę informacji, ale i niepotrzebnie zwiększać czas ładowania stron i powodować różne problemy, np. w zakresie SEO.

Te 4 opcje zamykają nasze możliwości, jeśli chodzi o projektowanie wizualne strony. Lecz nie zamykają możliwości funkcjonalnych. Drugim elementem, który jest flagowym rozwiązaniem WordPressa są wtyczki/pluginy. Ich mnogość i funkcjonalność jest nie do przecenienia.

Aktualnie jest wielce prawdopodobne, że do funkcji, którą sobie wymarzyłeś jest już gotowa wtyczka. Jednak i w tym kontekście mamy…

Wady i zalety:

  • + nieskończona możliwość rozbudowy witryny – jak już wspominałem wcześniej – jeśli masz jakiś pomysł, na 99% jest już do tego wtyczka w WordPressie.
  • – podatność na exploity – ciągnie się to za nami jak kula u nogi, ale ponownie – popularność wtyczki naraża ją na zmasowane ataki hakerów i malware.

Co powinno być w 2020 w standardzie?

Jak pewnie niektórzy zauważą, w ramach naszych pytań o projektowanie, nie poruszamy kwestii dla wielu kluczowych:

  • RWD – Responsive Web Design – technika sprawiająca, że strona wygląda dobrze na każdym urządzeniu, z którego korzysta użytkownik,
  • Szybkość działania witryny – kluczowa obecnie i stanowiąca nawet sygnał rankingowy dla SEO,
  • Przygotowanie pod SEO – elementy, które technicznie trzeba wdrożyć, aby witryna miała szanse w pozycjonowaniu,
  • Podstawowe zabezpieczenia – ograniczenie prób logowania, silne hasła, blokady regionalne, zabezpieczenia plików corowych WordPressa i serwera,
  • SSL – przy obecnym postępie “oznaczeń” w przeglądarkach, element coraz ważniejszy,
  • Analityka – bez danych na temat ruchu, żadna strona nie może się obyć.

Nie poruszamy ich nie dlatego, że są techniczne lub skomplikowane. Nie poruszamy ich z prostego faktu – w 2020 to nie są elementy które podlegają jakimkolwiek przemyśleniom – są to standardy które MUSZĄ być wdrożone i które są poziomem, poniżej którego się nie schodzi. RWD czy przygotowanie pod SEO to nie są w 2020 wartości dodane, na które klient może lub nie musi się zgadzać, to podstawy które powinny być domyślną i integralną częścią projektowania.

3. Kodowanie

Jest to etap najmniej widowiskowy dla klienta, gdyż wprowadza w życie wizję, którą obserwował już na etapie projektowania. W tej części projekt staje się czymś realnym i widać jak każdy element ze sobą współgra. Jest to też często etap najdłuższy, nie ze względu na problemy z kodowaniem, a raczej perspektywą. Coś, co dobrze wyglądało na etapie projektowania z lorem ipsum i stockowymi obrazkami, może nie działać tak świetnie w momencie, gdy uzupełniamy je docelowym contentem. Dlatego często ku rozpaczy developerów pojawiają się nieskończone ilości poprawek i fixów.

W momencie, gdy tworzymy zupełnie nową witrynę na zupełnie nowej domenie, mamy możliwość pracowania bezpośrednio na tej domenie. Warto ją oczywiście zabezpieczyć jeszcze przed indeksacją i odwiedzinami nieuprawnionych osób, ale pozwala nam to na sprawne i bezbolesne włączenie jej w odpowiednim momencie. Pozwala to rownież na wyłapanie wielu rzeczy przed testami.

W momencie, gdy tworzymy nową wersję istniejącej już witryny, wtedy zawsze powinniśmy pracować na wersji dev. Czy jest ona dostępna jako subdomena obecnej witryny czy na serwerze wykonawcy (ma to delikatne znaczenie o czym wspomnę zaraz), zawsze ponownie powinniśmy zadbać o jej nieindeksowanie i kontrolę dostępu.

Hostowanie wersji dev na subdomenie obecnej witryny jest rozwiązaniem lepszym z punktu widzenia kilku elementów:

  • środowisko tworzenia witryny jest zazwyczaj to samo – pracujemy na tej samej wersji PHP, MySQL i innych potrzebnych do działania witryny technologiach – dzięki temu podczas migracji nie ma obawy, że nagle okaże się, że biblioteka, której wymaga nowa wersja strony nie jest obsługiwana na serwerze docelowym.
  • testy prędkości będą bardziej realne – testowanie prędkości działania witryny na serwerze testowym wykonawcy, może pokazywać zarówno lepsze, jak i gorsze rezultaty, gdyż infrestruktura serwera może się znacząco różnić. Serwery na dyskach SSD, CDN, cachowanie, optymalizacje ustawień pod WordPressa – wszystko to może sprawić, że witryna, która osiągała rekordy prędkości na wersji dev, ślimaczy się niemiłosiernie na serwerze docelowym, który nie wspiera wielu z wyżej wymienionych technologii.
  • sama migracja – w przypadku pracy na serwerze klienta, przełączenie pomiędzy jedną a drugą wersją strony, może trwać nawet kilka sekund bez zaburzenia pracy witryny.

4. Testowanie

Jest to etap, nad którym powinniśmy spędzić dość dużo czasu. Pozwala to uniknąć falstartu czy generalnych problemów z premierą naszej nowej witryny. Większość z elementów do testowania, to również elementy które mają kluczowe znaczenia zarówno dla UX jak i SEO.

  • Działanie na przeglądarkach – jest to element, który powinien stanowić najmniejszy problem nowoczesnej witryny. Nigdy nie powinno się pisać kodu lub wybierać technologii tworzenia witryny, która nie jest wspierana przez większość przeglądarek internetowych. Na szczęście obecnie wszystkie przyjmują standardy W3C za normę, co sprawia, że pisząc prawidłowy kod, mamy wielkie szanse, że nie napotkamy żadnych błędów. Nie możemy jednak zapominać, iż niektóre elementy, zwłaszcza w obrębie CSS, mogą się nieznacznie różnić na różnych przeglądarkach i warto to zawsze sprawdzić. Mimo iż Google Chrome stanowi 71% rynku przeglądarek w Polsce, nie możemy zakładać, że wszyscy odwiedzający naszą witrynę korzystają tylko z niej.
  • Działanie na mobile – urządzenia mobilne często generują nawet 70-80% ruchu na stronie. Prawidłowe działanie na sprzęcie przenośnym jest więc często kluczowe i stoi wyżej, niż optymalizacja pod urządzenia desktopowe. Działanie pod urządzeniami mobilnymi nie zawsze oznacza, że wszystkie funkcje z wersji desktopowej powinny się znaleźć w wersji mobilnej. Czasem niektóre opcje nie mają sensu na tak małych ekranach, a innym razem dedykowane rozwiązania dla mobile’a są niezbędne – zawsze warto postawić się w roli użytkownika i jego potencjalnych oczekiwań.
  • Szybkość działania – tą kwestie poruszaliśmy już na etapie kodowania, ale zwłaszcza w przypadku migracji pomiędzy serwerami warto sprawdzić, jak witryna zachowuje się na tym docelowym. Wszelkie technologie wspomagające prędkość powinny być użyte, aby zmaksymalizować potencjał nowej witryny.
  • SSL – jest to element, który można przetestować niestety dopiero po wdrożeniu witryny na adres docelowy (chyba, że korzystamy z darmowego Let’s Encrypta i możemy generować certyfikaty dowolnie), ale jest bardzo kluczowy. Mixed content, brak przekierowania wersji http na https, certyfikat wystawiony tylko na wersję bez www – to najczęstsze problemy, z którymi trzeba się zmagać i o których trzeba pamiętać.
  • SEO – wdrożenie już na poziomie przygotowania gwarantuje, że nowa witryna już w momencie startu będzie mogła konkurować z innymi. Ustawienia title, description, nagłówki, dane strukturalne, nawigacja okruszkowa, sitemapy, canonicale – wszystko to powinno być przetestowane przed wdrożeniem witryny.
  • Przekierowania – jest to kwestia przeznaczona głownie dla nowych wersji istniejących już witryn. Często podczas tworzenia nowej strony zmienia się struktura adresów URL do podstron. Nie możemy zapomnieć o połączeniu starej struktury z nową. Google automatycznie tego za nas nie zrobi i jeśli nie chcemy obudzić się kilka dni po migracji z wszystkimi stronami poza indeksem – warto bardzo dużo czasu poświęcić prawidłowym przekierowaniom.

5. Migracja

Etap migracji to już ostatni z “jednorazowych” etapów tworzenia witryny. Jest to moment, w którym albo “włączamy” nową wersje starej strony lub przenosimy ją z serwera dev na docelowy. Jakąkolwiek opcję wybraliśmy, na tym etapie wszystko powinno być już formalnością. W euforii zakończenia projektu, nie powinniśmy jednak zapominać o dwóch ważnych rzeczach:

  • sprawdzeniu, czy w kodzie nie ma odwołań do plików na serwerze dev – jest to element, który często się pojawia. O ile zawsze zaleca się w kodowaniu używać adresacji względnej, często niektóre rozwiązania mogą korzystać z adresów bezwzględnych, co powoduje, że pomimo migracji, niektóre pliki ładowane są z serwera dev zamiast z docelowego.
  • odblokowaniu indeksacji i dostępów – trywialne, jednak nie raz i nie dwa spotkaliśmy się z nową witryną, dopiero co oddaną do użytku, nadal z zablokowaną indeksacją stron.

6. Obsługa

Tworzenie strony jest dla wielu procesem skończonym. Tworzymy witrynę, wdrażamy ją ergo praca nad nią jest zakończona. Nic jednak bardziej mylnego. Aktualizacja silnika, wdrażanie zmian i poprawek, wynikających ze zmian rynkowych i technologicznych, wdrażanie nowych rozwiązań i bieżąca obsługa witryny – to zadania cykliczne, a nie jednorazowe prace. Przytoczmy kilka konkretnych przykładów:

  • Aktualizacja silnika WordPress – w wielu przypadkach jest to prosty etap do przejścia przez każdego, kto choć przez chwilę zarządza witryną. Jednak od pewnego czasu pojawiają się komunikaty o potrzebie aktualizacji rownież wersji PHP. Nie jest to coś, co wszyscy rozumieją i potrafią zrobić, a często mniejsze hostingi nie wspierają tego typu zmian. Aktualizacja PHP może pociągać za sobą modyfikacje w kodzie strony z racji zmian w funkcjach obsługiwanych przez PHP i konstrukcji wyrażeń.
  • Przywracanie kopii bezpieczeństwa – przerwana aktualizacja, niekompatybilne zmiany w nowej wersji wtyczki, błędy ludzkie – to zdarzenia, które wymagają czasem przywracania kopii bezpieczeństwa strony. Bez prawidłowej konfiguracji lub wiedzy, jak ją przywrócić, możemy tracić cale dni z błędnie działającą stroną.
  • Czyszczenie z malware – ostatnio najczęściej obserwowana sytuacja. Brak aktualizacji witryny, zarówno jeśli chodzi o sam WordPress jak i zainstalowane wtyczki, naraża ją na exploity. Mogą one prowadzić do przekierowywania użytkowników na strony o kwestionowanej jakości, oznaczenia witryny jako niebezpieczna w wynikach Google, jak i wyłączenia wszelkich możliwości promocji (tj. Google Ads). Stały monitoring i aktualizacja jest w tej sytuacji podstawą działania.
  • Aktualizacja pluginów – czasem wdrażane są istotne zmiany w funkcjonowaniu wtyczki, np. WooCommerce lub ACF, które mogą wymagać mniejszych lub większych prac programistycznych.
  • Monitoring działania – stały monitoring witryny i jej uptime są kluczowe w tym, by generowała ona ruch i spełniała swoje założenia (i nie marnowała budżetów w Google Ads).

7. Podsumowanie

Mam nadzieję, że z tej lektury wyłoni się obraz ogromu pracy i elementów, wchodzących w skład tworzenia strony na WordPressie.

Chcesz dowiedzieć się więcej o tworzeniu stron?
Potrzebujesz stałej usługi utrzymania strony lub zaprojektowania czegoś wyjątkowego?

[Głosów: 7   Average: 4.4/5]
Specjalista SEM z 15 letnim stażem. Na co dzień zajmuje się przygotowaniem, prowadzeniem, optymalizacją i raportowaniem kampanii reklamowych, jak również analityką internetową i zagadnieniami związanymi z SEO. Prywatnie fan japońskiej herbaty i amerykańskich jabłek ;)

ZAINTERESOWAŁA CIĘ NASZA OFERTA?

Wypełnij brief Skontaktuj się z nami