Utilisez WordPress comme un CMS sans tête

Utilisez WordPress comme un CMS sans tête

J'ai entendu parler pour la première fois de l'approche CMS sans tête dans une conférence que j'ai regardée de Twin Cities Drupal. J'ai aimé l'idée d'une séparation des préoccupations entre la création de contenu et sa visualisation.

J'avais déjà fait l'expérience de la facilité avec laquelle un serveur peut tomber en panne, supprimant tous les sites qu'il contient, entraînant des minutes ou des heures de panique à couper le souffle (il y en avait 24 sur le mien). J'avais également vu comment un site monolithique basé sur un CMS pouvait subir un compromis de sécurité et demander beaucoup d'efforts à réparer (cela m'a pris plus de deux jours de travail non rémunéré). Pour une gamme de hébergement Web options du fournisseur, consultez notre guide.

J'avais vu les avantages des CDN (réseaux de diffusion 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 dans ces régions si nécessaire. Et si tout votre site Web pouvait bénéficier de cette approche?

Tu auras besoin de…

● Un ordinateur avec une connexion Internet (obvs)
● Un éditeur de code (Atom ou VS Code)
● Un shell / terminal de ligne de commande
● Une version récente de Node.js installée (vous pouvez télécharger et installer ici )
● Un site WordPress pour obtenir du contenu. Si vous n'en avez pas, vous pouvez utiliser la plateforme WordPress.com ou ceci Pack de construction Heroku .
● Les fichiers source depuis GitHub .

Commencer

WordPress sort de la boîte avec l'API REST et c'est ce que nous allons utiliser pour interroger vos données. Nous n'avons donc 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 sûr, vous pouvez les ajouter si vous le souhaitez.

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

Utiliser un générateur de site statique

Utilisez WordPress comme un CMS sans tête: écran de démarrage Gatsby

L'écran de démarrage par défaut de Gatsby

Maintenant que nous avons notre source de contenu, récupérons les données et affichons-les à 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 construit avec JavaScript. (Voir ces Générateur de site Web sélectionne des moyens simples de créer un site.)

Si vous cherchez un bon moyen de développer vos compétences JavaScript et d'apprendre React en vous bloquant dans du code, je vous recommande vivement d'essayer Gatsby pour le faire. J'ai beaucoup appris moi-même en jouant avec.

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

npm install -global gatsby-cli

Maintenant, accédez au dossier dans lequel vous souhaitez conserver votre site et exécutez cette commande:

gatsby new blog

Cela créera un nouveau dossier appelé «blog» et installera 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. Ne vous inquiétez pas, nous n'éditerons directement que gatsby-config.js , gatsby-node.js fichiers et le src dossier, où se trouvent nos modèles.

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 faire est de récupérer notre contenu à partir de l'API du site WordPress.

Pour ce faire, nous allons installer gatsby-source-wordpress , un plugin pré-écrit pour WordPress. Cela illustre l'une des principales raisons pour lesquelles j'aime Gatsby: vous pouvez obtenir vos données à partir de différentes sources. De nombreux générateurs de sites statiques sont limités à l'utilisation de fichiers Markdown, mais Gatsby est très flexible.

L'écosystème de plugins de Gatsby est très mature. Il existe de nombreuses façons pré-écrites d'obtenir vos données et de nombreuses autres fonctionnalités intelligentes qui sont également utiles.

Pour installer le plugin, changez d'abord de répertoire dans votre nouveau site Gatsby en utilisant cette commande: blog cd .

Maintenant, exécutez cette commande: npm install --save gatsbysource-wordpres s.

Une fois que c'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 nous appuyer sur cela pour configurer notre plugin ici:

module.exports = { siteMetadata: { title: 'Gatsby Default Starter', }, plugins: [ 'gatsby-plugin-react-helmet', { resolve: 'gatsby-source-wordpress', options: { baseUrl: 'my-wordpress-site.com', protocol: 'https', hostingWPCOM: false, useACF: true, searchAndReplaceContentUrls: { sourceUrl: 'https://my-wordpress-site.com', replacementUrl: 'https://my-static-site.com', } }, }, ], }

