Utilisez WordPress comme un CMS sans tête

Sep 11, 2025

Comment

[dix] [dix] [dix]

[dix]

J'ai d'abord entendu parler de l'approche CMS sans tête dans une conversation que j'ai vue des villes de Twin Drupal. J'ai aimé l'idée d'une séparation des préoccupations entre le contenu de la création et la visualisation.

[dix]

Les meilleurs services d'hébergement Web en 2019

[dix]

J'avais déjà expérimenté la facilité avec laquelle un serveur peut descendre, en supprimant tous les sites, conduisant à des minutes ou à des heures de panique d'arrêt cardiaque (il y avait 24 sur le mien). J'avais également vu comment un site basé sur la CMS monolithique pourrait subir un compromis de sécurité et prendre beaucoup d'efforts pour réparer (cela m'a pris plus de deux jours de travail non rémunéré). Pour une gamme de hébergement Web Options de fournisseur, consultez notre guide.

23 grands exemples de sites Web de WordPress

J'avais vu les avantages des CDNS (réseaux de livraison de contenu) qui peuvent stocker vos fichiers image, audio et vidéo sur des serveurs optimisés pour une livraison rapide et peuvent dupliquer ces fichiers à travers le monde pour une livraison rapide à ces régions si nécessaire. Et si l'ensemble de votre site Web pourrait bénéficier de cette approche?

Tu auras besoin de… [dix]

● Un ordinateur avec une connexion Internet (EvLS)
● Un éditeur de code (Atom ou VS Code)
● une coque / borne de ligne de commande
● Une version récente de Node.js installée (vous pouvez télécharger et amp; installer ici )
● Un site WordPress pour obtenir du contenu. Si vous n'en avez pas, vous pouvez utiliser la plate-forme WordPress.com ou cette Pack de construction Heroku .
● les fichiers source de github .

[dix] [dix]

Commencer

WordPress sort de la boîte avec l'API de repos et c'est ce que nous allons utiliser pour interroger vos données. Donc, nous n'avons pas vraiment besoin de rien d'autre! Notre site d'affichage est totalement séparé de notre site de contenu. Nous n'aurons donc pas besoin Thèmes WordPress ou toute autre personnalisation en dehors de quelques plugins (facultatifs). Bien que bien sûr, vous pouvez les ajouter si vous voulez.

L'exception est si vous avez besoin de champs de méta sur mesure pour des zones de contenu supplémentaires. Vous utilisez probablement des champs personnalisés avancés pour le faire; Vous pouvez ajouter ces données à l'API WordPress par Installation de ce plugin .

[dix]

Utilisez un générateur de site statique

Use WordPress as a headless CMS: Gatsby starter screen — L'écran de démarrage par défaut Gatsby

Maintenant que nous avons notre source de contenu, allons chercher les données et l'affiche à l'aide d'un générateur de site statique. Mon arme de choix dans ce royaume est Gatsby , un excellent générateur de site statique qui est construit avec JavaScript. (Voir ces Générateur de site Web choix pour des moyens simples de construire un site.)

Si vous recherchez un bon moyen de construire sur vos compétences JavaScript et d'apprendre réagir en restant coincé dans un code, je recommande vivement d'essayer Gatsby de le faire. J'ai beaucoup appris moi-même en jouant avec ça.

Tout d'abord, installons un outil de ligne de commande qui nous permet de créer des sites Gatsby:

npm install -global gatsby-cli

Maintenant, accédez au dossier où vous souhaitez conserver votre site et exécuter cette commande:

gatsby new blog

Cela créera un nouveau dossier appelé «Blog» et installer Gatsby et ses dépendances dans ce dossier. Ouvrez ce dossier dans votre éditeur de texte préféré. Il peut sembler y avoir beaucoup de fichiers là-bas. Ne vous inquiétez pas, nous ne serons que directement éditer le Gatsby-config.js , gatsby-node.js fichiers, et le src Dossier, qui est où nos modèles vivent.

Si vous avez beaucoup de fichiers à stocker, il vaut la peine de mettre à niveau votre stockage en ligne .

Obtenir notre contenu

La première étape que nous voulons prendre consiste à récupérer notre contenu de l'API du site WordPress.

Pour faire ça, nous allons installer Gatsby-Source-Wordpress , un plugin pré-écrit pour WordPress. Cela illustre l'une des principales raisons d'aimer Gatsby - vous pouvez obtenir vos données de différentes sources différentes. Beaucoup de générateurs de sites statiques sont limités à l'utilisation de fichiers de marquage, mais Gatsby est très flexible.

L'écosystème du plugin de Gatsby est très mature. Il existe des charges de méthodes prérogées d'obtenir vos données et beaucoup d'autres fonctionnalités intelligentes qui sont également utiles.

Pour installer le plugin, d'abord modifier le répertoire dans votre nouveau site Gatsby à l'aide de cette commande: blog de CD .

Maintenant, exécutez cette commande: NPM Installer --Save Gatsbysource-Wordpres s.

Une fois que cela est fait, il est temps d'ouvrir le fichier Gatsby-config.js. Vous verrez qu'il y a déjà une configuration de base en place que Gatsby nous donne par défaut. Nous allons construire sur cela pour configurer notre plugin ici:

 module.exports = {
 SitemetaData: {
  Titre: «Starter par défaut Gatsby»,
 },
 Plugins: [
  'Gatsby-plugin-réact-casque',
  {
   résolution: "Gatsby-Source-WordPress",
   Options: {
    baseurl: "my-wordpress-site.com",
    Protocole: "https",
    hostingwpcom: faux,
    ueacf: vrai,
    SearchandReplacecontenturls: {
     SourceRL: "https://my-wordpress-site.com",
     RemplacementL: "https://my-static-site.com",
    }
   },
  },
 ],
}

Cela a-t-il fonctionné?

Vous pouvez vérifier en ouvrant votre terminal, en tapant Gatsby développer et regarder ce qui se passe. Être averti! Même si vous avez correctement vos paramètres, vous obtiendrez des avertissements de toute façon - cela peut être Gatsby à la recherche de contenu que vous n'avez pas encore écrit.

Vous êtes maintenant capable de visualiser Gatsby-Starter-Starter-Par défaut dans le navigateur.

[dix]


               http: // localhost: 8000 /

Afficher GraphIQL, une IDE dans le navigateur, pour explorer les données et le schéma de votre site.


  http: // localhost: 8000 / ___ graphql

Notez que la construction de développement n'est pas optimisée. Pour créer une construction de production, utilisez Gatsby Build.

Si le Stare (à droite) Gatsby n'est pas ce que vous obtenez, vérifiez que votre site WordPress n'est pas sur un sous-domaine, qu'il utilise définitivement HTTPS ou HTTP et que vous avez la même chose dans vos paramètres.

Maintenant, nous pouvons aller à http: // localhost: 8000 / et voir notre site Gatsby!

Pouvons-nous interroger nos données?

Vous avez peut-être remarqué qu'il n'y a pas de contenu WordPress ici. C'est parce que nous n'avons pas dit à Gatsby qu'est-ce de faire avec ça. Avant de faire cela, vérifions simplement que nous avons eu notre contenu disponible pour Gatsby. Pour ce faire, visitez cette URL:


  http: // localhost: 8000 / ___ graphql

Cet outil intégré s'appelle graphiql et est une autre puissance secrète de Gatsby.

GraphQL est similaire au repos: c'est un moyen de interroger des données. Mais avec GraphQL, vous pouvez interagir avec vos données beaucoup plus facilement. GRAPHIQL (une IDE visuelle pour GraphQL) peut nous montrer certaines de ces astuces. Sur le panneau de gauche, essayez de taper ce qui suit:

 {
 toutwordpresspost {
  bords {
   noeud {
    identifiant
    limace
    statut
    modèle
    format
   }
  }
 }
}

Cela pourrait ressembler un peu comme JSON, mais ce n'est pas le cas. C'est une nouvelle langue de requête que je pense qu'un jour remplacera largement le repos comme moyen de communiquer avec des API.

Qu'avez-vous eu lorsque vous avez appuyé sur Ctrl + Entrée dans GraphIQL? Espérons que vous aurez vu vos messages WordPress et votre page sur le côté droit de l'écran.

Nous allons réellement utiliser cette requête dans notre prochaine étape, alors gardez-le à portée de main! Vous voudrez peut-être voir quelles autres données vous pouvez obtenir avec graphiql pendant que vous êtes ici. Si vous voulez faire cela, essayez de déplacer le curseur autour de vous et de taper Ctrl + Space et / ou Ctrl + Entrée. Cela révélera d'autres groupes de contenu.

Donc, nous avons maintenant du contenu dans Gatsby. Ensuite, nous devons l'afficher.

Afficher nos messages

Use WordPress as a headless CMS: Gatsby development 404 screen — Gatsby Development 404 page montrant tous nos messages WordPress

Pour cette prochaine étape, nous allons utiliser le gatsby-node.js déposer.

gatsby-node.js est un fichier que vous pouvez utiliser pour interagir avec "API de nœud" de Gatsby. Ici, vous pouvez contrôler comment votre site est généré et crée des pages, des messages et plus encore.

Nous allons écrire quelques instructions ici pour dire à Gatsby Que faire avec nos données:

Le chemin de const = exiger (`path`);

ExporterS.CreatePages = ({GRAPHQL, LIENTIONNETRATECRÈRES})
= & gt; {
 const {Creeoipage} = BoundatageCreators
 retourner nouvelle promesse ((résolution, rejet) = & gt; {
  graphql (
   `
   {
    toutwordpresspost {
     bords {
      noeud {
       identifiant
       limace
       statut
       modèle
       format
      }
     }
    }
   }
  `
 ) .Ce (résultat = & gt; {
   Si (résultat.Errors) {
    console.log (résultat.Errors)
    Rejeter (résultat.Errors)
   }

   const posttemplable = chemin.Resolve (`./src/templates/
post.js`)

   résultat.data.allwordwordpost.edges.foreach (bord = & gt; {
    créer une page({
     Chemin: `/ $ {EDGE.NODE.SLUG} /`,
     Composant: Postemplate,
     le contexte: {
      ID: EDGE.NODE.ID,
     },
    })
   })
   résoudre()
  })
 })
}

Ce code crée des pages de notre requête graphql et pour chaque page, cela utilisera un modèle que nous avons défini ( /src/templates/post.js ). Alors ensuite, nous devons créer ce fichier!

Créer un modèle de poteau

À l'intérieur du / src / dossier, créez un dossier appelé modèles et un fichier à l'intérieur de cela. post.js . Ajouter ce code:

 Importer réagir de "réagir"
Casque d'importation de 'réact-casque'

La classe posttemplet étend Reall.component {
 Render () {
  const post = this.props.data.wordpresspost;
  const slug = ceci.props.data.wordresspost.slug;

  revenir (
   & lt; div & gt;
   & lt; casque title = {`$ {titletring} | $ {sitetertitle} `} / & gt;
   & lt; h1 dangereuxsetinnerhtml = {{{__html: post.title}} / & gt;
   & lt; div dangereuxsetinnerhtml = {{__html: post.content}} / & gt;
   & lt; / div et gt;
  )
 }
}

Exporter un pageTemplate par défaut

Export const requête = graphql`
 Query CoururalPost ($ ID: String!) {
  WordPresspost (ID: {EQ: $ id}) {
   Titre
   teneur
   limace
  }
  placer {
   SitemetaData {
    Titre
   }
  }
}

Cela utilise une requête graphque différente pour obtenir des données sur le poste spécifique qu'il a été alimenté par le gatsbynode.js Le fichier, puis utilise réagir pour rendre cela dans le navigateur.

Si vous souhaitez voir rapidement une liste de tous vos messages, vous pouvez taper http: // localhost: 8000 / a dans la barre d'adresse de votre navigateur. Cela vous mènera à une page de développement 404, qui répertorie tous vos messages. Cliquez sur un pour le visiter!

Prochaines étapes

Nous avons gratté la surface de la façon d'utiliser WordPress en tant que CMS sans tête et j'espère que je vous ai présenté des concepts et des outils intéressants que vous pourrez peut-être utiliser et expérimenter à l'avenir.

Il y a beaucoup plus à cette histoire et à mes collègues et j'ai blogué à ce sujet. Arbre indigo . J'ai aussi écrit plus sur mon blog personnel, Rêverie délicieuse .

Veuillez rester en contact avec moi via ces chaînes et sur Twitter pour entendre des développements plus excitants dans le monde du CMS sans tête!

Cet article a été publié à l'origine dans le numéro 308 de rapporter , le magazine le plus vendu au monde pour les concepteurs et les développeurs Web. Achetez le numéro 308 ici ou S'abonner ici .

Articles Liés:

40 Tutoriels WordPress Brilliant
6 Tops pour le succès de la CRO dans WordPress
10 grands plugins WordPress pour les concepteurs

[dix] [dix]

[dix]

Utilisez WordPress comme un CMS sans tête

Commencer

Utilisez un générateur de site statique

Obtenir notre contenu

Cela a-t-il fonctionné?

Pouvons-nous interroger nos données?

Afficher nos messages

Créer un modèle de poteau

Prochaines étapes

Comment - Most Popular Articles

Comment affiner votre portefeuille de conception

Comprendre le traitement des langues naturelles

Jump Début Réagissez Natif avec Expo

Stitch and Composit 360 Footage

5 conseils pour la sculpture en double-quick Time

Préparez votre travail pour l'impression 3D: 8 conseils de dessus

Comment obtenir plus de gifs

Comment obtenir votre modèle de zbrush en maya

Catégories