![\"headless](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/06\/DOBRYheadlessCMS_baner.png\" "\\"\\"")
<\/p>\n<\/p>\n
Headless CMS to poj\u0119cie, kt\u00f3re w ostatnim czasie zyskuje na popularno\u015bci, zw\u0142aszcza w\u015br\u00f3d os\u00f3b zajmuj\u0105cych si\u0119 frontendem. Dlaczego tak si\u0119 dzieje i czym jest headless CMS?<\/p>\n
W skr\u00f3cie \u2013 Headless CMS polega na odseparowaniu od siebie backendu (body<\/span>) i frontendu (head<\/span>) aplikacji. Mianem body<\/span> okre\u015bla si\u0119 CMS dostarczaj\u0105cy narz\u0119dzi do tworzenia i zarz\u0105dzania tre\u015bci\u0105, kt\u00f3ra jest udost\u0119pniana przez interfejs API. Warstw\u0119 prezentacji nazywamy head<\/span>. Head to, na przyk\u0142ad, strona WWW, sklep internetowy, aplikacja mobilna i tym podobne. Dzi\u0119ki oddzieleniu head<\/span> od body<\/span> zyskujesz wyra\u017anie odseparowan\u0105 warstw\u0119 backendow\u0105 od frontendowej. Taka architektura umo\u017cliwia programistom frontend tworzenie zaawansowanych stron bez znajomo\u015bci technologii backendowych.<\/p>\n Przeciwie\u0144stwem headless CMS jest, na przyk\u0142ad, WordPress, w kt\u00f3rym backend i frontend s\u0105 integraln\u0105 cz\u0119\u015bci\u0105. Cz\u0119sto okre\u015bla si\u0119 takie CMSy monolitami. W tradycyjnym podej\u015bciu CMSy, takie jak WordPress, dostarczaj\u0105 narz\u0119dzi do tworzenia i zarz\u0105dzania tre\u015bci\u0105 oraz, w przeciwie\u0144stwie do headless, warstw\u0119 frontendow\u0105. Tworz\u0105c stron\u0119 w oparciu o WordPressa programista musi dysponowa\u0107 zar\u00f3wno wiedz\u0105 z technologii backendowych jak i frontendowych.<\/p>\n Istnieje jednak mo\u017cliwo\u015b\u0107, aby u\u017cy\u0107 WordPressa jako headless CMSa. W ramach tego poradnika dowiesz si\u0119, jak to zrobi\u0107 buduj\u0105c sw\u00f3j blog, kt\u00f3ry b\u0119dziesz rozwija\u0107 wy\u0142\u0105cznie w technologiach frontendowych. Wszystko to b\u0119dzie mo\u017cliwe dzi\u0119ki WordPress REST API.<\/p>\n Poradnik kierowany jest do os\u00f3b, kt\u00f3re poszukuj\u0105 backendu dla swoich projekt\u00f3w i maj\u0105 do\u015bwiadczenie z technologiami frontendowymi oraz posiadaj\u0105 podstawowe do\u015bwiadczenie w pracy z frameworkami JavaScript, np. Vue.js, React.js, Svelte. Przydatna mo\u017ce okaza\u0107 si\u0119 r\u00f3wnie\u017c wiedza na temat REST API i GraphQL.<\/p>\n Dzi\u0119ki niniejszemu poradnikowi dowiesz si\u0119, czym jest headless CMS oraz JAMstack. Poznasz wady i zalety headless CMS oraz zbudujesz sw\u00f3j pierwszy JAMstackowy blog korzystaj\u0105c z WordPressa jako backendu. W poradniku nie b\u0119d\u0105 poruszane zagadnienia zwi\u0105zane z CSS i HTML.<\/p>\n WordPressa mo\u017cemy zalicza\u0107 do headless CMS dopiero od wersji 4.7. Wtedy dodane zosta\u0142o REST API, kt\u00f3re jest niezb\u0119dne do stworzenia architektury headless.<\/p>\n WordPress REST API po instalacji WordPressa jest domy\u015blnie w\u0142\u0105czone. \u017beby zobaczy\u0107, co zwraca API, wystarczy otworzy\u0107 dowolny endpoint, np. twoja-strona.pl\/wp-json\/wp\/v2\/posts<\/span>. Wy\u015bwietlone dane to JSON z wpisami w Twoim WordPressie.<\/p>\n Warto zainstalowa\u0107 w swojej przegl\u0105darce rozszerzenie JSON Formatter, kt\u00f3re pokoloruje kod i sprawi, \u017ce zwr\u00f3cony JSON b\u0119dzie bardziej czytelny.<\/p>\n<\/div>\n Dodanie do WordPress REST API pozwoli\u0142o jego tw\u00f3rcom wykorzysta\u0107 architektur\u0119 headless na potrzeby samego CMSa. W wersji 5.0 edytor WYSIWYG Gutenberg zosta\u0142 napisany w React.js i wykorzystuje API. Przyk\u0142ad ten pokazuje, \u017ce headless CMSy mo\u017cemy wykorzystywa\u0107 nie tylko do budowy stron WWW, ale te\u017c korzysta\u0107 z cz\u0119\u015bci danych do rozszerzenia ju\u017c istniej\u0105cych projekt\u00f3w.<\/p>\n Dzi\u0119ki architekturze oddzielamy w ca\u0142o\u015bci PHPowy kod CMSa od warstwy prezentacji umo\u017cliwiaj\u0105c, np. skorzystanie z dowolnego frameworka JavaScript do stworzenia strony. WordPress jako backend sprawdzi si\u0119 te\u017c jako \u017ar\u00f3d\u0142o danych nie tylko dla strony WWW, ale te\u017c, np. dla aplikacji mobilnej czy wsp\u00f3\u0142dzielenia naszych tre\u015bci z innymi stronami w formie widget\u00f3w. Rozdzielenie backendu i frontendu b\u0119dzie te\u017c mia\u0142o pozytywny wp\u0142yw na bezpiecze\u0144stwo naszego projektu oraz jego skalowalno\u015b\u0107 w rozproszonej infrastrukturze.<\/p>\n Niestety headless CMS to nie tylko same pozytywy. Korzystaj\u0105c z REST API dostajesz dane pozbawione kontekstu wizualnego. W przypadku WordPressa utracisz mo\u017cliwo\u015b\u0107 korzystania z wtyczek typu visual builder czy samego Gutenberga. Generalnie mo\u017cemy za\u0142o\u017cy\u0107, \u017ce wszystkie wtyczki, kt\u00f3re dzia\u0142aj\u0105 poza kokpitem WordPressa stan\u0105 si\u0119 bezwarto\u015bciowe. Dzia\u0142a\u0107 powinny natomiast wszystkie wtyczki rozszerzaj\u0105ce mo\u017cliwo\u015bci tworzenia i edytowania tre\u015bci jak na przyk\u0142ad Advanced Custom Fields.<\/p>\n Korzystaj\u0105c z headless CMS przenosisz ca\u0142\u0105 odpowiedzialno\u015b\u0107 za funkcjonowanie strony na programist\u0119. Funkcje, kt\u00f3re do tej pory mo\u017cliwe by\u0142y do skonfigurowania przy pomocy wtyczek, b\u0119d\u0105 musia\u0142y zosta\u0107 zakodowane.<\/p>\n<\/div>\n JAMstack to idealne dope\u0142nienie headless CMS, dlatego w ramach tego poradnika stworzysz JAMstackowego bloga przy u\u017cyciu Gridsome.<\/p>\n JAMstack jest architektur\u0105, kt\u00f3ra bazuje na J<\/strong>avaScript po stronie klienta, reu\u017cywalnym A<\/strong>PI i wst\u0119pnie wyrenderowanym M<\/strong>arkupie. \u0179r\u00f3d\u0142em danych dla JAMstackowych stron mog\u0105 by\u0107, np. headless CMS, pliki Markdown czy tabele AirTable. Architektura ta pozwala na tworzenie szybszych i bezpieczniejszych stron.<\/p>\n Gridsome to JAMstackowy framework dla Vue.js. Umo\u017cliwia szybkie tworzenie statycznie generowanych stron WWW. W poradniku korzystam z Vue.js. Je\u017celi React.js jest Ci bli\u017cszy, mo\u017cesz skorzysta\u0107 z Gatsby. Oba narz\u0119dzia dzia\u0142aj\u0105 w zbli\u017cony spos\u00f3b, r\u00f3\u017cni je tylko framework JavaScript, w kt\u00f3rym programujesz. Rozwi\u0105za\u0144 jest wiele, wspomniane dwa maj\u0105 dobr\u0105 dokumentacj\u0119 i du\u017c\u0105 spo\u0142eczno\u015b\u0107, co mo\u017ce by\u0107 pomocne w razie problem\u00f3w.<\/p>\n Przed rozpocz\u0119cie pracy z Gridsome musisz zainstalowa\u0107 Gridsome CLI (ang. command-line interface<\/em>). Otw\u00f3rz terminal i wpisz polecenie:<\/p>\n Po zainstalowaniu CLI sprawd\u017a, czy wszystko przebieg\u0142o poprawnie wpisuj\u0105c polecenie:<\/p>\n W terminalu powinna zosta\u0107 wy\u015bwietlona aktualna wersja CLI, np.:<\/p>\n Dzi\u0119ki narz\u0119dziom CLI dla Gridsome jeste\u015b w stanie w prosty spos\u00f3b stworzy\u0107 nowy projekt. Otw\u00f3rz terminal i wprowad\u017a polecenie:<\/p>\n W efekcie uzyskasz folder my-gridsome-site<\/span> z gotowym do uruchomienia projektem. Po utworzeniu projektu, mo\u017cesz uruchomi\u0107 lokalny serwer Gridsome wpisuj\u0105c w terminalu komend\u0119:<\/p>\n Serwer po uruchomieniu b\u0119dzie dost\u0119pny pod adresem URL localhost:8080<\/span>. Wprowad\u017a go w przegl\u0105darce, a po zalogowaniu zobaczysz stron\u0119 g\u0142\u00f3wn\u0105 swojego bloga.<\/p>\n Dzi\u0119ki poleceniu $ gridsome create<\/span> utworzony zosta\u0142 folder zawieraj\u0105cy kompletn\u0105 struktur\u0119 projektu.<\/p>\n Najwa\u017cniejsze foldery znajdziesz wewn\u0105trz folderu src<\/span> (ang. source code<\/em>). Pierwsza rzecz, na kt\u00f3r\u0105 warto zwr\u00f3ci\u0107 uwag\u0119, to pliki README.md<\/span> w podfolderach. Zawieraj\u0105 one kr\u00f3tki opis odpowiedzialno\u015bci danego folderu wraz z linkiem do dokumentacji.<\/p>\n Utworzony projekt nie posiada obecnie \u017cadnego backendu. Mo\u017cesz jedynie tworzy\u0107 nowe komponenty i budowa\u0107 statyczne podstrony. Gridsome to framework, kt\u00f3ry umo\u017cliwia integracj\u0119 danych z r\u00f3\u017cnych \u017ar\u00f3de\u0142 w tym WordPress REST API. W celu instalacji integracji z WordPressem otw\u00f3rz terminal i wprowad\u017a polecenie:<\/p>\n Zainstalowanie wtyczki nie wystarczy. Musisz j\u0105 jeszcze skonfigurowa\u0107. W celu konfiguracji wtyczki source-wordpress<\/span>, znajd\u017a w folderze g\u0142\u00f3wnym plik gridsome.config.js<\/span> i otw\u00f3rz go przy u\u017cyciu edytora kodu.<\/p>\n W pliku gridsome.config.js<\/span> odszukaj definicj\u0119 plugins<\/span> i dodaj ustawienia source-wordpress<\/span>:<\/p>\n W polu baseUrl<\/span> podaj adres, pod kt\u00f3rym dost\u0119pny jest Tw\u00f3j WordPress. Na potrzeby poradnika skorzystam z WordPressa dhosting.pl\/pomoc\/pomoc<\/span>. Dodatkowe opcje pluginu source-wordpress<\/span> znajdziesz na tej stronie<\/a>.<\/p>\n Dzi\u0119ki Headless CMS z \u0142atwo\u015bci\u0105 oddzielisz warstw\u0119 frontendow\u0105 od backendowej, czyli head od body. To bardzo korzystne rozwi\u0105zanie, daj\u0105ce wiele mo\u017cliwo\u015bci. Je\u015bli jednak chodzi o wyb\u00f3r hostingu lepiej nie traci\u0107 g\u0142owy i zapewni\u0107 sobie spok\u00f3j ducha.<\/p>\n Zagwarantuje Ci to Elastyczny Web Hosting \u2013 innowacyjne rozwi\u0105zanie automatycznie dopasowuj\u0105ce zasoby do potrzeb Twoich stron. Dzi\u0119ki temu zachowaj\u0105 one p\u0142ynno\u015b\u0107 dzia\u0142ania niezale\u017cnie od obci\u0105\u017cenia, a Ty nie musisz si\u0119 niczym przejmowa\u0107.<\/p>\n WYPR\u00d3BUJ HOSTING<\/strong><\/a><\/p>\n<\/div>\n Gridsome do obs\u0142ugi danych z API korzysta z j\u0119zyka zapyta\u0144 GraphQL. Je\u017celi widzisz t\u0119 nazw\u0119 pierwszy raz, nie przejmuj si\u0119. W dalszej cz\u0119\u015bci poradnika dowiesz si\u0119, czym jest GraphQL.<\/p>\n W celu wy\u015bwietlenia listy wpis\u00f3w na stronie g\u0142\u00f3wnej otw\u00f3rz plik Index.vue<\/span>, kt\u00f3ry znajdziesz w folderze src\/pages<\/span> i podmie\u0144 jego zawarto\u015b\u0107 na t\u0119 widoczn\u0105 poni\u017cej:<\/p>\n Warto zwr\u00f3ci\u0107 uwag\u0119 na tag <page-query><\/span>. Wewn\u0105trz tego tagu znajduje si\u0119 zapytanie GraphQLowe, kt\u00f3re pobiera dane zebrane z WordPress REST API. Wewn\u0105trz node<\/span> definiujesz, kt\u00f3re elementy wpis\u00f3w Ci\u0119 interesuj\u0105. W tym przypadku jest to id<\/span>, tytu\u0142<\/span> i fragment<\/span>.<\/p>\n Zatrzymaj si\u0119 chwil\u0119 na tym kroku i spr\u00f3buj doda\u0107 wi\u0119cej element\u00f3w do wpisu jak, np. lista tag\u00f3w<\/span> czy autor<\/span>.<\/p>\n<\/div>\n Maj\u0105c dost\u0119p do listy wpis\u00f3w, mo\u017cesz zaj\u0105\u0107 si\u0119 obs\u0142ug\u0105 pojedynczego wpisu. W tym celu otw\u00f3rz ponownie plik gridsome.config.js<\/span> i dodaj w nim opcj\u0119 templates<\/span>:<\/p>\n Dla dhosting.pl\/pomoc\/pomoc b\u0119dzie to po prostu slug<\/span>. Je\u017celi Tw\u00f3j adres pojedynczego wpisu zawiera wi\u0119cej p\u00f3l ni\u017c slug<\/span>, musisz je uwzgl\u0119dni\u0107 w ustawieniach, np.:<\/p>\n Otw\u00f3rz plik Index.vue<\/span>, kt\u00f3ry znajdziesz w folderze src\/pages<\/span> i dodaj do zapytania parametr path<\/span>:<\/p>\n Wykorzystaj parametr path<\/span> do przekszta\u0142cenia nag\u0142\u00f3wka <h2><\/span> w link:<\/p>\n W folderze src\/templates<\/span> utw\u00f3rz plik WordPressPost.vue<\/span>. Nazwa musi by\u0107 zgodna z template<\/span> utworzonym w pliku gridsome.config.js<\/span>:<\/p>\n W efekcie otrzymasz stron\u0119 wpis, np. \u201eJak za\u0142o\u017cy\u0107 bloga? Kompletny przewodnik instalacji WordPressa dla pocz\u0105tkuj\u0105cych\u201d.<\/p>\n Zatrzymaj si\u0119 chwil\u0119 na tym kroku i spr\u00f3buj doda\u0107 wi\u0119cej element\u00f3w do wpisu jak, np. lista tag\u00f3w<\/span> czy autor<\/span>.<\/p>\n<\/div>\n Je\u017celi masz styczno\u015b\u0107 z WordPressem, to prawdopodobnie znasz wtyczk\u0119 Advanced Custom Fields. Umo\u017cliwia ona dodawanie dodatkowych p\u00f3l do stron, wpis\u00f3w, kategorii, a nawet menu. W przypadku headless ta wtyczka r\u00f3wnie\u017c b\u0119dzie bardzo przydatna.<\/p>\n Niestety Advanced Custom Fields nie integruje si\u0119 z WordPress REST API. Mo\u017cesz to naprawi\u0107 korzystaj\u0105c z wtyczki ACF to REST API. Po zainstalowaniu wtyczki w WordPressie pola ACF powinny by\u0107 dost\u0119pne w Gridsome.<\/p>\n Dodatkowo, w celu optymalizacji, Gridsome zaleca dodanie filtra w WordPressie, kt\u00f3ry z endpoint\u00f3w AFC b\u0119dzie zwraca\u0142 tylko post_type<\/span> i id<\/span>.<\/p>\n Gridsome integruje si\u0119 z WordPress REST API, a nast\u0119pnie pozwala programi\u015bcie obs\u0142ugiwa\u0107 pozyskane dane przy u\u017cyciu GraphQL. GraphQL to j\u0119zyk zapyta\u0144, kt\u00f3ry pozwala w jednym zapytaniu zwr\u00f3ci\u0107 wszystkie potrzebne programi\u015bcie informacje, o czym zapewne przekona\u0142y Ci\u0119 kroki 3 i 4.<\/p>\n Je\u017celi masz ju\u017c do\u015bwiadczenie z WordPress REST API, to wiesz, \u017ce pozyskanie informacji o wpisie, jego kategorii, danych autora i miniaturce, mo\u017ce wymaga\u0107 kilku zapyta\u0144. W przypadku GraphQL wystarczy okre\u015bli\u0107, co chcesz uzyska\u0107 i jakie dane Ci\u0119 interesuj\u0105, \u017ceby nast\u0119pnie je otrzyma\u0107. Tak samo jak ma to miejsce z list\u0105 wpis\u00f3w z kroku 3.<\/p>\n<\/span>Do kogo kierowany jest ten poradnik?<\/span><\/h2>\n
\r\n\t![\"opieka](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2025\/01\/baner-opieka.png\")
\r\n<\/a>\r\n
\r\n
<\/div><\/span>Czego potrzebujesz?<\/span><\/h2>\n
\n
<\/span>Czego si\u0119 nauczysz?<\/span><\/h2>\n
<\/span>WordPress jako headless CMS<\/span><\/h2>\n
\n<\/span>Zalety headless CMS<\/span><\/h2>\n
<\/span>Wady headless CMS<\/span><\/h2>\n
\n<\/span>Wykorzystanie JAMstack<\/span><\/h2>\n
<\/span>Krok 0 \u2013 instalacja Gridsome CLI<\/span><\/h2>\n
$ npm install --global @gridsome\/cli<\/code><\/pre>\n$ gridsome --version<\/code><\/pre>\n@gridsome\/cli v0.3.4<\/code><\/pre>\n<\/span>Krok 1 \u2013 nowy projekt w Gridsome<\/span><\/h2>\n
$ gridsome create my-gridsome-site<\/code><\/pre>\n$ gridsome develop<\/code><\/pre>\n![\"gridsome](\"http:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/06\/001.png\" "\\"\\"")
<\/a><\/p>\nStruktura projektu<\/h3>\n
![\"gridsome](\"http:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/06\/002.png\" "\\"\\"")
<\/a><\/p>\n<\/span>Krok 2 \u2013 integracja z WordPressem<\/span><\/h2>\n
$ npm install @gridsome\/source-wordpress<\/code><\/pre>\nplugins: [\n {\n use: '@gridsome\/source-wordpress',\n options: {\n baseUrl: 'ADRES_URL',\n }\n }\n],<\/code><\/pre>\n\n<\/span>Krok 3 \u2013 dodawanie listy wpis\u00f3w na stronie g\u0142\u00f3wnej<\/span><\/h2>\n
<template>\n <div>\n <div v-for="edge in $page.posts.edges" :key="edge.node.id">\n <h2>{{ edge.node.title }}<\/h2>\n <div v-html="edge.node.excerpt"><\/div>\n <\/div>\n <\/div>\n<\/template>\n\n<page-query>\nquery {\n posts: allWordPressPost {\n edges {\n node {\n id\n title\n excerpt\n }\n }\n }\n}\n<\/page-query>\n<\/code><\/pre>\n![\"lista](\"http:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/06\/004.png\" "\\"\\"")
<\/a><\/p>\n\n<\/span>Krok 4 \u2013 dodawanie widoku pojedynczego wpisu<\/span><\/h2>\n
templates: {\n WordPressPost: '\/:slug'\n}<\/code><\/pre>\ntemplates: {\n WordPressPost: '\/:year\/:slug'\n}<\/code><\/pre>\n<page-query>\nquery {\n posts: allWordPressPost {\n edges {\n node {\n id\n title\n excerpt\n path\n }\n }\n }\n}\n<\/page-query><\/code><\/pre>\n<h2>\n <g-link :to="edge.node.path">{{ edge.node.title }}<\/g-link>\n<\/h2><\/code><\/pre>\n<template>\n <div>\n <h1>{{$page.post.title}}<\/h1>\n <div v-html="$page.post.content"><\/div>\n <\/div>\n<\/template>\n\n<page-query>\nquery ($id: ID!) {\n post: wordPressPost(id: $id) {\n title\n content\n }\n}\n<\/page-query><\/code><\/pre>\n![\"pobrany](\"http:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/06\/005.png\" "\\"\\"")
<\/a><\/p>\n\n<\/span>Krok 5 \u2013 integracja z Advanced Custom Fields<\/span><\/h2>\n
add_filter( 'acf\/format_value', function ( $value ) {\n if ( $value instanceof WP_Post ) {\n return [\n 'post_type' => $value->post_type,\n 'id' => $value->ID,\n ];\n }\n\n return $value;\n}, 100 );<\/code><\/pre>\n<\/span>Krok 6 \u2013 zapytania w GraphQL<\/span><\/h2>\n
![\"graphql\"](\"http:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/06\/006.png\" "\\"\\"")
<\/a><\/p>\n![\"folder](\"http:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/06\/007-300x244.png\" "\\"\\"")
<\/a><\/p>\n![\"Przemyslaw](\"http:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/06\/przemyslaw-spaczek.png\" "\\"\\"")
<\/div>\n