Cela a-t-il fonctionné?

Vous pouvez vérifier en ouvrant votre terminal, en tapant gatsby développer et regardez ce qui se passe. Être averti! Même si vos paramètres sont corrects, vous recevrez de toute façon des avertissements - il se peut que Gatsby recherche du contenu que vous n'avez pas encore écrit.

Vous pouvez maintenant afficher gatsby-starter-default dans le navigateur.

http://localhost:8000/

Consultez GraphiQL, un IDE intégré au navigateur, pour explorer les données et le schéma de votre site.

http://localhost:8000/___graphql

Notez que la version de développement n'est pas optimisée. Pour créer une version de production, utilisez gatsby build.

Si le starer par défaut de Gatsby (à droite) 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.

Nous pouvons maintenant aller sur 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 encore dit à Gatsby quoi en faire. Avant de faire cela, vérifions simplement que notre contenu est 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 à REST: c'est un moyen d'interroger des données. Mais avec GraphQL, vous pouvez interagir beaucoup plus facilement avec vos données. GraphiQL (un IDE visuel pour GraphQL) peut nous montrer certaines de ces astuces. Dans le panneau de gauche, essayez de taper ce qui suit:

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

Cela peut ressembler un peu à JSON mais ce n'est pas le cas. C'est un nouveau langage de requête qui, je pense, remplacera en grande partie REST comme moyen de communication avec les API.

Qu'avez-vous obtenu lorsque vous avez appuyé sur ctrl + entrée dans GraphiQL? J'espère que vous aurez vu vos articles et votre page WordPress sur le côté droit de l'écran.

Nous allons en fait utiliser cette requête dans notre prochaine étape, alors gardez-la à 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 et de taper ctrl + espace 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 articles

Utilisez WordPress comme CMS sans tête: écran Gatsby Development 404

Page de développement Gatsby 404 montrant tous nos articles 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 'Node API' de Gatsby. Ici, vous pouvez contrôler la façon dont votre site est généré et créer des pages, des articles et plus encore.

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

const path = require(`path`); exports.createPages = ({ graphql, boundActionCreators }) => { const { createPage } = boundActionCreators return new Promise((resolve, reject) => { graphql( ` { allWordpressPost { edges { node { id slug status template format } } } } ` ).then(result => { if (result.errors) { console.log(result.errors) reject(result.errors) } 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, }, }) }) resolve() }) }) }

Ce code crée des pages à partir de notre requête GraphQL et pour chaque page, il 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 message

Dans le dossier / src /, créez un dossier appelé templates et un fichier à l'intérieur appelé post.js . Ajoutez-y ce code:

import React from 'react' import Helmet from 'react-helmet' class postTemplate extends React.Component { render() { const post = this.props.data.wordpressPost; const slug = this.props.data.wordpressPost.slug; return (

) } } export default pageTemplate export const query = graphql` query currentPost($id: String!) { wordpressPost(id: { eq: $id }) { title content slug } site { siteMetadata { title } } }

Cela utilise une requête GraphQL différente pour obtenir des données sur la publication spécifique qui a été alimentée par le gatsbynode.js fichier, puis utilise React pour le rendre 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 effleuré la surface de la façon d'utiliser WordPress en tant que CMS sans tête et j'espère vous avoir présenté quelques concepts et outils intéressants que vous pourrez peut-être utiliser et expérimenter à l'avenir.

Il y a beaucoup plus dans cette histoire et mes collègues et moi avons beaucoup blogué à ce sujet sur Arbre indigo . J'ai également écrit plus sur mon blog personnel, Délicieuse rêverie .

Veuillez rester en contact avec moi via ces canaux et sur Twitter pour entendre des développements plus passionnants dans le monde des CMS sans tête!

Cet article a été initialement publié dans le numéro 308 de rapporter , le magazine le plus vendu au monde pour les concepteurs et développeurs Web. Achetez le numéro 308 ici ou abonnez-vous ici .

Articles Liés: