Brug WordPress som hovedløs CMS

Feb 2, 2026

hvordan

Jeg hørte først om den hovedløse CMS-tilgang i en snak, jeg så fra Twin Cities Drupal. Jeg kunne godt lide ideen om en adskillelse af bekymringer mellem forfatterens indhold og se det.

De bedste Web Hosting Services i 2019

Jeg havde allerede oplevet, hvor nemt en server kan gå ned og tage ud af alle webstederne på den, hvilket fører til minutter eller timer med hjerte-stop panik (der var 24 på min). Jeg havde også set, hvordan et monolitisk CMS-baseret websted kunne lide et sikkerhedskompromis og tage en masse indsats for at reparere (det tog mig mere end to dages ubetalt arbejde). For en række Web Hosting. Udbyder muligheder, tjek vores vejledning.

23 gode eksempler på WordPress-websites

Jeg havde set fordelene ved CDNS (Content Delivery Networks), der kan gemme dit billede, lyd- og videofiler på servere optimeret til hurtig levering og kan duplikere disse filer over hele verden for hurtig levering til de regioner, hvis det er nødvendigt. Hvad hvis hele din hjemmeside kunne drage fordel af denne tilgang?

Du får brug for…

● En computer med en internetforbindelse (OBVS)
● En kodeditor (Atom eller VS kode)
● En kommandolinjeskal / terminal
● En nylig version af node.js installeret (du kan downloade & amp; installer her )
● Et WordPress-websted for at få indhold fra. Hvis du ikke har en, kan du bruge WordPress.com-platformen eller dette Heroku Build Pack. .
● Kildefilerne fra Github. .

Kom godt i gang

WordPress kommer ud af boksen med resten API, og det er det, vi skal bruge til at forespørge dine data. Så vi har ikke rigtig brug for noget andet! Vores display site er helt adskilt fra vores indholdssted, så vi behøver ikke Wordpress temaer. eller enhver anden tilpasning uden for et par (valgfrie) plugins. Selvom du selvfølgelig kan tilføje disse, hvis du vil.

Undtagelsen er, hvis du har brug for brugerdefinerede meta felter til ekstra indholdsområder. Du bruger sandsynligvis avancerede brugerdefinerede felter til at gøre det; Du kan tilføje de data til WordPress API af Installation af dette plugin. .

Brug en statisk webstedgenerator

Use WordPress as a headless CMS: Gatsby starter screen — Gatsby Standard Starter Screen

Nu hvor vi har vores indholdskilde, lad os hente dataene og vise den ved hjælp af en statisk webstedgenerator. Mit valg i dette rige er Gatsby. , en fremragende statisk site generator, der er bygget med JavaScript. (Se disse Website Builder. vælger for enkle måder at opbygge et websted på.)

Hvis du leder efter en god måde at bygge på dine JavaScript-færdigheder og lære at reagere ved at sidde fast i nogle kode, anbefaler jeg stærkt forsøger Gatsby at gøre det. Jeg har lært meget mig selv ved at lege med det.

Lad os først installere et kommandolinjeværktøj, der gør det muligt for os at oprette Gatsby-websteder:

npm install -global gatsby-cli

Novn, naviger til den mappe, hvor du vil beholde dit websted og køre denne kommando:

gatsby new blog

Dette vil oprette en ny mappe kaldet 'blog' og installere GATsby og dens afhængigheder til denne mappe. Åbn denne mappe i din yndlings tekst editor. Der kan synes at være mange filer der. Bare rolig, vi vil kun direkte redigere gatsby-config.js. Vi gatsby-node.js. filer og Src. Mappe, som er hvor vores skabeloner lever.

Hvis du har mange filer til at gemme, er det værd at opgradere din Sky lagring .

Få vores indhold

Det første skridt, vi ønsker at tage, er at hente vores indhold fra WordPress-webstedets API.

At gøre det, vi skal installere Gatsby-Source-WordPress , en prewritten plugin til WordPress. Dette illustrerer en af hovedårsagerne til, at jeg elsker Gatsby - du kan få dine data fra en række forskellige kilder. En masse statiske webstedsgeneratorer er begrænset til at bruge markdown-filer, men Gatsby er meget fleksibel.

Gatsby's plugin økosystem er meget moden. Der er masser af prewritten måder at få dine data på og masser af anden smart funktionalitet, der også kommer i nyttige.

