Czym jest Headless WordPress? Kompletny przewodnik dla początkujących.

Systemy zarządzania treścią same w sobie potrafią wiele, a mogą jeszcze więcej, gdy będą Headless, czyli “bezgłowe”. Brzmi dziwnie? Trochę. Czy jest to opcja, której powinieneś się przyjrzeć? Jak najbardziej. Wraz z rosnącą liczbą dostępnych kanałów cyfrowych i rosnącymi oczekiwaniami klientów, Headless CMS stał się idealnym rozwiązaniem do zarządzania treścią, z którym warto się zapoznać. Przeczytaj nasz przewodnik, aby dowiedzieć się więcej.

Czym jest Headless CMS?

Aby zdefiniować Headless CMS, najpierw rozbierzmy ten termin na czynniki pierwsze. CMS to skrót od Content Management System, czyli systemu używanego do tworzenia, przechowywania i organizowania treści, takich jak posty na blogu, obrazy lub filmy.

Tradycyjnie, użytkownicy odwiedzający stronę widzą jej interfejs, czyli front-end, natomiast za przechowywanie danych i zarządzanie nimi odpowiada back-end (używasz go do dodawania nowych treści i funkcji oraz dostosowywania stylów). Innymi słowy – w tradycyjnym CMS baza treści na stałe powiązana jest z szablonem. Natomiast opcja „bezgłowa” jest zaprojektowana inaczej. Gdy CMS jest „bezgłowy”, oznacza to, że repozytorium treści back-end (body) jest oddzielone od warstwy front-end (head).

Tradycyjny vs. Bezgłowy CMS

W tradycyjnym (zwanym również monolitycznym) CMS, możesz tworzyć, edytować i przechowywać treści w obrębie jednego systemu. Zazwyczaj wybierasz motywy i wtyczki oraz dostosowujesz wygląd stron internetowych za pomocą łatwego w użyciu edytora “What You See Is What You Get” (WYSIWYG). Możesz na przykład przejść do pulpitu nawigacyjnego i użyć interfejsu Przeciągnij i upuść (drag-and-drop interface), aby edytować post, wyświetlić podgląd i opublikować go za pomocą kilku kliknięć. W takim przypadku nie potrzebujesz zaawansowanych umiejętności technicznych, aby stworzyć witrynę, ale jesteś w pełni zależny od swojego CMS, jeśli chodzi o wyświetlanie treści. Sprawa się jednak komplikuje, gdy publikowanie treści ma odbywać się na wielu różnych platformach. Jeśli chcesz umieścić swoje treści na stronie internetowej, Facebooku, aplikacji mobilnej, smartwatchu czy Wikipedii, Headless CMS daje taką możliwość i zapewnia elastyczność. Jak? Ponieważ usuwa front-end (“odcina głowę”, mówiąc w przenośni) i pozwala rozwijać go za pomocą wybranego kodu. Back-end może być wtedy używany niezależnie od języka używanego w warstwie wyświetlania.

Zanim przejdziemy do tego, jak faktycznie działa to rozwiązanie, szybko wyjaśnijmy jeszcze jedną rzecz – jeśli słyszysz terminy “headless” albo “decoupled” WordPress używane zamiennie, to wiedz, że istnieje między nimi różnica. W wersji „decoupled” front i back-end są oddzielone (choć połączone przez API) i działają niezależnie od siebie, co pozwala na zmianę prezentacji strony bez zmiany kodu. Niemniej jednak front-end pozostaje częścią całego systemu, a jego architektura jest wstępnie zdefiniowana i określona przez konkretne środowisko prezentacji.

Gdy CMS jest “headless”, to umożliwia dostarczanie treści na dowolną platformę, ponieważ warstwa front-endu nie determinuje back-endu.

Bezgłowy WordPress – jak to działa?

OK, powiedzieliśmy ogólnie kilka słów o systemach zarządzania treścią, skupmy się teraz na najpopularniejszym, który zagarnął lwią część rynku – na WordPressie. W 2016 roku wydano wersję WP 4.7 z domyślnie włączonym REST API. Aby uchwycić istotę Headless WordPress musimy najpierw zrozumieć, czym jest REST API.

