Použijte WordPress jako bezhlavé CMS

Feb 3, 2026

jak

Nejdřív jsem slyšel o bezhlavém přístupu CMS v mluvení, který jsem sledoval od dvoukolových měst Drupal. Líbilo se mi představu o oddělení obav mezi obsahem obsahu a prohlížení.

Nejlepší web hostingové služby v roce 2019

Už jsem zažil, jak snadno může jeden server jít dolů, vyjmout všechny stránky na něm, což vede k minutám nebo hodinám srdce-zastavení paniky (tam bylo 24). Také jsem viděl, jak by monolitická stránka založená na Monolithic CMS mohla trpět bezpečnostní kompromisy a trvat hodně úsilí o opravu (to mě trvalo více než dva dny neplacené práce). Pro řadu web hosting Možnosti poskytovatele, podívejte se na náš průvodce.

23 Skvělé příklady WordPress webových stránek

Viděl jsem výhody CDNS (Content Delivery Sítě), které mohou ukládat obraz, audio a video soubory na serverech optimalizovaných pro rychlé dodání a mohou duplikovat tyto soubory po celém světě pro rychlé doručení těchto regionů v případě potřeby. Co když celá webová stránka mohla těžit z tohoto přístupu?

Budete potřebovat…

● Počítač s připojením k Internetu (OBS)
● Editor kódu (Atom nebo VS kód)
● Příkazový řádek shell / terminál
● Nedávná verze nainstalované node.js (můžete stáhnout & amp; instalace tady )
● WordPress místo pro získání obsahu. Pokud nemáte, můžete použít platformu Wordpress.com nebo toto Heroku Build Pack .
● Zdrojové soubory z Github. .

Začínáme

Wordpress vychází z krabice s REST API a to je to, co budeme používat k dotazu vašich dat. Takže opravdu nepotřebujeme nic jiného! Naše zobrazovací stránka je zcela oddělena od našeho obsahu, takže nebudeme potřebovat Témata WordPress. nebo jiné přizpůsobení mimo několik (volitelných) pluginů. Ačkoliv je to samozřejmě můžete přidat, pokud chcete.

Výjimkou je, pokud potřebujete vlastní meta pole pro další obsahové oblasti. Pravděpodobně používáte pokročilá vlastní pole; Můžete přidat data do aplikace WordPress API Instalace tohoto pluginu .

Použijte statický generátor webu

Use WordPress as a headless CMS: Gatsby starter screen — Obrazovka Gatsbyho startéra

Nyní, když máme náš obsah obsahu, pojďme načíst data a zobrazit jej pomocí statického generátoru webu. Moje zbraň volby v této oblasti je Gatsby. , Vynikající statický generátor webu, který je postaven s JavaScriptem. (Viz to Webové stránky Builder. Vybírá jednoduché způsoby, jak vybudovat místo.)

Pokud hledáte dobrý způsob, jak budovat na své JavaScript dovednosti a naučit se reagovat tím, že se uvízne do nějakého kódu, velmi doporučuji vyzkoušet Gatsby, aby tak učinil. Naučil jsem se s tím hodně hrát.

Za prvé, pojďme nainstalovat nástroj příkazového řádku, který nám umožňuje vytvořit Gatsby Sites:

npm install -global gatsby-cli

Nyní přejděte do složky, kam chcete mít vaše stránky a spustit tento příkaz:

gatsby new blog

To vytvoří novou složku nazvanou "blog" a nainstalovat gatsby a jeho závislosti do této složky. Otevřete tuto složku ve svém oblíbeném textovém editoru. Může se zdát, že tam je spousta souborů. Neboj se, budeme přímo editovat Gatsby-config.js. , gatsby-node.js. a SRC. Složka, která je tam, kde naše šablony žijí.

Pokud máte spoustu souborů do obchodu, stojí za to upgrade cloudové úložiště .

Dostat náš obsah

Prvním krokem, který chceme vzít, je načíst náš obsah z API WordPress webu.

Uděláme to, budeme instalovat Gatsby-Source-WordPress , Prewritten plugin pro WordPress. To ilustruje jeden z hlavních důvodů, proč miluji Gatsby - můžete získat data z různých zdrojů. Spousta statických generátorů webu je omezeno na používání zástupných souborů, ale Gatsby je velmi flexibilní.

Gatsby's Plugin Ecosystem je velmi zralý. Existují spoustu prewritten způsoby, jak získat data a spoustu dalších chytrých funkcí, které přichází také.

