Benotzt WordPress als headless CMS

Inhalt

• Ufänken
• Benotzt e statesche Site Generator
• Kréien eisen Inhalt
• Huet et geschafft?
• Kënne mir eis Date froen?
• Weist eis Posts
• Erstelle Post Template
• Nächst Schrëtt

Ech hunn d'éischt iwwer d'kapplos CMS Approche héieren an engem Gespréich dat ech vun Twin Cities Drupal gekuckt hunn. Ech hu gär d'Iddi vun enger Trennung vu Bedenken tëscht dem Autoriséiere vum Inhalt an der Vue.

• Déi bescht Webhosting Servicer am 2019

Ech hat scho erlieft wéi einfach ee Server erofgoe kann, all d'Siten drop eraus huelen, wat zu Minutten oder Stonnen Häerzstopp Panik féiert (et waren der 24 op mir). Ech hat och gesinn, wéi e monolithesche CMS-baséiert Site e Sécherheetskompromiss kéint leiden a vill Ustrengunge mécht fir ze flécken (dat huet mech méi wéi zwee Deeg onbezuelten Aarbecht gebraucht). Fir eng Rei vu Webhosting Provider Optiounen, kuckt an eisem Guide.

• 23 super Beispiller vu WordPress Websäiten

Ech hunn d'Virdeeler vun CDNs (Content Delivery Networks) gesinn, déi Äert Bild, Audio a Video Dateien op Servere späichere kënnen, déi fir séier Liwwerung optiméiert sinn a kënnen dës Dateie weltwäit duplizéieren fir séier ze liwweren an déi Regiounen, wann néideg. Wat wann Är ganz Websäit vun dëser Approche kéint profitéieren?

● E Computer mat enger Internetverbindung (obvs)
● E Code Editor (Atom oder VS Code)
● Eng Kommandozeilenschuel / Terminal
● Eng rezent Versioun vum Node.js installéiert (Dir kënnt hei eroflueden & installéieren)
● E WordPress Site fir Inhalt ze kréien. Wann Dir keen hutt, kënnt Dir d'WordPress.com Plattform oder dësen Heroku Build Pack benotzen.
● D'Quelldateie vu GitHub.

Ufänken

WordPress kënnt aus der Këscht mat der REST API an dat ass wat mir benotze fir Är Donnéeën ze froen. Also brauche mir net wierklech eppes anescht! Eise Display Site ass ganz getrennt vun eisem Inhalt Site, also brauche mir WordPress Themen oder keng aner Customisatioun ausserhalb vun e puer (optional) Plugins. Och wann Dir natierlech kënnt dës bäifügen wann Dir wëllt.

D'Ausnahm ass wann Dir personaliséiert Metafelder fir extra Inhaltsregioune brauch. Dir benotzt wahrscheinlech Advanced Custom Fields fir dat ze maachen; Dir kënnt dës Donnéeën an de WordPress API bäisetzen andeems Dir dëse Plugin installéiert.

Benotzt e statesche Site Generator

Elo datt mir eis Inhaltsquell hunn, loosst eis d'Daten sichen a weisen se mat engem statesche Site Generator. Meng Waff vu Wiel an dësem Räich ass Gatsby, en exzellenten statesche Site Generator dee mat JavaScript gebaut ass. (Kuckt dës Websäit Builder wielt fir einfach Weeër fir e Site ze bauen.)

Wann Dir e gudde Wee sicht fir Är JavaScript Fäegkeeten opzebauen a Reagéieren ze léieren andeems Dir an e Code hänkt, empfeelen ech Gatsby ze probéieren dat ze maachen. Ech hu selwer vill geléiert andeems ech domat spillen.

Als éischt, loosst eis e Kommandozeilentool installéieren dat eis erlaabt Gatsby Site ze kreéieren:

npm installéieren -global gatsby-cli

Navigéiert elo an den Dossier wou Dir Äre Site wëllt behalen an dëse Kommando ausféieren:

gatsby neie Blog

Dëst erstellt en neien Dossier mam Numm 'Blog' an installéiert Gatsby a seng Ofhängegkeeten zu dësem Dossier. Öffnen dësen Dossier an Ärem Liiblingstexteditor. Et schénge vläicht vill Dateien do ze sinn. Maacht Iech keng Suergen, mir editéieren nëmmen den gatsby-config.js, gatsby-node.js Dateien, an den src Dossier, wou eis Templates wunnen.