Interfejs programowania aplikacji (API) to oprogramowanie, które umożliwia aplikacjom komunikowanie się ze sobą. Natomiast Representational State Transfer (REST) API umożliwia zewnętrznym aplikacjom dostęp do treści w postaci nieprzetworzonych danych zaimportowanych bezpośrednio z WordPressa. Dzięki temu programiści mogą integrować WP z aplikacjami i witrynami innych podmiotów. Dlaczego ten element oprogramowania jest ważny? Ponieważ to REST API wywołuje zawartość przechowywaną na zapleczu strony i przesyła ją na preferowane platformy i urządzenia. Oznacza to, że możesz używać REST API, aby udostępniać treści w wielu witrynach i kanałach.

Aby osiągnąć swobodę przy tworzeniu dowolnej warstwy wyświetlanej użytkownikowi, należy najpierw poświęcić dużo czasu i zasobów. Aby zbudować szybkie, adaptowalne strony internetowe i zapewnić wydajność bezgłowego front-endu, należy wybrać odpowiedni język kodowania i framework (taki jak React JS, Gatsby JS, Vue JS, Angular JS, lub Foundation).

Czy “bezgłowy” WP jest dla Ciebie dobrym rozwiązaniem?

Tradycyjny CMS ma więcej ograniczeń, ale to nie znaczy, że opcja Headless jest dla wszystkich. Przy braku odpowiednich zasobów technologicznych oraz wsparcia zewnętrznego programisty lub agencji, Headless CMS może nie być najlepszym rozwiązaniem. Istnieją jednak pewne scenariusze, w których firma może zdecydowanie odnieść korzyści dzięki bezgłowej architekturze strony.

• Chcesz, aby Twoje unikalne witryny były wyświetlane na wielu różnych urządzeniach.
• Chcesz mieć większą kontrolę nad SEO, strukturą witryny i widokiem treści.
• Chcesz aktualizować treści w jednym miejscu, ale publikować je w wielu kanałach.
• Zarządzasz sub-markami promowanymi w wielu witrynach.
• Tworzenie treści jest Twoim głównym celem i chciałbyś je codziennie opracowywać, publikować i edytować bez angażowania zespołu technicznego.
• Preferujesz korzystanie z niestandardowych narzędzi, które nie integrują się z tradycyjnym CMS.
• Zarządzasz platformami e-commerce i oferujesz różnorodne produkty i usługi.
• Działasz w branży, w której złożona treść i częste aktualizacje są codziennością, jak na przykład linie lotnicze, usługi finansowe lub handel detaliczny.
• Swoboda technologiczna jest dla Ciebie ważna i nie chcesz być ograniczany przez żaden system lub język kodowania.

Nadal nie jesteś pewny czy to dobra opcja dla Ciebie? Sprawdźmy teraz wszystkie wady i zalety wykorzystywania “bezgłowego” WordPressa.

Czy wiesz,
że możesz odmienić
swój biznes?

Zacznijmy już teraz

POROZMAWIAJMY

Zalety Headless WordPress

Jeśli chcesz zrezygnować z wygody tradycyjnego WordPressa, musisz mieć ku temu dobry powód. Poniżej wymieniamy kilka przekonujących argumentów za zastosowaniem rozwiązania „bezgłowego”.

Wsparcie strategii omnichannel: Dzięki opcji Headless nie jesteś ograniczony do jednego konkretnego wyglądu witryny, a użytkownicy mogą korzystać z Twoich treści również z pominięciem strony internetowej. Wyjście poza sferę WordPressa znacząco poprawia skalowalność – możesz szybko wdrażać treści do aplikacji mobilnych, smartwatchów, asystentów cyfrowych, urządzeń IoT i wielu innych.

Wiele „głów”: Jeśli jesteś organizacją z wieloma stronami internetowymi lub jesteś aktywny na różnych kanałach, możesz zarządzać swoją pracą za pośrednictwem kilku „głów” i tylko jednego back-endu. Co więcej, nie musisz się wtedy martwić o wprowadzanie zmian w każdym produkcie i usłudze dla każdej z platform – dzięki rozwiązaniu bezgłowemu możesz to wszystko zaktualizować w jednym miejscu.