Sådan installeres plugin, første skiftkatalog i dit nye GATsby-websted ved at bruge denne kommando: CD Blog. .

Kør nu denne kommando: NPM Installer --Save Gatsbysource-WordPres s.

Når det er gjort, er det tid til at åbne gatsby-config.js-filen. Du vil se, at der allerede er noget grundlæggende setup på plads, som Gatsby giver os som standard. Vi skal bygge videre på det for at konfigurere vores plugin her:

 modul.Export = {
 sitemetadata: {
  Titel: 'Gatsby Start Starter',
 },
 Plugins: [
  'Gatsby-plugin-react-hjelm',
  {
   Løs: "Gatsby-Source-WordPress",
   muligheder: {
    Baseurl: "My-wordpress-Site.com",
    Protokol: "HTTPS",
    Hostingwpcom: False,
    USEACF: TRUE,
    SearchAndPlaceContenturls: {
     Sourceurl: "https://my-wordpress-site.com",
     udskiftning: "https://my-static-site.com",
    }
   },
  },
 ]
}

Virkede det?

Du kan tjekke ved at åbne din terminal, skrive Gatsby Udvikling og se hvad der sker. Vær advaret! Selvom du har dine indstillinger korrekt, får du nogle advarsler alligevel - det kan være Gatsby på udkig efter indhold, som du ikke har skrevet endnu.

Du er nu i stand til at se Gatsby-starter-standard i browseren.

  http: // localhost: 8000 /

Se Graphiql, en in-browser IDE, for at udforske dit websteds data og skema.

  http: // localhost: 8000 / ___ GraphQl

Bemærk, at udviklingsbygningen ikke er optimeret. For at skabe en produktionsbygning, brug Gatsby Build.

Hvis Gatsby Standard Starter (højre) ikke er, hvad du får, skal du kontrollere, at WordPress-webstedet ikke er på et underdomæne, at det helt sikkert bruger HTTPS eller HTTP, og at du har det samme i dine indstillinger.

Nu kan vi gå til http: // localhost: 8000 / og se vores Gatsby-websted!

Kan vi spørge vores data?

Du har måske bemærket, at der ikke er noget WordPress-indhold her. Dette skyldes, at vi ikke har fortalt Gatsby, hvad de skal gøre med det endnu. Før vi gør det, lad os bare tjekke vi har faktisk fået vores indhold tilgængeligt for Gatsby. For at gøre det skal du besøge denne webadresse:

  http: // localhost: 8000 / ___ GraphQl

Dette indbyggede værktøj hedder Graphiql og er en anden hemmelig kraft i Gatsby.

GraphQL svarer til hvile: Det er en måde at forespørge data på. Men med GraphQl kan du interagere med dine data meget lettere. GraphIQL (en Visual IDE til GraphQL) kan vise os nogle af disse tricks. På venstre panel, prøv at skrive følgende:

 {
 allwordpresspost {
  kanter {
   node {
    ID.
    slug.
    status.
    template.
    format
   }
  }
 }
}

Dette kan se lidt ud som JSON, men det er det ikke. Det er et nyt forespørgselssprog, som jeg tror en dag, vil stort set erstatte hvile som en måde at kommunikere med API'er.

Hvad fik du, da du trykker på CTRL + ENTER i GRAPHIQL? Du forhåbentlig vil have set dine WordPress-indlæg og side på højre side af skærmen.

Vi skal faktisk bruge denne forespørgsel i vores næste skridt, så hold det praktisk! Du vil måske gerne se, hvilke andre data du kan få med GraphIQL, mens du er her. Hvis du vil gøre det, skal du prøve at flytte markøren rundt og skrive enten CTRL + rum og / eller CTRL + ENTER. Der vil afsløre andre grupper af indhold.

Så vi har nu indhold i Gatsby. Dernæst skal vi vise det.

Vis vores indlæg

Use WordPress as a headless CMS: Gatsby development 404 screen — Gatsby Development 404 Side Viser alle vores WordPress Posts

For dette næste skridt vil vi gøre brug af gatsby-node.js. fil.

gatsby-node.js. er en fil, du kan bruge til at interagere med Gatsby's "node api". Her kan du styre, hvordan dit websted er genereret og oprettet sider, indlæg og meget mere.

