Bruk WordPress som en hodeløs CMS

Sep 12, 2025

hvordan

[1. 3]

Jeg hørte først om den hodeløse CMS-tilnærmingen i en snakk jeg så fra Twin Cities Drupal. Jeg likte ideen om en adskillelse av bekymringer mellom forfatterinnhold og visning av det.

De beste web hosting-tjenestene i 2019

Jeg hadde allerede opplevd hvor lett en server kan gå ned, ta ut alle nettstedene på den, noe som fører til minutter eller timer med hjerteopplysende panikk (det var 24 på min). Jeg hadde også sett hvordan et Monolithic CMS-basert nettsted kunne lide et sikkerhetsrom og ta mye arbeid for å reparere (som tok meg mer enn to dager med ubetalte arbeid). For en rekkevidde av Web Hosting. Leverandøralternativer, sjekk ut vår guide.

23 gode eksempler på WordPress-nettsteder

Jeg hadde sett fordelene med CDNS (Content Delivery Networks) som kan lagre bilde-, lyd- og videofiler på servere optimalisert for rask levering og kan duplisere de filene over hele verden for rask levering til disse regionene om nødvendig. Hva om hele nettstedet ditt kan ha nytte av denne tilnærmingen?

Du vil trenge…

● En datamaskin med en Internett-tilkobling (obvs)
● En kodeditor (Atom eller VS-kode)
● en kommandolinje skall / terminal
● En nylig versjon av node.js installert (du kan laste ned & installere her )
● Et WordPress-nettsted for å få innhold fra. Hvis du ikke har en, kan du bruke WordPress.com-plattformen eller dette Heroku bygge pakke .
● Kildefilene fra Github. .

Starter

WordPress kommer ut av esken med resten API, og det er det vi skal bruke til å spørre dataene dine. Så vi trenger ikke noe annet! Vårt skjermsted er helt skilt fra innholdsstedet, så vi trenger ikke Wordpress temaer eller annen tilpasning utenfor noen få (valgfrie) plugins. Selv om det selvsagt kan du legge til disse hvis du vil.

Unntaket er hvis du trenger egendefinerte meta-felt for ekstra innholdsområder. Du bruker sannsynligvis avanserte egendefinerte felt for å gjøre det; Du kan legge til dataene til WordPress API ved Installere dette pluginen .

Bruk en statisk nettstedgenerator

Use WordPress as a headless CMS: Gatsby starter screen — Gatsby standard startskjerm

Nå som vi har vår innholdskilde, la oss hente dataene og vise det ved hjelp av en statisk nettstedgenerator. Mitt valg av valg i dette rike er Gatsby , en utmerket statisk nettstedgenerator som er bygget med JavaScript. (Se disse Nettstedbygger plukker for enkle måter å bygge et nettsted på.)

Hvis du leter etter en god måte å bygge på JavaScript-ferdighetene dine og lære å reagere ved å bli sittende fast i en kode, anbefaler jeg på det sterkeste å prøve Gatsby å gjøre det. Jeg har lært mye meg selv ved å leke med den.

Først, la oss installere et kommandolinjeverktøy som lar oss lage Gatsby-nettsteder:

npm install -global gatsby-cli

Naviger til mappen der du vil beholde nettstedet ditt og kjøre denne kommandoen:

gatsby new blog

Dette vil opprette en ny mappe som heter 'Blog' og installerer Gatsby og dets avhengigheter til denne mappen. Åpne denne mappen i din favoritt tekstredigerer. Det kan synes å være mange filer der. Ikke bekymre deg, vi vil bare redigere gatsby-config.js. , gatsby-node.js. filer, og src. mappe, som er der våre maler bor.

Hvis du har mange filer for å lagre, er det verdt å oppgradere din skylagring .

Få vårt innhold

Det første trinnet vi ønsker å ta er å hente innholdet vårt fra Wordpress Site's API.

For å gjøre det, skal vi installere Gatsby-Source-WordPress , et forhåndsskrevet plugin for WordPress. Dette illustrerer en av hovedgrunnene til at jeg elsker Gatsby - du kan få dataene dine fra en rekke forskjellige kilder. Mange Static Site Generatorer er begrenset til å bruke Markdown-filer, men Gatsby er veldig fleksibel.

Gatsby's plugin økosystem er veldig moden. Det er massevis av forskrevne måter å få dataene på og mye annen smart funksjonalitet som også kommer i nyttig.