Wann Dir vill Dateien hutt fir ze späicheren, ass et derwäert Äert Cloud Späicher ze upgrade.

Kréien eisen Inhalt

Den éischte Schrëtt dee mir wëlle maachen ass eisen Inhalt vun der WordPress Site API ze sichen.

Fir dat ze maachen, wäerte mir installéieren gatsby-source-wordpress, e virgeschriwwe Plugin fir WordPress. Dëst illustréiert eng vun den Haaptgrënn, déi ech Gatsby gär hunn - Dir kënnt Är Donnéeë vu verschiddene verschiddene Quelle kréien. Vill statesch Site Generatoren sinn limitéiert fir Markdown Dateien ze benotzen awer Gatsby ass ganz flexibel.

Gatsby's Plugin-Ökosystem ass ganz erwuesse. Et gi vill virgeschriwwe Weeër fir Är Donnéeën ze kréien a vill aner clever Funktionalitéit déi och nëtzlech ass.

Fir de Plugin z'installéieren, ännert als éischt Verzeechnes op Ärem neie Gatsby Site mat dësem Kommando: CD Blog.

Fëllt dëse Kommando aus: npm installéieren - späichert gatsbysource-wordpress.

Wann dat fäerdeg ass, ass et Zäit d'gatsby-config.js Datei opzemaachen. Dir wäert gesinn datt et schonn e puer Basis Setup op der Plaz ass déi Gatsby eis par défaut gëtt. Mir bauen dorop op fir eise Plugin hei ze konfiguréieren:

module.exports = {siteMetadata: {title: 'Gatsby Default Starter',}, Plugins: ['gatsby-plugin-react-helmet', {resolve: "gatsby-source-wordpress", Optiounen: {baseUrl: "my- wordpress-site.com ", Protokoll:" https ", HostingWPCOM: falsch, useACF: richteg, searchAndReplaceContentUrls: {sourceUrl:" https://my-wordpress-site.com ", ErsatzUrl:" https: // my-statesch -site.com ",}},},],}

Huet et geschafft?

Dir kënnt iwwerpréiwen andeems Dir Äert Terminal opmaacht, tippt gatsby entwéckelen a kuckt wat geschitt. Gitt gewarnt! Och wann Dir Är Astellunge korrekt krut, kritt Dir souwisou e puer Warnungen - dëst ka Gatsby no Inhalter sichen, déi Dir nach net geschriwwen hutt.

Dir sidd elo fäeg Gatsby-Starter-Standard am Browser ze gesinn.

http: // localhost: 8000 /

Kuckt GraphiQL, en In-Browser IDE, fir Är Site Daten a Schema z'ënnersichen.

http: // localhost: 8000 / ___ graphql

Bedenkt datt d'Entwécklung bauen net optimiséiert ass. Fir e Produktiounsbau ze kreéieren benotzt Gatsby Build.

Wann de Gatsby Standard Starer (riets) net ass wat Dir kritt, kontrolléiert Är WordPress Site net op engem Subdomain, datt et definitiv HTTPS oder HTTP benotzt an datt Dir datselwecht an Ären Astellungen hutt.

Elo kënne mir op http: // localhost: 8000 / goen an eise Gatsby Site gesinn!

Kënne mir eis Date froen?

Dir hutt vläicht gemierkt datt et kee WordPress Inhalt hei ass. Dëst ass well mir dem Gatsby nach net gesot hunn wat mir domat maache sollen. Ier mer dat maachen, kucke mer just datt mir eisen Inhalt fir Gatsby verfügbar hunn. Fir dat ze maachen, besicht dës URL:

http: // localhost: 8000 / ___ graphql

Dëst integréiert Tool heescht GraphiQL an ass eng aner geheim Kraaft vu Gatsby.

GraphQL ass ähnlech wéi REST: et ass e Wee fir Daten ze froen. Awer mat GraphQL kënnt Dir vill méi einfach mat Ären Daten interagéieren. GraphiQL (eng visuell IDE fir GraphQL) kann eis e puer vun dësen Tricks weisen. Op der lénker Säit probéiert d'folgend ze schreiwen:

{allWordpressPost {edge {node {id slug status template format}}}}

Dëst kéint e bësse wéi JSON ausgesinn awer et ass net. Et ass eng nei Queriesprooch déi ech mengen datt een Dag de REST gréisstendeels ersetzt als e Wee fir mat APIen ze kommunizéieren.