Vi skal skrive nogle instruktioner her for at fortælle Gatsby, hvad du skal gøre med vores data:

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

Eksport.Creatages = ({GRAPHQL, BOODACTACTACTORS})
= & gt; {
 const {createPage} = boundactionCreator
 returnere nyt løfte ((løse, afvise) = & gt; {
  GRAPHQL (
   `
   {
    allwordpresspost {
     kanter {
      node {
       ID.
       slug.
       status.
       template.
       format
      }
     }
    }
   }
  `
 ) .then (resultat = & gt; {
   hvis (resultat.errors) {
    Console.log (resultat.Errors)
    afvise (resultat.Errors)
   }

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

   Resultat.Data.allwordpressPost.edges.Foreach (Edge = & GT; {
    CreatePage ({
     Sti: `/ $ {edge.node.slug} /`,
     Komponent: posttemplate,
     Kontekst: {
      ID: EDGE.NODE.ID,
     },
    })
   })
   beslutte()
  })
 })
}

Denne kode skaber sider fra vores GraphQL-forespørgsel og for hver side bruger den en skabelon, vi har defineret ( /SRC/Templates/post.js. ). Så næste skal vi oprette den fil!

Opret postskabelon

Inde i / src / mappen, opret en mappe kaldet skabeloner og en fil inde, der hedder det post.js. . Tilføj til denne kode:

 Import reagerer fra 'reagere'
Importer hjelm fra 'React-Helm'

klasse posttemplate strækker sig react.component {
 render () {
  const post = this.props.data.wordpressPost;
  const slug = this.props.data.wordpresspost.slug;

  Vend tilbage (
   & lt; div & gt;
   & lt; HELMET TITLE = {`$ {titlestring} | $ {sitetitle} `} / & gt;
   & lt; H1 farvestrålinginnerhtml = {{__html: post.title}} / & gt;
   & lt; div farallysetinnerhtml = {{__html: post.content}} / & gt;
   & lt; / div & gt;
  )
 }
}

Eksport Standard Pagetemplate.

Eksporter const Query = GraphQl`
 forespørgsels nuværendePost ($ ID: String!) {
  WordpressPost (ID: {EQ: $ ID}) {
   titel
   indhold
   slug.
  }
  site {
   sitemetadata {
    titel
   }
  }
}

Dette bruger en anden GraphQL-forespørgsel for at få data om det specifikke indlæg, det er blevet fodret af gatsbynode.js. fil, bruger derefter reagerer for at gøre det ud i browseren.

Hvis du hurtigt vil se en liste over alle dine indlæg, kan du skrive http: // localhost: 8000 / a ind i din browsers adresselinje. Dette vil tage dig til en udvikling 404 side, som lister alle dine indlæg. Klik på en for at besøge det!

Næste skridt

Vi har ridset overfladen af, hvordan vi bruger WordPress som hovedløs CMS, og jeg håber, at jeg har introduceret dig til nogle interessante begreber og værktøjer, som du måske kan bruge og eksperimentere med i fremtiden.

Der er meget mere til denne historie og mine kolleger, og jeg har blogget om det i vid udstrækning på Indigo Tree. . Jeg har også skrevet mere på min personlige blog, Lækker reverie. .

Vær venlig at holde kontakten med mig via disse kanaler og på Twitter for at høre mere spændende udviklinger i verden af hovedløse CMS!

Denne artikel blev oprindeligt offentliggjort i udstedelse 308 af net , verdens bedst sælgende magasin til webdesignere og udviklere. Køb problem 308 her eller Abonner her .

Relaterede artikler:

40 Brilliant Wordpress Tutorials
6 Top Tips til Cro Succes i WordPress
10 Great WordPress plugins til designere

Brug WordPress som hovedløs CMS

Kom godt i gang

Brug en statisk webstedgenerator

Få vores indhold

Virkede det?

Kan vi spørge vores data?

Vis vores indlæg

Opret postskabelon

Næste skridt

hvordan - Mest populære artikler

Administrer reaktionsformular tilstand med Formik

Sådan tegner du en fugl

Sådan strukturerer du medier forespørgsler i SASS

Sådan maler du et slot med sketchup

Sådan maler man realistiske bølger i Photoshop

Sådan oprettes en autentisk manga tegneserie

Sådan sculpt en 3D-trykt goblin

Opret et tegn med stiliseret realisme

Kategorier