Usa WordPress come un CMS senza testa

Sep 14, 2025

Come si fa

Ho sentito per la prima volta dell'approccio CMS senza testa in un discorso che ho visto da Twin Cities Drupal. Mi è piaciuta l'idea di una separazione delle preoccupazioni tra il contenuto di creazione e la visualizzarlo.

I migliori servizi di web hosting nel 2019

Avevo già sperimentato quanto facilmente un server possa scendere, estraendo tutti i siti su di esso, portando a minuti o ore di panico a cuore (c'erano 24 sui miei). Avevo anche visto come un sito basato su cm monolitico potrebbe subire un compromesso di sicurezza e prendere un sacco di sforzi per riparare (che mi ci sono voluti più di due giorni di lavoro non retribuito). Per una gamma di web hosting Opzioni del provider, controlla la nostra guida.

23 Grandi esempi di siti Web WordPress

Avevo visto i vantaggi dei CDN (reti di consegna dei contenuti) che possono memorizzare i file di immagini, audio e video sui server ottimizzati per la consegna rapida e può duplicare quei file in tutto il mondo per la consegna rapida a tali regioni, se necessario. Cosa succede se tutto il tuo sito web potrebbe beneficiare di questo approccio?

Avrai bisogno…

● Un computer con una connessione Internet (OVV)
● Un editor di codice (codice Atom o vs)
● Una gusci di riga di comando / terminale
● Una versione recente di Node.js installata (è possibile scaricare & amp; installare Qui )
● Un sito WordPress per ottenere il contenuto da. Se non ne hai uno, puoi usare la piattaforma WordPress.com o questo Heroku Build Pack. .
● I file di origine da GitHub. .

Iniziare

Wordpress viene fuori dalla scatola con l'API di riposo e questo è ciò che dovremo usare per interrogare i tuoi dati. Quindi non abbiamo davvero bisogno di altro! Il nostro sito di visualizzazione è totalmente separato dal nostro sito di contenuto, quindi non avremo bisogno Temi di wordpress. o qualsiasi altra personalizzazione al di fuori di alcuni (opzionali) plugin. Anche se ovviamente puoi aggiungerli se vuoi.

L'eccezione è se hai bisogno di campi personalizzati di meta per aree di contenuto extra. Probabilmente stai usando campi personalizzati avanzati per farlo; Puoi aggiungere tali dati all'API di WordPress di Installazione di questo plugin. .

Utilizzare un generatore di siti statico

Use WordPress as a headless CMS: Gatsby starter screen — Lo schermo di avviamento predefinito Gatsby

Ora che abbiamo la nostra fonte di contenuto, prendiamo i dati e recuperamo i dati utilizzando un generatore di siti statico. La mia arma preferita in questo regno è Gatsby. , un eccellente generatore di siti statici che è costruito con JavaScript. (Vedi questi. Builder del sito web scelga per semplici modi per costruire un sito.)

Se stai cercando un buon modo per costruire le tue abilità JavaScript e imparare reagire rimanendo bloccato in qualche codice, consiglio vivamente di provare Gatsby di farlo. Ho imparato molto da solo giocando con esso.

Innanzitutto, installiamo uno strumento di riga di comando che ci consente di creare siti Gatsby:

npm install -global gatsby-cli

Ora, vai alla cartella in cui vuoi mantenere il tuo sito ed eseguire questo comando:

gatsby new blog

Ciò creerà una nuova cartella chiamata "Blog" e installa Gatsby e le sue dipendenze a questa cartella. Apri questa cartella nel tuo editor di testo preferito. Ci potrebbe sembrare un sacco di file lì. Non preoccuparti, ci movigliamo direttamente direttamente gatsby-config.js. , gatsby-node.js. file e il src. Cartella, che è dove vivono i nostri modelli.

Se hai molti file da memorizzare, vale la pena aggiornando il tuo deposito cloud. .

Ottenere i nostri contenuti

Il primo passo che vogliamo prendere è recuperare i nostri contenuti dall'API del sito WordPress.

Per farlo, stiamo per installare Gatsby-source-wordpress , un plug-in preaggi per WordPress. Questo illustra uno dei motivi principali che amo Gatsby - puoi ottenere i tuoi dati da una varietà di fonti diverse. Un sacco di generatori di siti statici sono limitati all'utilizzo di file di markdown, ma Gatsby è molto flessibile.

L'ecosistema del plugin di Gatsby è molto maturo. Ci sono un sacco di modi preaggi per ottenere i tuoi dati e molte altre funzionalità intelligenti che arriva anche in modo utile.

Per installare il plugin, prima modifica della directory nel nuovo sito Gatsby utilizzando questo comando: Blog del cd. .

Ora esegui questo comando: NPM Installa --Save GATSBYSOURCE-PRESES S.

Una volta fatto, è ora di aprire il file Gatsby-config.js. Vedrai che c'è già qualche configurazione di base in atto che Gatsby ci dà per impostazione predefinita. Ci costruiremo su questo per configurare il nostro plugin qui:

 Module.Exports = {
 Sitemetatata: {
  Titolo: 'Avviatore predefinito Gatsby',
 },
 Plugin: [
  'Gatsby-plugin-react-casco',
  {
   Risolvi: "Gatsby-source-wordpress",
   opzioni: {
    Baseurl: "my-wordpress-site.com",
    Protocollo: "https",
    hostingwpcom: falso,
    USEACF: TRUE,
    SearchandReplaceContentls: {
     Sourceurl: "https://my-wordpress-site.com",
     Sostituzione Sostituzione: "https://my-static-site.com",
    }
   },
  },
 ]
}

Ha funzionato?

Puoi controllare aprendo il terminale, digitando Gasby sviluppa e guarda cosa succede. Essere avvertito! Anche se hai le tue impostazioni corrette, riceverai comunque alcuni avvertimenti - questo potrebbe essere Gatsby in cerca di contenuti che non hai ancora scritto.

Ora sei in grado di visualizzare Gatsby-Starter-Default nel browser.

  http: // localhost: 8000 /

Visualizza GRAPHIQL, un IDE IN-BROWSER, per esplorare i dati e lo schema del tuo sito.

  http: // localhost: 8000 / ___ graphql

Si noti che la build di sviluppo non è ottimizzata. Per creare una produzione di produzione, utilizzare Gatsby Build.

Se il cacciatore predefinito Gatsby (a destra) non è quello che stai ottenendo, controlla il tuo sito WordPress non è su un sottodominio, che sta sicuramente utilizzando HTTPS o HTTP e che hai lo stesso nelle tue impostazioni.

Ora possiamo andare su http: // localhost: 8000 / e vedi il nostro sito Gatsby!

Possiamo interrogare i nostri dati?

Potresti aver notato che non ci sono contenuti di wordpress qui. Questo perché non abbiamo già detto a Gatsby cosa fare con esso. Prima di farlo, controlliamo solo che abbiamo effettivamente ottenuto i nostri contenuti disponibili per Gatsby. Per farlo, visita questo URL:

  http: // localhost: 8000 / ___ graphql

Questo strumento integrato si chiama graphiql ed è un altro potere segreto di Gatsby.

Graphql è simile a riposo: è un modo per interrogare i dati. Ma con Graphql, puoi interagire con i tuoi dati molto più facilmente. Graphiql (un IDE visivo per graphql) può mostrarci alcuni di questi trucchi. Sul pannello di sinistra, prova a digitare quanto segue:

 {
 allwordpresspresspost {
  bordi {
   nodo {
    id.
    slug.
    stato
    modello
    formato
   }
  }
 }
}

Questo potrebbe sembrare un po 'come JSON ma non lo è. È un nuovo linguaggio di query che penso che un giorno sostituisca in gran parte il resto come un modo per comunicare con le API.

Cosa hai ricevuto quando hai premuto Ctrl + Invio in GraphiQL? Speriamo che tu abbia visto i tuoi post di wordpress e pagina sul lato destro dello schermo.

In realtà useremo questa query nel nostro prossimo passo, quindi tienilo a portata di mano! Potresti voler vedere quali altri dati puoi ottenere con graphiql mentre sei qui. Se si desidera farlo, prova a spostare il cursore intorno e digitando ctrl + spazio e / o ctrl + enter. Che rivelerà altri gruppi di contenuti.

Quindi, ora abbiamo contenuti a Gatsby. Quindi, dobbiamo visualizzarli.

Mostra i nostri post

Use WordPress as a headless CMS: Gatsby development 404 screen — GATSBY Sviluppo 404 Pagina che mostra tutti i nostri post di WordPress

Per questo prossimo passo, faremo uso del gatsby-node.js. file.

gatsby-node.js. È un file che puoi usare per interagire con il "NODE API" di Gatsby. Qui puoi controllare come viene generato il tuo sito e crea pagine, post e altro ancora.

Scriveremo alcune istruzioni qui per dire a Gatsby cosa fare con i nostri dati:

Const Path = richiedere (`percorso»);

Exports.createPages = ({graphql, boundationcrears})
= & GT; {
 Cost {createpage} = BountactionCrears
 restituire la nuova promessa ((risoluzione, rifiutare) = & gt; {
  graphql (
   `
   {
    allwordpresspresspost {
     bordi {
      nodo {
       id.
       slug.
       stato
       modello
       formato
      }
     }
    }
   }
  `
 ) .then (risultato = & gt; {
   if (Result.errors) {
    console.log (risultato.errors)
    respingere (risultato.errors)
   }

   Cost PostTemplate = percorso.Resolvi (`./src/templates/
Post.js`)

   risultato.Data.allwordpressPost.edge.Fieach (Edge = & GT; {
    crea pagina({
     Percorso: `/ $ {Edge.node.slug} /`,
     Componente: PostTemplate,
     contesto: {
      ID: bordo.node.id,
     },
    })
   })
   risolvere()
  })
 })
}

Questo codice crea pagine dalla nostra query graphql e per ogni pagina utilizzerà un modello che abbiamo definito ( /src/templates/post.js. ). Quindi, allora abbiamo bisogno di creare quel file!

Crea modello post.

All'interno della cartella / src / cartella, creare una cartella chiamata modelli e un file all'interno che si chiama post.js. . Aggiungi a questo codice:

 Importa reagire da "reagire"
Importa il casco da "react-casco"

La classe PostTemplate si estende reactchonent {
 rendere () {
  Const Post = This.Props.Data.wordpressPost;
  Cost Slug = this.props.data.wordpresspost.slug;

  ritorno (
   & lt; div & gt;
   & lt; Titolo del casco = {`$ {Titlestring} | $ {setetitle} `} / & gt;
   & lt; h1 pericolosamenteInnerhtml = {{__html: post.title}} / & gt;
   & lt; div pericolosiinsinnerhtml = {{__html: post.content}} / & gt;
   & lt; / div & gt;
  )
 }
}

Esporta PageTemplate predefinita

Esporta query const = graphql`
 Query CurrentPost ($ ID: stringa!) {
  WordPressPost (ID: {EQ: $ ID}) {
   titolo
   soddisfare
   slug.
  }
  posto {
   sitemetadata {
    titolo
   }
  }
}

Questo utilizza una query graphql diversa per ottenere dati sul post specifico è stato alimentato dal gatsbynode.js. file, quindi utilizza reagire per renderlo nel browser.

Se vuoi vedere rapidamente un elenco di tutti i tuoi post, puoi digitare http: // localhost: 8000 / a nella barra degli indirizzi del tuo browser. Questo ti porterà a uno sviluppo 404 pagina, che elenca tutti i tuoi post. Clicca su uno per visitarlo!

Prossimi passi

Abbiamo graffiato la superficie di come usare Wordpress come CMS senza testa e spero di averti presentato ad alcuni concetti e strumenti interessanti che potresti essere in grado di utilizzare e sperimentare in futuro.

C'è molto di più per questa storia e i miei colleghi e io abbiamo bloggato ampiamente Indigo Tree. . Ho anche scritto di più sul mio blog personale, Deliziosa reverie .

Si prega di tenere in contatto con me attraverso quei canali e su Twitter per ascoltare sviluppi più entusiasmanti nel mondo dei CMS senza testa!

Questo articolo è stato originariamente pubblicato in emissione 308 di netto , la rivista best-seller del mondo per web designer e sviluppatori. Comprare il problema 308 qui o Iscriviti qui .

Articoli Correlati:

40 tutorial di wordpress brillanti
6 migliori consigli per il successo di CRO in WordPress
10 grandi plugin di wordpress per i progettisti

Usa WordPress come un CMS senza testa

Iniziare

Utilizzare un generatore di siti statico

Ottenere i nostri contenuti

Ha funzionato?

Possiamo interrogare i nostri dati?

Mostra i nostri post

Crea modello post.

Prossimi passi

Come si fa - Articoli più popolari

Figura disegno: una guida per principianti

Come disegnare un uccello

Come creare simulazioni idriche

Utilizzare Chart.js per trasformare i dati in diagrammi interattivi

Come progettare figure grafiche

6 modi per accelerare la tua modellazione

Come creare una bella pittura del paesaggio acquerello

Accelera la tua modellazione 3D

Categorie