Wat hutt Dir kritt wann Dir op ctrl + a GraphiQL dréckt? Dir hoffentlech hutt Är WordPress Posts a Säit op der rietser Säit vum Bildschierm gesinn.

Mir ginn dës Ufro tatsächlech an eisem nächste Schrëtt, also haalt et praktesch! Dir wëllt vläicht kucken wéi eng aner Daten Dir mat GraphiQL kritt wann Dir hei sidd. Wann Dir dat maache wëllt, probéiert de Cursor ronderëm ze réckelen an entweder ctrl + space an / oder ctrl + enter ze tippen. Dat wäert aner Gruppen vun Inhalter verroden.

Also, mir hunn elo Inhalter zu Gatsby. Als nächst musse mir et affichéieren.

Weist eis Posts

Fir dësen nächste Schrëtt gi mir Gebrauch vun der gatsby-node.js Datei.

gatsby-node.js ass eng Datei déi Dir benotzt fir mat Gatsby's "Node API" ze interagéieren. Hei kënnt Dir kontrolléieren wéi Äre Site generéiert gëtt a Säiten, Posts a méi kreéieren.

Mir schreiwen hei e puer Instruktioune fir dem Gatsby ze soen wat mat eisen Daten ze maachen:

const path = erfuerderen (`path`); exports.createPages = ({graphql, boundActionCreators}) => {const {createPage} = boundActionCreators nees nei Verspriechen ((léisen, refuséieren) => {graphql (`{allWordpressPost {Kante {Knuet {id Slug Status Template Format}}} } `). da (Resultat => {wann (Resultat.fehler) {Konsol.log (Resultat. Feeler) refuséieren (Resultat. Feeler)} const postTemplate = path.resolve (` ./src/templates/ post.js` ) result.data.allWordpressPost.edges.forEach (edge ​​=> {createPage ({path: `/ $ {edge.node.slug} /`, component: postTemplate, context: {id: edge.node.id,}, })}) léisen ()})})}

Dëse Code erstellt Säiten aus eiser GraphQL Ufro a fir all Säit benotzt en eng Schabloun déi mir definéiert hunn (/src/templates/post.js). Also nächst, musse mir dës Datei erstellen!

Erstelle Post Template

Am / src / Dossier erstellen en Dossier mam Numm Templates an eng Datei dobannen déi genannt gëtt post.js. Füügt dëse Code derbäi:

importéieren Reagéiere vun 'reagéieren' Import Helm aus 'Reaktiounshelm' Klass postTemplate verlängert React.Component {render () {const post = this.props.data.wordpressPost; const Slug = this.props.data.wordpressPost.slug; zréck (div> Helmtitel = {`$ {titleString} | $ {siteTitle}`} /> h1 geféierlechSetInnerHTML = {{__html: post.title}} /> div geféierlechSetInnerHTML = {{__html: post.content}} /> / div>)}} Standardsäit exportéieren Template exportéieren const Ufro = graphql` Ufro aktuellPost ($ id: String!) {wordpressPost (id: {eq: $ id}) {title content slug} Site {siteMetadata {title}}}

Dëst benotzt eng aner GraphQL Ufro fir Daten iwwer de spezifesche Post ze kréien, deen et vun der gatsbynode.js Datei, benotzt dann React fir dat an de Browser ze maachen.

Wann Dir séier eng Lëscht vun all Äre Posts wëllt gesinn, kënnt Dir tippen http: // localhost: 8000 / a an d'Adressbar vun Ärem Browser. Dëst féiert Iech op eng Entwécklung 404 Säit, déi all Är Posts opgezielt. Klickt op ee fir se ze besichen!

Nächst Schrëtt

Mir hunn d'Uewerfläch gekraazt wéi Dir WordPress als headless CMS benotzt an ech hoffen ech hunn Iech e puer interessant Konzepter an Tools agefouert, déi Dir an der Zukunft kéint benotzen an experimentéieren.

Et gëtt vill méi zu dëser Geschicht a meng Kollegen an ech hunn doriwwer extensiv um Indigo Tree gebloggt. Ech hunn och méi op mengem perséinleche Blog geschriwwen, Delicious Reverie.

Halt w.e.g. Kontakt mat mir iwwer dës Kanäl an op Twitter fir méi spannend Entwécklungen an der Welt vum headless CMS ze héieren!

Dësen Artikel gouf ursprénglech an der Emissioun 308 vum Netz, de beschte verkaafte Magazin vun der Welt fir Webdesigner an Entwéckler. Kaaft Ausgab 308 hei oder hei abonnéieren.