Chcete-li nainstalovat plugin, nejprve změnit adresář do nového webu Gatsby pomocí tohoto příkazu: CD Blog. .

Nyní spusťte tento příkaz: NPM Install --Save GatsbySource-WordPres s.

Jakmile je to hotovo, je čas otevřít soubor Gatsby-config.js. Uvidíte, že již existuje některé základní nastavení na místě, které nám Gatsby ve výchozím nastavení dává. Budeme stavět na tom, abychom nakonfigurovali náš plugin zde:

 modul.exports = {
 Sitemetadata: {
  Název: 'Gatsby Výchozí startér',
 },
 Pluginy: [
  'gatsby-plugin-reag-helma',
  {
   Řešení: "Gatsby-Source-WordPress",
   Možnosti: {
    Baseurl: "my-wordpress-site.com",
    Protokol: "https",
    Hostingwpcom: False,
    USAACF: TRUE,
    SearchandRePlacEckontentLS: {
     SourceUrl: "https://my-wordpress-site.com",
     náhrada: "https://my-static-site.com",
    }
   },
  },
 Zaujatý
}

Fungovalo to?

Můžete zkontrolovat otevřením terminálu, psaní Gatsby se rozvíjí a sledujte, co se stane. Být varován! I když máte správné nastavení, budete mít nějaké varování stejně - to může být Gatsby Hledám obsah, který jste ještě neposlali.

V prohlížeči se nyní můžete zobrazit výchozí nastavení Gatsby-Starter.


    http: // localhost: 8000 /

Zobrazit grafiql, v prohlížeči IDE, k prozkoumání dat a schématu vašich stránek.

http: // localhost: 8000 / ___ graphql

Všimněte si, že výstavba není optimalizována. Chcete-li vytvořit výrobní stavbu, použijte Gatsby Build.

Je-li Gatsby Defity Starer (vpravo) není to, co dostáváte, zkontrolujte stránky WordPress není na subdoménu, že je to určitě pomocí https nebo http a že máte stejné v nastavení.

Teď můžeme jít na http: // localhost: 8000 / a uvidíte naše gatsby místo!

Můžeme dotazovat naše data?

Možná jste si všimli, že zde není obsah aplikace WordPress. Je to proto, že jsme neřekli Gatsby, co s tím ještě dělat. Než to uděláme, pojďme zkontrolovat, že jsme vlastně dostali náš obsah Gatsby. Chcete-li to udělat, navštivte tuto adresu URL:

http: // localhost: 8000 / ___ graphql

Tento vestavěný nástroj se nazývá Graphiql a je další tajnou silou Gatsby.

GraphQL je podobný odpočinku: Je to způsob, jak dotazovat data. Ale s GraphQL, můžete s vašimi daty interagovat mnohem snadněji. GraphiQL (vizuální IDE pro GraphQL) nám může ukázat některé z těchto triků. Na levém panelu zkuste zadat následující:

 {
 AllwordpressPost {
  hrany {
   uzel {
    ID
    slimák
    postavení
    šablona
    formát
   }
  }
 }
}

To by mohlo vypadat trochu jako JSON, ale není to. Je to nový jazyk dotazu, který si myslím, že jeden den bude do značné míry nahradit odpočinek jako způsob komunikace s API.

Co jste dostal při stisknutí klávesy Ctrl + Enter v Graphiql? Doufejme, že vaše WordPress sloupky a stránku na pravé straně obrazovky.

Ve skutečnosti použijeme tento dotaz v našem dalším kroku, takže je to užitečné! Možná budete chtít vidět, jaké další data se můžete dostat s grafiql, když jste zde. Pokud to chcete udělat, zkuste posunout kurzor kolem a psát buď Ctrl + prostor a / nebo Ctrl + Enter. Které odhalí jiné skupiny obsahu.

Takže teď máme obsah v Gatsby. Dále je musíme zobrazit.

Zobrazit naše příspěvky

Use WordPress as a headless CMS: Gatsby development 404 screen — Gatsby Development 404 Stránka zobrazující všechny naše služby WordPress

Pro tento další krok budeme používat gatsby-node.js. soubor.

gatsby-node.js. Je soubor, který můžete použít k interakci s Gatsby je "uzel API". Zde můžete ovládat, jak jsou vaše stránky generovány a vytvářet stránky, příspěvky a další.

Budeme psát nějaké pokyny, abychom to řekli Gatsby, co dělat s našimi daty:

 CONST cesta = požadovat (`cesta");

Export.CreatePages = ({GraphQL, BoundActionCreators})
= & gt; {
 CONST {createepage} = hraniční grafiky
 vrátit nový slib ((vyřešit, odmítnout) = & gt; {
  GraphQL (
   `
   {
    AllwordpressPost {
     hrany {
      uzel {
       ID
       slimák
       postavení
       šablona
       formát
      }
     }
    }
   }
  `
 ) .then (výsledek = & gt; {
   Pokud (výsledek.errors) {
    console.log (výsledek.errors)
    Odmítnout (výsledky.
   }

   CONST posttemplate = path.resolve (`./src/templates/
post.js`)

   výsledek.data.allwordpressPost.edges.foreach (hrana = & gt; {
    vytvořit stránku({
     Cesta: `/ $ {EDGE.NODE.SLUG} /`,
     Komponenta: Posttemplate,
     kontext: {
      ID: EDGE.NODE.ID,
     },
    })
   })
   odhodlání()
  })
 })
}

Tento kód vytváří stránky z našeho dotazu GraphQL a pro každou stránku, kterou použijí šablonu, kterou jsme definovali ( /SRC/templates/post.js. ). Takže další, musíme tento soubor vytvořit!

Vytvořit poštovní šablonu

Uvnitř / SRC / Složka vytvořte složku nazvanou šablony a soubor uvnitř, který se nazývá post.JS. . Přidat k němu tento kód:

 Dovoz reaguje z "reakce"
Dovozní helma z "reagovat-helmu"

třída posttemplate prodlouží reagovat.component {
 poskytnout() {
  const post = this.props.data.wordpressPost;
  const slug = white.props.data.wordpressPost.slug;

  vrátit se (
   & lt, div a gt;
   & lt; helma titul = {`$ {titlestring} | $ {siteTitle} `} / & gt;
   & lt, h1 hazardlysetinnerhtml = {{__html: post.title}}} / gt;
   & lt, div hazardsetinnerhtml = {{__html: post.Content}} / gt;
   & lt; / div & gt;
  )
 }
}

Export výchozí pagetemplate

Export Const Query = GraphQL`
 Query CuresPost ($ ID: řetězec!) {
  wordpressPost (ID: {eq: $ id}) {
   titul
   obsah
   slimák
  }
  stránky {
   Sitemetadata {
    titul
   }
  }
}

To používá jiný dotaz GraphQL pro získání dat o konkrétním příspěvku, který byl krmen gatsbynode.js. Soubor, pak používá reagovat tak, aby vykreslen do prohlížeče.

Pokud chcete rychle zobrazit seznam všech vašich příspěvků, můžete zadat http: // localhost: 8000 / a do adresního řádku prohlížeče. To vás zavede do vývoje 404 stránky, která uvádí všechny vaše příspěvky. Klikněte na jeden k návštěvě!

Další kroky

Poškrábali jsme povrch, jak používat Wordpress jako bezhlavé CMS a doufám, že jsem vám představil některé zajímavé koncepty a nástroje, které byste mohli být schopni používat a experimentovat s v budoucnu.

Tam je mnohem více pro tento příběh a moji kolegy a já jsem o něm blogoval Indigo tree. . Také jsem napsal více na svém osobním blogu, Lahodný reverie .

Prosím, držte se se mnou prostřednictvím těchto kanálů a na Twitteru slyšet další vzrušující vývoj ve světě bezhlavých CMS!

Tento článek byl původně zveřejněn v čísle 308 síť Časopis nejprodávanějšího světa pro webové designéry a vývojáře. Koupit problém 308 zde nebo Přihlásit se zde .

Související články:

40 brilantní wordpress tutoriály
6 Top tipy pro úspěch CRO v WordPress
10 Velké Wordpress Plugins pro návrháře

Použijte WordPress jako bezhlavé CMS

Začínáme

Použijte statický generátor webu

Dostat náš obsah

Fungovalo to?

Můžeme dotazovat naše data?

Zobrazit naše příspěvky

Vytvořit poštovní šablonu

Další kroky

jak - Nejoblíbenější články

Začínáme s webvrem

Jak vytvořit ikonu aplikace v aplikaci Illustrator

Jak vytvořit stylizované hry hry

Sestavte si vlastní hru WebGL Fyzika

Vypnutí nabídek pomocí animace s CSS

branding klady sdílejí, jak oni oni oni wild značky hlas

Barva chlupatý pet portrét

Jak navrhnout uživatelsky přívětivé mobilní rozhraní

Kategorie