Zwiększona efektywność: Bogaty w funkcje interfejs WordPressa nie zawsze jest tak szybki, jak byśmy sobie tego życzyli. Wtyczki i motywy (głównie te nieużywane) tylko obciążają system, a w dzisiejszych czasach nie można spodziewać się, że użytkownicy o będą długo i cierpliwe czekali na załadowanie strony. Powolne renderowanie strony w tradycyjnym CMS również negatywnie wpływa na samo doświadczenia użytkownika ze stroną. REST API pozwala na znacznie szybsze renderowanie treści. A jeśli chcesz zmodernizować lub nawet przebudować front-end, możesz to łatwo zrobić bez wprowadzania zmian w kodzie i ponownego przesyłania starych treści.

Komentarz eksperta

Autor

Paweł Ćmachowski

WordPress Team Leader at Develtio

Kiedy w 2017 roku po raz pierwszy spotkałem się z koncepcją bezgłowego CMS, od razu zobaczyłem w niej duży potencjał. Od tego czasu dedykowane narzędzia Headless WordPress CMS zmieniły się nie do poznania, utwierdzając mnie tylko w przekonaniu, że ta architektura to technologia przyszłości. Główną zaletą Headless CMS jest oczywiście oddzielenie back-endu od front-endu. Dzięki czemu zyskujemy dużą elastyczność w stosunku do standardowych rozwiązań, a komponenty systemu możemy rozwijać niezależnie od siebie. Co więcej, dzięki wspomnianej separacji, tworzenie kolejnych wersji front-endu, czy np. aplikacji mobilnych lub progresywnych jest łatwiejsze niż kiedykolwiek wcześniej.

Headless CMS niesie również znaczną wartość dla użytkowników końcowych – rozdzielając komponenty systemu zyskujemy na szybkości, a strona stworzona w oparciu o bezgłowy CMS ładuje się tak szybko, jak zwykłe pliki statyczne umieszczane na serwerze.

Elastyczność front-end: WordPress w swojej tradycyjnej formie to świetna platforma. Elastyczny, konfigurowalny, z mnóstwem motywów i wtyczek w ofercie. Ale zawsze może być lepiej, a pozbycie się szablonów i dodatków to tylko pierwszy etap. Być może nie chcesz być ograniczany przez systemowe rozwiązania WordPress i zamiast tego wolałbyś zlecić wykonanie front-endu strony w innym oprogramowaniu. Teraz możesz tak zrobić. Opcja Headless daje Twojemu programiście pełną swobodę twórczą, którą doceni zarówno on, jak i Twój biznes.

Wady Headless WordPress

Jak zawsze, wszystko w życiu ma swoją cenę – nie inaczej jest w przypadku Headless CMS, ale o tym później. Tradycyjny CMS jest używany od lat, a wokół niego rozwinął się cały ekosystem. Gdy decydujesz się na opcję Headless, musisz porzucić znane narzędzia i technologie, a w rezultacie zmierzyć się z pewnymi niedogodnościami:

Będziesz potrzebował pomocy programisty: Jedną z istotnych zalet WordPressa zawsze było to, że jest łatwy w użyciu nawet dla osób nieposiadających wiedzy informatycznej. Wdrażanie rozwiązań headless oznacza jednak rozpoczęcie przygody z kodem. Witamy ponownie, programiści! Teraz bardziej niż kiedykolwiek wcześniej, potrzebujemy Was do tworzenia skalowalnego kodu i budowania unikalnego doświadczenia klienta. Bezgłowa architektura jest o wiele bardziej złożona niż ta w tradycyjnym CMS, a konieczność opracowania własnego front-endu, nie jest rozwiązaniem dla nowicjuszy technologicznych. Ponadto, korzystanie z pomocy technicznej w zakresie utrzymania i wprowadzania zmian może wydłużyć też czas pojawienia się aktualizacji na stronie.