For å installere pluginet, endres først katalogen til det nye Gatsby-nettstedet ditt ved å bruke denne kommandoen: CD-blogg .

Kjør nå denne kommandoen: NPM Installer --Save Gatsbysource-Wordpres s.

Når det er gjort, er det på tide å åpne den gatsby-config.js-filen. Du ser at det allerede er noen grunnleggende oppsett på plass som Gatsby gir oss som standard. Vi skal bygge videre på det for å konfigurere pluginet vårt her:

 module.exports = {
 Sitemetadata: {
  Tittel: 'Gatsby Default Starter',
 },
 Plugins: [
  'Gatsby-Plugin-React-Helmet',
  {
   Løs: "Gatsby-Source-WordPress",
   Alternativer: {
    BASEURL: "My-wordpress-site.com",
    Protokoll: "https",
    Hostingwpcom: False,
    UseACF: True,
    SearchandreplaceContenturls: {
     Sourceurl: "https://my-wordpress-site.com",
     erstatningURL: "https://my-static-site.com",
    }
   },
  },
 ],
}

Virket det?

Du kan sjekke ved å åpne terminalen din, skrive Gatsby utvikler seg og se hva som skjer. Vær advart! Selv om du fikk dine innstillinger riktig, vil du få noen advarsler uansett - dette kan være gatsby på jakt etter innhold som du ikke har skrevet ennå.

Du kan nå se Gatsby-Starter-standard i nettleseren.

http: // localhost: 8000 /

Se Graphiql, en in-browser IDE, for å utforske nettstedets data og skjema.

  http: // localhost: 8000 / ___ graphql

Legg merke til at utviklingsbyggingen ikke er optimalisert. For å lage en produksjonsbygging, bruk Gatsby Build.

Hvis Gatsby-standardstyreren (til høyre) ikke er det du får, må du sjekke WordPress-siden din ikke på et underdomene, at det definitivt bruker HTTPS eller HTTP, og at du har det samme i innstillingene dine.

Nå kan vi gå til http: // localhost: 8000 / og se vår Gatsby nettsted!

Kan vi spørre våre data?

Du har kanskje lagt merke til at det ikke er noe Wordpress-innhold her. Dette er fordi vi ikke har fortalt Gatsby hva de skal gjøre med det ennå. Før vi gjør det, la oss bare sjekke vi har faktisk fått vårt innhold tilgjengelig for Gatsby. For å gjøre det, besøk denne nettadressen:

  http: // localhost: 8000 / ___ graphql

Dette innebygde verktøyet heter Graphiql og er en annen hemmelig kraft av Gatsby.

Grafql ligner på hvile: Det er en måte å spørre data på. Men med grafql kan du samhandle med dataene dine mye lettere. Graphiql (en visuell IDE for grafql) kan vise oss noen av disse triksene. På venstre panel, prøv å skrive følgende:

 {
 allwordpresspost {
  kanter {
   node {
    id.
    mordersnegle
    status
    mal
    format
   }
  }
 }
}

Dette kan se litt ut som JSON, men det er det ikke. Det er et nytt spørringsspråk som jeg tror en dag vil i stor grad erstatte hvile som en måte å kommunisere med APIer på.

Hva fikk du når du trykket på Ctrl + Enter i Graphiql? Du vil forhåpentligvis ha sett dine WordPress-innlegg og side på høyre side av skjermen.

Vi kommer faktisk til å bruke denne spørringen i vårt neste skritt, så hold det hendig! Du vil kanskje se hvilke andre data du kan få med grafiql mens du er her. Hvis du vil gjøre det, kan du prøve å flytte markøren rundt og skrive enten Ctrl + Space og / eller Ctrl + Enter. Som vil avsløre andre grupper av innhold.

Så, vi har nå innhold i Gatsby. Deretter må vi vise det.

Vis våre innlegg

Use WordPress as a headless CMS: Gatsby development 404 screen — Gatsby Development 404 Page som viser alle våre Wordpress-innlegg

For dette neste trinnet skal vi gjøre bruk av gatsby-node.js. fil.

gatsby-node.js. Er en fil du kan bruke til å samhandle med Gatsby's "Node API". Her kan du kontrollere hvordan nettstedet ditt genereres og oppretter sider, innlegg og mer.

Vi skal skrive noen instruksjoner her for å fortelle Gatsby hva du skal gjøre med våre data:

 Const Path = Krev (`Path`);

