Använd WordPress som en huvudlös CMS

Feb 9, 2026

Hur

Jag hörde först om den huvudlösa CMS-tillvägagångssättet i ett samtal som jag tittade från Twin Cities Drupal. Jag gillade tanken på en separation av oro mellan författande innehåll och tittade på det.

De bästa webbhotellstjänsterna 2019

Jag hade redan upplevt hur lätt en server kan gå ner, ta ut alla webbplatser på den, vilket leder till minuter eller timmar av hjärtstopp panik (det fanns 24 på mig). Jag hade också sett hur en monolitisk CMS-baserad webbplats kunde drabbas av en säkerhetskompromiss och ta mycket ansträngning för att reparera (det tog mig mer än två dagar obetald arbete). För en rad webbhotell Leverantörsalternativ, kolla in vår guide.

23 Bra exempel på WordPress-webbplatser

Jag hade sett fördelarna med CDNS (Content Delivery Networks) som kan lagra din bild, ljud och videofiler på servrar optimerade för snabb leverans och kan duplicera dessa filer över hela världen för snabb leverans till dessa regioner om det behövs. Vad händer om hela din webbplats kan dra nytta av detta tillvägagångssätt?

Du kommer behöva…

● En dator med en Internetanslutning (obs)
● En kodredigerare (Atom eller VS-kod)
● En kommandoradsskal / terminal
● En ny version av Node.js installerade (du kan ladda ner & amp; installera här )
● En WordPress-webbplats för att få innehåll från. Om du inte har en, kan du använda Wordpress.com-plattformen eller det här Heroku Build Pack .
● Källfilerna från github .

Komma igång

WordPress kommer ut ur lådan med resten API och det är vad vi ska använda för att fråga dina data. Så vi behöver inte riktigt något annat! Vår visningsplats är helt separat från vår innehållsplats, så vi behöver inte WordPress-teman eller någon annan anpassning utanför några (tillval) plugins. Även om du självklart kan lägga till dessa om du vill.

Undantaget är om du behöver anpassade metafält för extra innehållsområden. Du använder förmodligen avancerade anpassade fält för att göra det; Du kan lägga till den data till WordPress API av Installera detta plugin .

Använd en statisk webbplatsgenerator

Use WordPress as a headless CMS: Gatsby starter screen — Gatsby standard startskärm

Nu när vi har vår innehållskälla, låt oss hämta data och visa den med en statisk webbplatsgenerator. Mitt vapen av val i denna rike är Gatsby , En utmärkt statisk webbplatsgenerator som är byggd med JavaScript. (Se dessa Website Builder Välj för enkla sätt att bygga en webbplats.)

Om du letar efter ett bra sätt att bygga på din JavaScript-färdigheter och lära sig reagera genom att fastna i någon kod, rekommenderar jag starkt att du försöker att Gatsby gör det. Jag har lärt mig mycket själv genom att leka med det.

Först, låt oss installera ett kommandoradsverktyg som gör det möjligt för oss att skapa gatsby-webbplatser:

npm install -global gatsby-cli

Navigera nu till mappen där du vill behålla din webbplats och kör det här kommandot:

gatsby new blog

Detta kommer att skapa en ny mapp som heter "Blog" och installera Gatsby och dess beroenden i den här mappen. Öppna den här mappen i din favorit textredigerare. Det kan tyckas vara många filer där. Oroa dig inte, vi ska bara redigera gatsby-config.js , gatsby-node.js filer och src Mapp, som är där våra mallar bor.

Om du har många filer att lagra, är det värt att uppgradera din molnlagring .

Få vårt innehåll

Det första steget vi vill ta är att hämta vårt innehåll från WordPress-webbplatsens API.

För att göra det kommer vi att installera gatsby-source-wordpress , ett prewrititt plugin för WordPress. Detta illustrerar en av de främsta anledningarna till att jag älskar Gatsby - du kan få dina data från en mängd olika källor. Många statiska generatorer är begränsade till att använda markdown-filer, men Gatsby är mycket flexibel.

Gatsbys plugin ekosystem är mycket mogen. Det finns massor av prewritten sätt att få dina data och massor av annan smart funktionalitet som också kommer till nytta.

