Utilizați WordPress ca o CMS fără cap

Sep 17, 2025

să

Am auzit pentru prima oară despre abordarea CMS fără discuții într-o discuție pe care am urmărit-o din orașele gemene Drupal. Mi-a plăcut ideea unei separări de preocupări între conținutul de autorizare și vizionarea acesteia.

Cele mai bune servicii de găzduire web în 2019

Am experimentat deja cât de ușor un server poate merge în jos, scos toate site-urile pe el, ducând la minute sau ore de panică de oprire a inimii (au fost 24 pe mine). De asemenea, am văzut cum un site bazat pe Monolitic CMS ar putea suferi un compromis de securitate și să ia o mulțime de eforturi pentru a repara (care mi-a luat mai mult de două zile de muncă neplătită). Pentru o serie de web hosting Opțiunile furnizorilor, verificați ghidul nostru.

23 Exemple mari de site-uri WordPress

Am văzut beneficiile CDN-urilor (rețele de livrare a conținutului) care pot stoca imaginile, fișierele audio și video pe serverele optimizate pentru livrare rapidă și pot duplica aceste fișiere din întreaga lume pentru livrarea rapidă în aceste regiuni, dacă este necesar. Ce se întâmplă dacă întregul dvs. site ar putea beneficia de această abordare?

Vei avea nevoie…

● Un computer cu conexiune la Internet (obves)
● Un editor de coduri (Atom sau Cod VS)
● O linie de comandă / terminale
● O versiune recentă a NODE.JS instalat (puteți descărca & amplificați și instalați Aici )
● Un site WordPress pentru a obține conținut de la. Dacă nu aveți una, puteți utiliza platforma WordPress.com sau acest lucru Heroku construi pachet. .
● Fișierele sursă de la Github. .

Noțiuni de bază

WordPress iese din cutie cu API-ul de odihnă și asta vom folosi pentru a interoga datele dvs. Deci, nu avem nevoie de altceva! Site-ul nostru de afișare este complet separat de site-ul nostru de conținut, deci nu vom avea nevoie Teme WordPress. sau orice altă personalizare în afara câtorva pluginuri (opționale). Deși, desigur, le puteți adăuga dacă doriți.

Excepția este dacă aveți nevoie de câmpuri META personalizate pentru zonele de conținut suplimentare. Probabil că utilizați câmpuri personalizate avansate pentru a face acest lucru; Puteți adăuga acele date la API-ul WordPress de către Instalarea acestui plugin .

Utilizați un generator static al site-ului

Use WordPress as a headless CMS: Gatsby starter screen — Ecranul de pornire implicit din GATSBY

Acum că avem sursa noastră de conținut, hai să aducem datele și să-l afișăm folosind un generator static de site. Arma mea de alegere în acest domeniu este GATSBY. , un generator excelent de site-uri statice care este construit cu JavaScript. (Vezi aceste lucruri Builder de site-uri web Puneți pentru modalități simple de a construi un site.)

Dacă sunteți în căutarea unei modalități bune de a vă construi abilitățile JavaScript și de a învăța reacționați prin a rămâne blocat într-un cod, vă recomandăm să încercați să faceți acest lucru. Am învățat foarte mult, jucând cu el.

În primul rând, să instalăm un instrument de linie de comandă care să ne permită să creăm site-uri GATSBY:

npm install -global gatsby-cli

Acum, navigați la dosarul în care doriți să păstrați site-ul dvs. și să executați această comandă:

gatsby new blog

Acest lucru va crea un nou folder numit "blog" și va instala GATSBY și dependențele acestuia acestui dosar. Deschideți acest dosar în editorul de text preferat. S-ar putea par să fie o mulțime de fișiere acolo. Nu vă faceți griji, vom edita doar direct GATSBY-CONFIG.JS. , GATSBY-NODE.JS. fișiere și SRC. dosarul, care este locul în care trăiesc șabloanele noastre.

Dacă aveți o mulțime de fișiere pentru a stoca, merită să vă actualizați Stocare in cloud .

Obținerea conținutului nostru

Primul pas pe care dorim să-l luăm este să aducem conținutul nostru din API-ul site-ului WordPress.

Pentru a face acest lucru, vom instala gatsby-sursă-wordpress , un plugin prewritten pentru WordPress. Acest lucru ilustrează unul dintre principalele motive pe care le iubesc pe Gatsby - puteți obține datele dvs. dintr-o varietate de surse diferite. O mulțime de generatoare de site-uri statice sunt limitate la utilizarea fișierelor Markdown, dar Gatsby este foarte flexibilă.