Eksport.creepages = ({graphql, påbundne aktiver})
= & gt; {
 const {createpage} = påbørsmonteringcreator
 returnere nytt løfte ((løse, avvise) = & gt; {
  grafql (
   `.
   {
    allwordpresspost {
     kanter {
      node {
       id.
       mordersnegle
       status
       mal
       format
      }
     }
    }
   }
  `.
 ) .Nå (resultat = & gt; {
   hvis (resultat.errrors) {
    Console.log (resultat.Errors)
    Avvis (resultat.error)
   }

   CONT POSTTEMPLATE = PATH.RESOLLE (`./SRC/templates/
post.js`)

   result.data.allwordpresspost.edges.foreach (EDGE = & GT; {
    lag side({
     Sti: `/ $ {edge.node.slug} /`,
     Komponent: Posttemplate,
     Kontekst: {
      ID: Edge.node.id,
     },
    })
   })
   Løse()
  })
 })
}

Denne koden skaper sider fra grafql-spørringen, og for hver side vil det bruke en mal vi har definert ( /src/templates/post.js. ). Så neste, må vi lage den filen!

Opprett innleggsmal

Inne i / src / mappen, opprett en mappe kalt maler og en fil inne som kalles Post.js. . Legg til i den denne koden:

 Importen reagerer fra "reagere"
Importer hjelm fra "React-Helmet"

Klasse posttemplate utvider react..Conent {
 gjengi () {
  const post = this.props.data.wordpresspost;
  const slug = this.props.data.wordpresspost.slug;

  komme tilbake (
   & lt; div & gt;
   & lt; hjelm title = {`$ {titlestring} | $ {sitetitle} `} / & gt;
   & lt; h1 farliglySetinerhtml = {{__html: post.title}} / & gt;
   & lt; div farliglySetinerhtml = {{__html: post.content}} / & gt;
   & lt; / div & gt;
  )
 }
}

Eksporter standard PageTemplate.

Eksporter Const Query = GraphQL`
 Query CurrentPost ($ ID: streng!) {
  WordPressPost (ID: {EQ: $ ID}) {
   tittel
   innhold
   mordersnegle
  }
  nettstedet {
   sitemetadata {
    tittel
   }
  }
}

Dette bruker en annen grafql-spørring for å få data om det spesifikke innlegget, det er blitt matet av gatsbynode.js. Fil, deretter bruker brukeren til å gjøre det ut i nettleseren.

Hvis du vil raskt se en liste over alle dine innlegg, kan du skrive http: // localhost: 8000 / a inn i nettleserens adressefelt. Dette vil ta deg til en utvikling 404-side, som viser alle dine innlegg. Klikk på en for å besøke det!

Neste skritt

Vi har riper på overflaten av hvordan du bruker WordPress som en headless CMS, og jeg håper jeg har introdusert deg til noen interessante konsepter og verktøy som du kanskje kan bruke og eksperimentere med i fremtiden.

Det er mye mer til denne historien og mine kolleger, og jeg har blogget om det i stor grad på Indigo Tree. . Jeg har også skrevet mer på min personlige blogg, Deilig reverie .

Vennligst hold kontakten med meg via disse kanalene og på Twitter for å høre mer spennende utviklinger i verden av hodeløse CMS!

Denne artikkelen ble opprinnelig publisert i utgave 308 av nett , verdens bestselgende magasin for webdesignere og utviklere. Kjøp problem 308 her eller Abonner her .

Relaterte artikler:

40 Brilliant Wordpress Tutorials
6 Topptips for Cro Suksess i WordPress
10 Great Wordpress Plugins for designere

Bruk WordPress som en hodeløs CMS

Starter

Bruk en statisk nettstedgenerator

Få vårt innhold

Virket det?

Kan vi spørre våre data?

Vis våre innlegg

Opprett innleggsmal

Neste skritt

hvordan - Mest populære artikler

Bygg en stemme kontrollert UI

Hvordan lage en 3D varulv i uvirkelig motor

Affinity Designer: Slik bruker du begrensninger

Hvordan designe troverdige fantasy dyr

Colourise Greyscale Arbeid i Photoshop

Slik bruker du arkivfotografering kreativt i ditt designarbeid

Den utrolige kraften i flexbox

Hvordan fange bevegelse i dine 3D-render

Kategorier