För att installera plugin, ändra den första katalogen till din nya Gatsby-webbplats med hjälp av det här kommandot: CD-blogg .

Kör nu det här kommandot: npm installera --save gatsbysource-wordpres s.

När det är klart är det dags att öppna upp Gatsby-config.js-filen. Du får se att det redan finns någon grundläggande installation på plats som Gatsby ger oss som standard. Vi ska bygga på det för att konfigurera vårt plugin här:

 modul.exports = {
 Sitemetadata: {
  Titel: "Gatsby standardstart",
 },
 plugins: [
  "Gatsby-plugin-reagering-hjälm",
  {
   Lös: "Gatsby-Source-WordPress",
   alternativ: {
    baseurl: "my-wordpress-site.com",
    Protokoll: "https",
    Hostingwpcom: False,
    USEACF: sant,
    Sökföretagtacecontenturls: {
     Sourceurl: "https://my-wordpress-site.com",
     ersättare: "https://my-static-site.com",
    }
   },
  },
 ]
}

Fungerade det?

Du kan kontrollera genom att öppna din terminal, skriva Gatsby utvecklas och titta på vad som händer. Varnas! Även om du har dina inställningar rätt, får du några varningar ändå - det kan vara Gatsby leta efter innehåll som du inte har skrivit än.

Du kan nu se Gatsby-Starter-standard i webbläsaren.

  http: // localhost: 8000 /

Visa Graphiql, en webbläsare IDE, för att utforska din webbplatss data och schema.

  http: // localhost: 8000 / ___ graphql

Observera att utvecklingsbyggnaden inte är optimerad. För att skapa en produktionsbyggnad, använd Gatsby Build.

Om Gatsby Standard Starer (höger) är inte vad du får, kolla din WordPress-webbplats är inte på en underdomän, att det definitivt använder HTTPS eller HTTP och att du har samma i dina inställningar.

Nu kan vi gå till http: // localhost: 8000 / och se vår Gatsby-webbplats!

Kan vi fråga våra data?

Du kanske har märkt att det inte finns något WordPress-innehåll här. Detta beror på att vi inte har sagt Gatsby vad man ska göra med det än. Innan vi gör det, låt oss bara kolla vi har faktiskt fått vårt innehåll tillgängligt för Gatsby. För att göra det, besök den här webbadressen:

  http: // localhost: 8000 / ___ graphql

Detta inbyggda verktyg heter Graphiql och är en annan hemlig kraft i Gatsby.

GraphQL liknar vila: det är ett sätt att fråga data. Men med GraphQL kan du interagera med dina data mycket lättare. Graphiql (en visuell IDE för GraphQL) kan visa oss några av dessa tricks. På den vänstra panelen, försök att skriva följande:

 {
 allwordpresspost {
  kanter {
   nod {
    id
    snigel
    status
    mall
    formatera
   }
  }
 }
}

Detta kan se lite ut som JSON men det är det inte. Det är ett nytt fråge språk som jag tror att en dag i stor utsträckning kommer att ersätta vila som ett sätt att kommunicera med API.

Vad fick du när du tryckte Ctrl + Enter i Graphiql? Du kommer förhoppningsvis att ha sett dina Wordpress-inlägg och sida på höger sida av skärmen.

Vi kommer faktiskt att använda den här frågan i vårt nästa steg, så håll det praktiskt! Du kanske vill se vilka andra data du kan få med Graphiql medan du är här. Om du vill göra det, försök flytta markören runt och skriva antingen Ctrl + Space och / eller Ctrl + Enter. Som kommer att avslöja andra grupper av innehåll.

Så vi har nu innehåll i Gatsby. Därefter måste vi visa den.

Visa våra inlägg

Use WordPress as a headless CMS: Gatsby development 404 screen — Gatsby Development 404 Page visar alla våra Wordpress-inlägg

För detta nästa steg kommer vi att använda gatsby-node.js fil.

gatsby-node.js är en fil du kan använda för att interagera med Gatsbys "node API". Här kan du styra hur din webbplats genereras och skapa sidor, inlägg och mer.

Vi ska skriva några instruktioner här för att berätta Gatsby vad du ska göra med våra data:

 Const Path = Kräv (`Path`);