Ecosistemul pluginului lui Gatsby este foarte matur. Există o mulțime de modalități preiardente de obținere a datelor și o mulțime de alte funcționalități inteligente care vin și util.

Pentru a instala pluginul, mai întâi Schimbați directorul în noul site Gatsby utilizând această comandă: CD Blog. .

Acum rulați această comandă: NPM Install --Save GATSBYSOURCE-WORDPRES s.

Odată ce acest lucru este făcut, este timpul să deschideți fișierul Gatsby-config.js. Veți vedea că există deja o configurație de bază în care Gatsby ne oferă implicit. Vom construi pe asta pentru a configura pluginul nostru aici:

 Module.exports = {
 Sitemetadata: {
  Titlu: "Starter implicit GATSBY",
 },
 Plugins: [
  "gatsby-plugin-react-casca",
  {
   Rezolvați: "GATSBY-SOURCE-WORDPRESS",
   Opțiuni: {
    baseurl: "My-wordpress-site.com",
    Protocol: "https",
    Hostingwpcom: FALSE,
    UseAcf: TRUE,
    searchandreplacecontenlls: {{
     Sourceurl: "https://my-wordpress-site.com",
     înlocuireRll: "https://my-static-site.com",
    }
   },
  },
 ],
}

A funcționat?

Puteți verifica prin deschiderea terminalului, tastând GATSBY se dezvoltă și urmăriți ce se întâmplă. Fii avertizat! Chiar dacă ați primit setările corecte, veți obține oricum anumite avertismente - acest lucru poate fi GATSBY caută conținut pe care nu l-ați scris încă.

Acum puteți vizualiza implicit Gatsby-Starter în browser.

http: // localhost: 8000 /

Vizualizați GraphIQL, un IDE în browser, pentru a explora datele și schema site-ului dvs.

http: // localhost: 8000 / ___ grafql

Rețineți că construcția de dezvoltare nu este optimizată. Pentru a crea o construcție de producție, utilizați GATSBY BUILD.

În cazul în care Statorul implicit GATSBY (dreapta) nu este ceea ce primiți, verificați site-ul WordPress nu este pe un subdomeniu, că este cu siguranță utilizarea HTTPS sau HTTP și că aveți același lucru în setările dvs.

Acum putem merge la http: // localhost: 8000 / și să vedeți site-ul nostru Gatsby!

Putem interoga datele noastre?

S-ar putea să fi observat că nu există un conținut WordPress aici. Acest lucru se datorează faptului că nu i-am spus lui Gatsby ce să facă încă cu ea. Înainte de a face acest lucru, să verificăm doar că am primit conținutul nostru la dispoziția lui Gatsby. Pentru a face acest lucru, vizitați această adresă URL:

http: // localhost: 8000 / ___ grafql

Acest instrument încorporat este numit grafiql și este o altă putere secretă a lui Gatsby.

Graficul este similar cu odihna: este o modalitate de a interoga datele. Dar cu GraphQL, puteți interacționa cu datele dvs. mult mai ușor. Graphiql (un IDE vizual pentru GraphQI) ne poate arăta unele dintre aceste trucuri. Pe panoul din stânga, încercați să introduceți următoarele:

 {{{{{
 AllordPressPost {
  margini {
   nod {
    ID.
    melc
    stare
    șablon
    format
   }
  }
 }
}

Acest lucru ar putea să arate un pic ca Json, dar nu este. Este o nouă limbă de interogare pe care o cred că o zi va înlocui în mare măsură odihna ca o modalitate de a comunica cu API-urile.

Ce ați primit când ați apăsat Ctrl + Introduceți în GraphIQL? Sperăm că ați văzut postările dvs. WordPress și pagina din partea dreaptă a ecranului.

De fapt, vom folosi această interogare în următorul nostru pas, așa că păstrați-l la îndemână! S-ar putea să doriți să vedeți ce alte date puteți obține cu GraphIQL în timp ce sunteți aici. Dacă doriți să faceți acest lucru, încercați să mutați cursorul în jurul și să introduceți fie CTRL + spațiu și / sau ctrl + ENTER. Care vor dezvălui alte grupuri de conținut.

Deci, acum avem conținut în Gatsby. Apoi, trebuie să-l afișăm.

Afișați mesajele noastre

Use WordPress as a headless CMS: Gatsby development 404 screen — Gatsby Development 404 Pagina care arată toate postările noastre WordPress

Pentru acest pas următor vom face să folosim GATSBY-NODE.JS. fişier.

GATSBY-NODE.JS. Este un fișier pe care îl puteți utiliza pentru a interacționa cu "Nodul API" al lui Gatsby. Aici puteți controla modul în care site-ul dvs. este generat și creați pagini, postări și multe altele.

Vom scrie câteva instrucțiuni aici pentru a le spune lui Gatsby ce să facă cu datele noastre:

 Calea constantă = necesită ("calea");

Exports.Createpages = ({grafql, limitecreator}))
= & gt; {
 const {createpage} = limitecreators
 Returnați o promisiune nouă ((rezolvați, respingeți) = & gt; {
  GraphQL (
   `
   {
    AllordPressPost {
     margini {
      nod {
       ID.
       melc
       stare
       șablon
       format
      }
     }
    }
   }
  `
 ). Atunci (rezultatul = & gt; {
   dacă (rezultat.errors) {
    consola.log (rezultat.errors)
    Respingeți (rezultatul.errors)
   }

   const posttemplate = calea.resa (`./src/templates/
post.js`)

   rezultat.Data.allWordPressPost.eges.Forech (Edge = & GT; {
    crează pagină({
     Cale: `/ $ {endge.node.slug} /`,
     Componenta: Posttemplate,
     Context: {
      ID: EDGE.NODE.ID,
     },
    })
   })
   rezolva()
  })
 })
}

Acest cod creează pagini din interogarea noastră GraphQL și pentru fiecare pagină va folosi un șablon pe care l-am definit ( /src/templates/post.js. ). Deci, în continuare, trebuie să creăm acel fișier!

Creați post șablon

În interiorul / dosarului / dosarului, creați un dosar numit șabloane și un fișier din interiorul care se numește post.js. . Adăugați la acesta acest cod:

 Importul reacționează de la "reaction"
Casca de import din "React-casca"

Posttemplate de clasă extinde react.component {
 Render () {
  const post = the.props.data.wordpressPost;
  const slug = the.props.data.wordpressPost.slug;

  întoarcere (
   & Lt; div & gt;
   & lt; casca Titlu = {`$ {titlestring} | $ {sitetitle} `} / & gt;
   & lt; h1 periculosusstinnerhtml = {{__html: post.title}} / & gt;
   & lt; div periculos periculosinnerNhtml = {{__html: post.content}} / & gt;
   & lt; / div & gt;
  )
 }
}

Exportați tabloul implicit

Exportați const interogare = graficul "
 Query CurrentPost ($ ID: String!) {
  WordPressPost (ID: {EQ: $ id}) {
   titlu
   conţinut
   melc
  }
  site {
   Sitemetadata {
    titlu
   }
  }
}

Aceasta utilizează o altă interogare GraphQL pentru a obține date despre postarea specificată a fost alimentată de către GATSBYNODE.JS. Fișier, apoi utilizează reacția pentru a face acest lucru în browser.

Dacă doriți să vedeți rapid o listă a tuturor postărilor dvs., puteți scrie http: // localhost: 8000 / a în bara de adrese a browserului dvs. Acest lucru vă va duce la o pagină de dezvoltare 404, care afișează toate postările dvs. Faceți clic pe unul pentru ao vizita!

Pasii urmatori

Am zgâriat suprafața cum să folosim WordPress ca un CMS fără cap și sper că v-am introdus în unele concepte și instrumente interesante pe care le-ați putea folosi și experimentați în viitor.

Mai sunt mult mai multe despre această poveste și colegii mei și am blogged despre el extensiv la Copac indigo. . De asemenea, am scris mai multe despre blogul meu personal, Reverie delicioasă .

Vă rugăm să păstrați legătura cu mine prin intermediul canalelor și pe Twitter pentru a auzi mai multe evoluții interesante din lumea CMS fără cap!

Acest articol a fost publicat inițial în numărul 308 din net , cea mai bună revistă din lume pentru designeri și dezvoltatori web. Cumpărați problema 308 aici sau Abonați-vă aici .

Articole similare:

40 Tutoriale WordPress Brilliant
6 sfaturi de top pentru succesul CRO în WordPress
10 pluginuri de cuvinte mari pentru designeri

Utilizați WordPress ca o CMS fără cap

Noțiuni de bază

Utilizați un generator static al site-ului

Obținerea conținutului nostru

A funcționat?

Putem interoga datele noastre?

Afișați mesajele noastre

Creați post șablon

Pasii urmatori

să - Cele mai populare articole

Cum se pregătește un fișier pentru imprimare

Cum să aduceți un caracter 2D la viață în VR

Reconstruit un site Flash 2004 pentru 2018

Plante în Houdini

Cum se utilizează instrumente digitale pentru a crea un aspect trasat manual

Conversia unei fotografii într-un set VR

Introducere în testarea utilizabilității

Cum se obține mai mult din texturi digitale

Categorii