{"id":14956,"date":"2025-03-17T09:54:59","date_gmt":"2025-03-17T08:54:59","guid":{"rendered":"https:\/\/dhosting.pl\/pomoc\/?post_type=manual_kb&#038;p=14956"},"modified":"2025-03-17T09:54:59","modified_gmt":"2025-03-17T08:54:59","slug":"wordpress-jako-headless-cms","status":"publish","type":"manual_kb","link":"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/wordpress-jako-headless-cms\/","title":{"rendered":"WordPress jako Headless CMS"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 ez-toc-wrap-left counter-flat ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Spis tre\u015bci<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/wordpress-jako-headless-cms\/#Czym_jest_Headless_WordPress\" >Czym jest Headless WordPress?<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/wordpress-jako-headless-cms\/#Dlaczego_warto_uzywac_WordPressa_jako_Headless_CMS\" >Dlaczego warto u\u017cywa\u0107 WordPressa jako Headless CMS?<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/wordpress-jako-headless-cms\/#Jak_dziala_WordPress_jako_Headless_CMS\" >Jak dzia\u0142a WordPress jako Headless CMS?<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/wordpress-jako-headless-cms\/#Jak_wdrozyc_WordPress_jako_Headless_CMS\" >Jak wdro\u017cy\u0107 WordPress jako Headless CMS?<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/wordpress-jako-headless-cms\/#Alternatywne_podejscia\" >Alternatywne podej\u015bcia<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/wordpress-jako-headless-cms\/#Najczestsze_wyzwania_i_ich_rozwiazania\" >Najcz\u0119stsze wyzwania i ich rozwi\u0105zania<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/wordpress-jako-headless-cms\/#Podsumowanie\" >Podsumowanie<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Czym_jest_Headless_WordPress\"><\/span>Czym jest Headless WordPress?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p data-start=\"97\" data-end=\"423\">Headless WordPress to koncepcja, w kt\u00f3rej WordPress dzia\u0142a jedynie jako backend do zarz\u0105dzania tre\u015bci\u0105 (CMS), a frontend jest tworzony za pomoc\u0105 zewn\u0119trznych technologii, takich jak React, Next.js, Vue.js czy Angular. Dzi\u0119ki temu mo\u017cna uzyska\u0107 wi\u0119ksz\u0105 elastyczno\u015b\u0107 w projektowaniu interfejsu u\u017cytkownika oraz lepsz\u0105 wydajno\u015b\u0107.<\/p>\n\n<table id=\"tablepress-12\" class=\"tablepress tablepress-id-12\">\n<thead>\n<tr class=\"row-1\">\n\t<th class=\"column-1\">Cecha<\/th><th class=\"column-2\">Tradycyjny WordPress<\/th><th class=\"column-3\">Headless WordPress<\/th>\n<\/tr>\n<\/thead>\n<tbody class=\"row-striping row-hover\">\n<tr class=\"row-2\">\n\t<td class=\"column-1\">Frontend<\/td><td class=\"column-2\">Motyw WP (PHP, HTML, CSS)<\/td><td class=\"column-3\">Dowolna technologia frontendowa<\/td>\n<\/tr>\n<tr class=\"row-3\">\n\t<td class=\"column-1\">Backend<\/td><td class=\"column-2\">WordPress (PHP, MySQL)<\/td><td class=\"column-3\">WordPress jako API<\/td>\n<\/tr>\n<tr class=\"row-4\">\n\t<td class=\"column-1\">API<\/td><td class=\"column-2\">Ograniczone wsparcie<\/td><td class=\"column-3\">REST API \/ GraphQL<\/td>\n<\/tr>\n<tr class=\"row-5\">\n\t<td class=\"column-1\">Elastyczno\u015b\u0107<\/td><td class=\"column-2\">Ograniczona<\/td><td class=\"column-3\">Pe\u0142na kontrola nad interfejsem<\/td>\n<\/tr>\n<tr class=\"row-6\">\n\t<td class=\"column-1\">Wydajno\u015b\u0107<\/td><td class=\"column-2\">\u015arednia (PHP + MySQL)<\/td><td class=\"column-3\">Wy\u017csza (statyczne pliki, SPA)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<!-- #tablepress-12 from cache -->\n<div id=\"dhost-2859624458\" class=\"dhost-inpost dhost-entity-placement\"><a href=\"https:\/\/dhosting.pl\/opieka-stron.html?utm_source=pomoc&utm_medium=artykul&utm_campaign=pomoc\" target=\"_blank\">\r\n\t<img decoding=\"async\" src=\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2025\/01\/baner-opieka.png\" alt=\"opieka stron www\">\r\n<\/a>\r\n<br \/>\r\n<br \/><\/div><h2 data-start=\"926\" data-end=\"984\"><span class=\"ez-toc-section\" id=\"Dlaczego_warto_uzywac_WordPressa_jako_Headless_CMS\"><\/span><strong data-start=\"929\" data-end=\"984\">Dlaczego warto u\u017cywa\u0107 WordPressa jako Headless CMS?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol data-start=\"985\" data-end=\"1505\">\n<li data-start=\"985\" data-end=\"1092\"><strong data-start=\"988\" data-end=\"1008\">Lepsza wydajno\u015b\u0107<\/strong> \u2013 Frontend mo\u017ce dzia\u0142a\u0107 jako aplikacja statyczna lub SPA (Single Page Application).<\/li>\n<li data-start=\"1093\" data-end=\"1190\"><strong data-start=\"1096\" data-end=\"1120\">Wi\u0119ksza elastyczno\u015b\u0107<\/strong> \u2013 Mo\u017cliwo\u015b\u0107 u\u017cycia nowoczesnych framework\u00f3w (React, Next.js, Vue.js).<\/li>\n<li data-start=\"1191\" data-end=\"1280\"><strong data-start=\"1194\" data-end=\"1219\">Lepsze bezpiecze\u0144stwo<\/strong> \u2013 Oddzielenie backendu od frontendu zmniejsza ryzyko atak\u00f3w.<\/li>\n<li data-start=\"1281\" data-end=\"1394\"><strong data-start=\"1284\" data-end=\"1307\">Multi-platformowo\u015b\u0107<\/strong> \u2013 Mo\u017cesz dostarcza\u0107 tre\u015bci na r\u00f3\u017cne urz\u0105dzenia i aplikacje (strony www, mobilne, IoT).<\/li>\n<li data-start=\"1395\" data-end=\"1505\"><strong data-start=\"1398\" data-end=\"1419\">Optymalizacja SEO<\/strong> \u2013 Mo\u017cliwo\u015b\u0107 generowania stron statycznych zwi\u0119ksza szybko\u015b\u0107 \u0142adowania i poprawia SEO.<\/li>\n<\/ol>\n<h2 data-start=\"1512\" data-end=\"1558\"><span class=\"ez-toc-section\" id=\"Jak_dziala_WordPress_jako_Headless_CMS\"><\/span><strong data-start=\"1515\" data-end=\"1558\">Jak dzia\u0142a WordPress jako Headless CMS?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p data-start=\"1559\" data-end=\"1665\">Headless WordPress udost\u0119pnia tre\u015bci za pomoc\u0105 API, kt\u00f3re frontend mo\u017ce pobiera\u0107 i renderowa\u0107 dynamicznie.<\/p>\n<h3 data-start=\"1667\" data-end=\"1720\"><strong data-start=\"1671\" data-end=\"1720\">Metody dost\u0119pu do danych w Headless WordPress<\/strong><\/h3>\n<ol data-start=\"1721\" data-end=\"2768\">\n<li data-start=\"1721\" data-end=\"2191\">\n<p data-start=\"1724\" data-end=\"1759\"><strong data-start=\"1724\" data-end=\"1757\">REST API (WordPress REST API)<\/strong><\/p>\n<ul data-start=\"1763\" data-end=\"2191\">\n<li data-start=\"1763\" data-end=\"1813\">Domy\u015blnie dost\u0119pne w WordPressie od wersji 4.7<\/li>\n<li data-start=\"1817\" data-end=\"1880\">Endpointy pozwalaj\u0105 pobiera\u0107 posty, strony, u\u017cytkownik\u00f3w itp.<\/li>\n<li data-start=\"1884\" data-end=\"1979\">Przyk\u0142adowe zapytanie:\n<pre><code class=\"language-php\" data-line=\"\">GET https:\/\/example.com\/wp-json\/wp\/v2\/posts<\/code><\/pre>\n<\/li>\n<li data-start=\"1884\" data-end=\"1979\">Odpowied\u017a w formacie JSON:\n<pre><code class=\"language-php\" data-line=\"\">[\n  {\n    &quot;id&quot;: 1,\n    &quot;title&quot;: { &quot;rendered&quot;: &quot;M\u00f3j pierwszy post&quot; },\n    &quot;content&quot;: { &quot;rendered&quot;: &quot;Tre\u015b\u0107 posta...&quot; }\n  }\n]<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>2. <strong data-start=\"2196\" data-end=\"2219\">GraphQL (WPGraphQL)<\/strong><\/p>\n<ul data-start=\"2223\" data-end=\"2768\">\n<li data-start=\"2223\" data-end=\"2297\">Alternatywa dla REST API, umo\u017cliwia pobieranie tylko potrzebnych danych.<\/li>\n<li data-start=\"2301\" data-end=\"2343\">Wymaga instalacji wtyczki <strong data-start=\"2329\" data-end=\"2342\">WPGraphQL<\/strong>.<\/li>\n<li data-start=\"2347\" data-end=\"2506\">Przyk\u0142adowe zapytanie GraphQL:\n<pre><code class=\"language-php\" data-line=\"\">{\n  posts {\n    nodes {\n      title\n      content\n    }\n  }\n}<\/code><\/pre>\n<\/li>\n<li data-start=\"2347\" data-end=\"2506\">Odpowied\u017a:\n<pre><code class=\"language-php\" data-line=\"\">{\n  &quot;data&quot;: {\n    &quot;posts&quot;: {\n      &quot;nodes&quot;: [\n        {\n          &quot;title&quot;: &quot;M\u00f3j pierwszy post&quot;,\n          &quot;content&quot;: &quot;Tre\u015b\u0107 posta...&quot;\n        }\n      ]\n    }\n  }\n}<\/code><\/pre>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h2 data-start=\"2775\" data-end=\"2822\"><span class=\"ez-toc-section\" id=\"Jak_wdrozyc_WordPress_jako_Headless_CMS\"><\/span><strong data-start=\"2778\" data-end=\"2822\">Jak wdro\u017cy\u0107 WordPress jako Headless CMS?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 data-start=\"2823\" data-end=\"2855\"><strong data-start=\"2827\" data-end=\"2855\">1. Instalacja WordPressa<\/strong><\/h3>\n<p data-start=\"2856\" data-end=\"2955\">Zainstaluj WordPressa na serwerze, np. w dHosting lub lokalnie za pomoc\u0105 LocalWP, XAMPP lub Docker.<\/p>\n<h3 data-start=\"2957\" data-end=\"2981\"><strong data-start=\"2961\" data-end=\"2981\">2. Aktywacja API<\/strong><\/h3>\n<ul data-start=\"2982\" data-end=\"3079\">\n<li data-start=\"2982\" data-end=\"3031\">REST API jest dost\u0119pne domy\u015blnie w WordPressie.<\/li>\n<li data-start=\"3032\" data-end=\"3079\">Dla GraphQL zainstaluj wtyczk\u0119 <strong data-start=\"3065\" data-end=\"3078\">WPGraphQL<\/strong>.<\/li>\n<\/ul>\n<h3 data-start=\"3081\" data-end=\"3111\"><strong data-start=\"3085\" data-end=\"3111\">3. Tworzenie frontendu<\/strong><\/h3>\n<p data-start=\"3112\" data-end=\"3227\">Mo\u017cesz u\u017cy\u0107 nowoczesnych framework\u00f3w frontendowych, np. React, Next.js, Vue.js.<br data-start=\"3191\" data-end=\"3194\" \/>Przyk\u0142ad wdro\u017cenia w <strong data-start=\"3215\" data-end=\"3226\">Next.js<\/strong>.<\/p>\n<p data-start=\"3112\" data-end=\"3227\">Instalacja Next.js<\/p>\n<pre><code class=\"language-php\" data-line=\"\">npx create-next-app my-headless-wp\ncd my-headless-wp\nnpm install<\/code><\/pre>\n<p data-start=\"3112\" data-end=\"3227\">Pobieranie post\u00f3w z WordPress REST API<\/p>\n<pre><code class=\"language-php\" data-line=\"\">\/\/ pages\/index.js\nexport async function getStaticProps() {\n  const res = await fetch(&quot;https:\/\/example.com\/wp-json\/wp\/v2\/posts&quot;);\n  const posts = await res.json();\n  \n  return {\n    props: { posts },\n  };\n}\n\nexport default function Home({ posts }) {\n  return (\n    &lt;div&gt;\n      &lt;h1&gt;Headless WordPress&lt;\/h1&gt;\n      {posts.map((post) =&gt; (\n        &lt;div key={post.id}&gt;\n          &lt;h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} \/&gt;\n          &lt;p dangerouslySetInnerHTML={{ __html: post.content.rendered }} \/&gt;\n        &lt;\/div&gt;\n      ))}\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n<p data-start=\"3112\" data-end=\"3227\">Uruchomienie aplikacji<\/p>\n<pre><code class=\"language-php\" data-line=\"\">npm run dev<\/code><\/pre>\n<h2 data-start=\"4078\" data-end=\"4107\"><span class=\"ez-toc-section\" id=\"Alternatywne_podejscia\"><\/span><strong data-start=\"4081\" data-end=\"4107\">Alternatywne podej\u015bcia<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 data-start=\"4108\" data-end=\"4158\"><strong data-start=\"4112\" data-end=\"4158\">1. JAMstack i statyczne generowanie tre\u015bci<\/strong><\/h3>\n<ul data-start=\"4159\" data-end=\"4382\">\n<li data-start=\"4159\" data-end=\"4257\"><strong data-start=\"4161\" data-end=\"4183\">Gatsby + WordPress<\/strong> \u2013 Gatsby mo\u017ce generowa\u0107 statyczne strony na podstawie danych z WPGraphQL.<\/li>\n<li data-start=\"4258\" data-end=\"4382\"><strong data-start=\"4260\" data-end=\"4311\">Next.js + ISR (Incremental Static Regeneration)<\/strong> \u2013 Dynamiczne od\u015bwie\u017canie tre\u015bci przy zachowaniu statycznej wydajno\u015bci.<\/li>\n<\/ul>\n<h3 data-start=\"4384\" data-end=\"4440\"><strong data-start=\"4388\" data-end=\"4440\">2. Po\u0142\u0105czenie WordPressa z aplikacjami mobilnymi<\/strong><\/h3>\n<ul data-start=\"4441\" data-end=\"4524\">\n<li data-start=\"4441\" data-end=\"4524\">Mo\u017cna wykorzysta\u0107 API do pobierania tre\u015bci do aplikacji React Native lub Flutter.<\/li>\n<\/ul>\n<h3 data-start=\"4526\" data-end=\"4570\"><strong data-start=\"4530\" data-end=\"4570\">3. Integracja WordPressa z eCommerce<\/strong><\/h3>\n<ul data-start=\"4571\" data-end=\"4668\">\n<li data-start=\"4571\" data-end=\"4668\">Headless WooCommerce umo\u017cliwia budow\u0119 niestandardowego sklepu z wykorzystaniem API WooCommerce.<\/li>\n<\/ul>\n<h2 data-start=\"4675\" data-end=\"4720\"><span class=\"ez-toc-section\" id=\"Najczestsze_wyzwania_i_ich_rozwiazania\"><\/span><strong data-start=\"4678\" data-end=\"4720\">Najcz\u0119stsze wyzwania i ich rozwi\u0105zania<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 data-start=\"4721\" data-end=\"4756\"><strong data-start=\"4725\" data-end=\"4756\">1. SEO w Headless WordPress<\/strong><\/h3>\n<ul data-start=\"4757\" data-end=\"4974\">\n<li data-start=\"4757\" data-end=\"4882\">Tradycyjny WordPress generuje strony HTML, ale SPA (Single Page Applications) mog\u0105 mie\u0107 problemy z indeksacj\u0105 przez Google.<\/li>\n<li data-start=\"4883\" data-end=\"4974\">Rozwi\u0105zanie: <strong data-start=\"4898\" data-end=\"4929\">Next.js z pre-renderowaniem<\/strong> (Static Generation \/ Server-side Rendering).<\/li>\n<\/ul>\n<h3 data-start=\"4976\" data-end=\"5001\"><strong data-start=\"4980\" data-end=\"5001\">2. Obs\u0142uga medi\u00f3w<\/strong><\/h3>\n<ul data-start=\"5002\" data-end=\"5141\">\n<li data-start=\"5002\" data-end=\"5075\">WordPress zarz\u0105dza mediami, ale frontend musi pobiera\u0107 ich URL-e z API.<\/li>\n<li data-start=\"5076\" data-end=\"5141\">Mo\u017cna u\u017cywa\u0107 <strong data-start=\"5091\" data-end=\"5115\">Cloudinary lub Imgix<\/strong> do optymalizacji obraz\u00f3w.<\/li>\n<\/ul>\n<h3 data-start=\"5143\" data-end=\"5172\"><strong data-start=\"5147\" data-end=\"5172\">3. Bezpiecze\u0144stwo API<\/strong><\/h3>\n<ul data-start=\"5173\" data-end=\"5273\">\n<li data-start=\"5173\" data-end=\"5236\">Ogranicz dost\u0119p do API przez nag\u0142\u00f3wki CORS i autoryzacj\u0119 JWT.<\/li>\n<li data-start=\"5237\" data-end=\"5273\">Ukryj wra\u017cliwe endpointy REST API.<\/li>\n<\/ul>\n<h2 data-start=\"5280\" data-end=\"5299\"><span class=\"ez-toc-section\" id=\"Podsumowanie\"><\/span><strong data-start=\"5283\" data-end=\"5299\">Podsumowanie<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p data-start=\"5300\" data-end=\"5578\">WordPress jako Headless CMS to elastyczne rozwi\u0105zanie, pozwalaj\u0105ce na budow\u0119 nowoczesnych, szybkich i skalowalnych aplikacji. Dzi\u0119ki API mo\u017cna \u0142atwo integrowa\u0107 go z Reactem, Next.js, Vue.js czy Gatsby, co daje pe\u0142n\u0105 kontrol\u0119 nad frontendem i znacz\u0105co poprawia wydajno\u015b\u0107 oraz UX.<\/p>\n","protected":false},"author":6,"featured_media":10957,"parent":0,"menu_order":0,"template":"","format":"standard","manualknowledgebasecat":[96,95],"manual_kb_tag":[2038,140,4045,5072,5066,655,5073,5069,4903,3517,5070,5074,5075,5071,5076,5067,5068],"class_list":["post-14956","manual_kb","type-manual_kb","status-publish","format-standard","has-post-thumbnail","hentry","manualknowledgebasecat-aplikacje-internetowe-cms","manualknowledgebasecat-hosting","manual_kb_tag-api","manual_kb_tag-cms","manual_kb_tag-ecommerce","manual_kb_tag-gatsby","manual_kb_tag-headless-wordpress","manual_kb_tag-hosting","manual_kb_tag-jamstack","manual_kb_tag-next-js","manual_kb_tag-optymalizacja-seo","manual_kb_tag-polski-hosting","manual_kb_tag-react","manual_kb_tag-spa","manual_kb_tag-statyczne-strony","manual_kb_tag-vue-js","manual_kb_tag-wordpress-jako-backend","manual_kb_tag-wordpress-rest-api","manual_kb_tag-wpgraphql"],"_links":{"self":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb\/14956","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb"}],"about":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/types\/manual_kb"}],"author":[{"embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":3,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb\/14956\/revisions"}],"predecessor-version":[{"id":14962,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb\/14956\/revisions\/14962"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/media\/10957"}],"wp:attachment":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/media?parent=14956"}],"wp:term":[{"taxonomy":"manualknowledgebasecat","embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manualknowledgebasecat?post=14956"},{"taxonomy":"manual_kb_tag","embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb_tag?post=14956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}