Exports.CreatePages = ({graphql, Boundactorcreators})
= & gt; {
 const {createpage} = Boundactorcreators
 returnera nytt löfte ((lösa, avvisa) = & gt; {
  GraphQL (
   `
   {
    allwordpresspost {
     kanter {
      nod {
       id
       snigel
       status
       mall
       formatera
      }
     }
    }
   }
  `
 ) .Then (resultat = & gt; {
   om (resultat.errors) {
    Console.log (resultat.errors)
    Avvisa (resultat.errors)
   }

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

   resultat.data.allwordpresspost.edges.foreach (Edge = & gt; {
    skapa sida({
     PATH: `/ $ {edge.node.slug} /`,
     Komponent: Posttemplate,
     sammanhang: {
      ID: edge.node.id,
     },
    })
   })
   lösa()
  })
 })
}

Den här koden skapar sidor från vår GraphQL-fråga och för varje sida kommer den att använda en mall som vi har definierat ( /src/templates/post.js ). Så nästa måste vi skapa den filen!

Skapa postmall

Inne i / src / mappen, skapa en mapp som heter mallar och en fil inuti det som heter post.js . Lägg till i det den här koden:

 Import reagerar från "reagera"
Importera hjälm från "Reageringshjälm"

klass posttemplate förlänger reaktionera {
 framställa() {
  const post = this.props.data.wordpresspost;
  const slug = this.props.data.wordpresspost.slug;

  lämna tillbaka (
   & lt; div & gt;
   & lt; hjälm titel = {`$ {titlestring} | $ {sititle} `} / & gt;
   & lt; h1 farliga setinnerhtml = {{__html: post.title}} / & gt;
   & lt; div farliga setinnerhtml = {{__html: post.content}} / & gt;
   & lt; / div & gt;
  )
 }
}

Exportera standard pagetemplate

Exportera Const Query = Graphql`
 Query CurrentPost ($ ID: String!) {
  WordPresspost (ID: {EQ: $ ID}) {
   titel
   innehåll
   snigel
  }
  webbplats {
   sitemetadata {
    titel
   }
  }
}

Detta använder en annan GraphQL-fråga för att få data om den specifika posten som den har matats av gatsbynode.js filen, då använder det för att göra det ut i webbläsaren.

Om du snabbt vill se en lista över alla dina inlägg kan du skriva http: // localhost: 8000 / a i din webbläsares adressfält. Detta tar dig till en utveckling av utveckling 404, som listar alla dina inlägg. Klicka på en för att besöka det!

Nästa steg

Vi har skrivit ytan av hur man använder WordPress som en huvudlös CMS och jag hoppas jag har introducerat dig till några intressanta koncept och verktyg som du kanske kan använda och experimentera med i framtiden.

Det finns mycket mer till den här historien och mina kollegor och jag har bloggat om det i stor utsträckning på Indigo träd . Jag har också skrivit mer på min personliga blogg, Läckra reverie .

Var vänlig och håll kontakten med mig via dessa kanaler och på Twitter för att höra mer spännande utveckling i världen av Headless CMS!

Denna artikel publicerades ursprungligen i utgåva 308 av netto , världens bästsäljande tidning för webbdesigners och utvecklare. Köp nummer 308 här eller prenumerera här .

Relaterade artiklar:

40 briljanta wordpress tutorials
6 Topptips för CROs framgång i WordPress
10 stora Wordpress-plugins för designers

Använd WordPress som en huvudlös CMS

Komma igång

Använd en statisk webbplatsgenerator

Få vårt innehåll

Fungerade det?

Kan vi fråga våra data?

Visa våra inlägg

Skapa postmall

Nästa steg

Hur - Mest populära artiklar

Hur man ritar ett huvud: en komplett guide

Hur man tar en skärmdump på en Mac

Skapa perspektiv i Adobe Illustrator

Hur man ritar ett tecken i penna och bläck

Skapa en kromatisk aberrationseffekt

Hur man målar en zombie i klippstudiofärg

Skapa en anpassad klisterborste i artrage

Kom igång med prototypning i Adobe XD

Kategorier