Edycja może stać się wyzwaniem: W bezgłowej wersji WP nie widzisz interfejsu takiego, jakim widzą go użytkownicy. Brak możliwości bieżącego podglądu może sprawić, że zarządzanie treścią będzie znacznie trudniejsze. No, chyba, że zajmuje się tym ktoś z doświadczeniem w kodowaniu.

Musisz więcej zainwestować: Mówimy tutaj zarówno o czasie, jak i pieniądzach. Zamiast jednego, łatwego w utrzymaniu systemu jakim jest WordPress, musisz teraz zadbać o kilka platform. To oznacza, że będziesz musiał opracować front-end i kodować wtyczki specyficzne dla konkretnego systemu. Wdrażanie własnych rozwiązań oznacza więc konieczność ciągłego sprawdzania kodu, co jest czasochłonnym i kosztownym zajęciem.

Zanim zdecydujesz się na to rozwiązanie, powinieneś starannie rozważyć wszystkie jego wady i zalety oraz swoje oczekiwania względem kanałów i platform, które chcesz obsługiwać. Pamiętaj jednak, że w dzisiejszych czasach, przy mnogości urządzeń i platform dostępnych dla użytkowników, omnichannel jest już raczej koniecznością niż tylko opcją. A Headless WordPress to rozwiązanie idealnie dopasowane do potrzeb omnichannel.

Jak stworzyć bezgłową stronę na WordPress

Skoro czytasz dalej, to prawdopodobnie podoba ci się wizja bezgłowego WP. Ale co dalej? Istnieją dwie metody rozpoczęcia pracy z tym rozwiązaniem.

Skorzystaj z wtyczki

WordPress słynie z niekończącej się listy różnych dostępnych wtyczek. Dlaczego więc nie skorzystać z jednej z nich? Wtyczki z pewnością ułatwią Ci pracę, mimo, że nie obejdzie się bez wiedzy technicznej, która nadal wymagana jest do zbudowania front-endu i wysyłania żądań API. Dzięki wtyczce WP Headless, możesz na przykład usunąć front-end witryny i skonfigurować WordPress jako Headless CMS. WPGraphQL to kolejna godna uwagi wtyczka, która oddziela CMS od interfejsu, umożliwiając programistom korzystanie z GraphQL (jest to open-sourcowy język zapytań o dane dla interfejsów API stworzonych przez Facebook). A jeśli jesteś zainteresowany uruchomieniem sklepu na wielu platformach, możesz wypróbować wtyczkę CoCart, która umieszcza Headless API w back-endzie platformy WooCommerce.

Ręczna konfiguracja

Jeśli zależy Ci na elastyczności i nie chcesz korzystać z istniejącego front-endu, najlepszym rozwiązaniem będzie utworzenie Progresywnej Aplikacji Internetowej (PWA) lub samodzielne zbudowanie witryny. Uważamy, że przy tak dużej liczbie dostępnych produktów, łatwiej jest nauczyć się front-endowego frameworka kompatybilnego z WordPress (takiego jak Gatsby czy React) niż budować nową stronę internetową od podstaw.

Podsumowanie

Popularność Headless CMS stale rośnie i będzie rosła w przyszłości. Wynika to z faktu, że przy coraz większej liczbie kanałów i urządzeń potrzeba jednego dobrego rozwiązania, które obsłuży je wszystkie. Nie wspominając już o tym, że ta opcja jest też atrakcyjna dla programistów, którzy zyskują pełną swobodę i elastyczność w zastosowaniu różnych języków. Czy wiesz, co to oznacza? Lepsze rozwiązania i lepsze doświadczenia użytkownika. Co prawda, wdrożenie i utrzymanie tego rozwiązania trzeba powierzyć specjalistom, ale praca z doświadczonymi fachowcami w tej dziedzinie nie jest taka zła. Jeśli wybierzesz Develtio, możesz być pewien, że zapewnimy Ci płynną i szybką współpracę przy projektach odpowiadających Twoim potrzebom, oraz wspólnie stworzymy wyjątkowe witryny.