WordPress a été le système de gestion de contenu de prédilection des développeurs et des non-développeurs pour construire et créer rapidement des sites web époustouflants.
L’utilisation d’une architecture micro-service, où l’administration de gestion de contenu est séparé de l’interface publique, permet un contrôle maximal des deux « extrémités » Ce problème de séparation est ce que les systèmes de gestion de contenu headless, y compris les solutions WordPress headless, tentent de résoudre.
Avec une approche headless, les entreprises ont un contrôle plus granulaire sur le backend de gestion de contenu. Elles sont également libres d’utiliser le frontend de leur choix, notamment React, Vue, Angular, etc.
Ce guide explorera en détail WordPress headless, et ce dont il s’agit, quand et pourquoi vous devriez envisager de l’utiliser. Enfin, nous explorerons la création d’un environnement WordPress headless, la construction du frontend avec Vue.js, et le déploiement de WordPress headless en utilisant Kinsta.
Qu’est-ce que WordPress headless ?
WordPress est une application monolithique où les parties backend et frontend sont étroitement liées. C’est dans l’administration (backend) qu’intervient la gestion, où vous pouvez créer, modifier, ajouter et supprimer du contenu, y compris modifier les configurations d’apparence. En revanche, l’interface publique (frontend) est responsable de l’affichage du contenu pour l’utilisateur.
WordPress headless est le terme utilisé pour décrire WordPress découplé. La partie backend (gestion) est séparée de la partie frontend du CMS WordPress. Vous pouvez développer et gérer l’interface publique comme une application autonome avec le framework frontend de votre choix.
Avantages et inconvénients de WordPress headless
Ensuite, nous allons explorer les avantages et les inconvénients de WordPress headless pour vous permettre de mieux comprendre le concept.
Les avantages
Tout d’abord, nous allons commencer par explorer les avantages.
Performances ultra-rapides
À l’ère des applications aux performances super rapides, votre site web ne doit pas prendre plus de quelques secondes pour se charger et éviter de perdre des visiteurs. Comme l’interface publique est séparée de WordPress et qu’elle peut être développée en tenant compte des hautes performances et de l’évolutivité à l’aide d’outils frontend modernes, l’utilisation d’une approche WordPress headless est très bénéfique pour l’expérience utilisateur globale de votre site web.
Contrôle granulaire
Opter pour une architecture headless vous donne plus de contrôle sur la mise en page de votre design, la présentation du contenu et la façon dont les utilisateurs interagissent avec le frontend de votre application. Cela permet également de sécuriser le contenu de votre backend et d’y accéder depuis un emplacement central.
Évolutivité accrue
La mise à l’échelle de WordPress peut parfois être compliquée car vous n’avez pas le contrôle total de tous les composants et codes qui propulsent WordPress, principalement si vous n’êtes pas un développeur. Mais avec le découplage de WordPress, il est facile de mettre à l’échelle chaque partie de manière isolée, et vous pouvez facilement détecter quelle partie a besoin d’être mise à l’échelle.
Sécurité renforcée
On ne soulignera jamais assez les avantages de WordPress headless en matière de sécurité, car WordPress découplé présente des avantages de haute sécurité contre les pirates et les attaques DDoS. L’approche de WordPress headless rend difficile l’accès des pirates à vos données sensibles du backend puisqu’il est séparé de votre frontend, le site web tourné vers l’utilisateur.
Conception légère
Vous aurez plus de contrôle sur la structure et la mise en page de votre conception frontend. En outre, vous pouvez travailler sur le frontend avec plus de liberté et un design personnalisé ; grâce aux appels d’API REST, vous pourrez profiter d’outils web modernes et les déployer sur le frontend.
Publication de contenu multicanal
Comme WordPress headless utilise un système basé sur l’API pour communiquer votre contenu à l’interface publique, vous pouvez afficher votre contenu n’importe où et sur n’importe quelle plateforme, y compris sur l’ordinateur, le site web, les applications mobiles et le kiosque à écran tactile. Il est également possible d’utiliser pleinement la réalité augmentée, la réalité virtuelle et les appareils de l’Internet des objets pour afficher et présenter votre contenu provenant du système basé sur l’API.
Les inconvénients
Nous explorerons les inconvénients du headless plus en profondeur au fur et à mesure, mais ses principaux inconvénients sont les suivants :
- Séparer le backend et le frontend vous donne une charge supplémentaire lorsque vous gérez différentes instances de sites web.
- Cela peut être coûteux à mettre en œuvre car cela nécessite des membres supplémentaires dans votre équipe et un capital supplémentaire pour gérer différentes instances.
- Rendre votre contenu disponible sur différentes plateformes peut entraîner une expérience incohérente pour vos utilisateurs si le contenu n’est pas présenté de manière cohérente sur toutes les plateformes.
Quand WordPress headless n’est peut-être pas la meilleure option
Puisque WordPress headless est une innovation incroyable avec de grands avantages, il y a certaines choses que vous devez garder à l’esprit lorsque vous décidez si vous devezvous lancer ou non.
- WordPress headless tête est très coûteux à entretenir. Vous maintiendrez deux instances différentes d’un même site web, depuis l’infrastructure jusqu’à plusieurs développeurs.
- WordPress headless ne prend pas en charge toutes les fonctionnalités de WordPress. Par exemple, les grandes fonctionnalités de WordPress comme l’éditeur WYSIWYG et l’aperçu en direct ne fonctionneront pas si vous utilisez un frontend séparé.
- Il est plus coûteux de mettre en place un WordPress headless. Par conséquent, gardez toujours à l’esprit son coût accru.
Qui devrait utiliser WordPress headless ?
Vous trouverez ci-dessous les cas les plus appropriés pour lesquels vous pourriez avoir besoin de WordPress headless :
- Vous devriez utiliser WordPress headless si la sécurité de votre site web est votre principale préoccupation et primordiale pour votre entreprise.
- Ensuite, si votre site web n’a pas besoin d’être régulièrement mis à niveau et actualisé, c’est un excellent signe que vous devriez utiliser une installation headless.
- Ensuite, si vous voulez avoir un design personnalisé qu’un thème WordPress ne pourra pas facilement faire, vous voulez pimenter la partie avant de votre site web avec un design unique. Alors, WordPress headless est votre prochaine option.
- Enfin, si vous construisez un site web à courte durée de vie ou un site de démonstration pour des présentations et des tutoriels, alors vous pouvez essayer l’approche headless.
Qui devrait éviter d’utiliser WordPress headless ?
Voici plusieurs cas dans lesquels l’utilisation de WordPress headless n’est pas une bonne option :
- Lorsque votre site web repose uniquement sur des extensions et des fonctionnalités spécifiques qui contrôlent et fonctionnent au mieux avec le frontend de ton application, vous devez vous en tenir à WordPress, sauf si les extensions proposent des options basées sur l’API pour consommer les données.
- Supposons que le codage de votre site web ne vous intéresse pas, ou que votre site web nécessite une maintenance quotidienne, et que vous n’engagez pas un professionnel pour la maintenance de routine en raison de votre faible budget. Dans ce cas, WordPress est une option adaptée pour vous.
- Si vous n’êtes pas un développeur chevronné et que vous voulez créer et gérer seul votre site web, vous devriez utiliser WordPress.
Comment rendre WordPress headless (construire une application) ?
Cette section explorera la construction et le développement d’un blog d’actualités avec WordPress headless pour le backend et Vue 3 comme frontend pour l’utilisateur.
Configuration de WordPress headless avec Devkinsta
Nous développerons le WordPress headless avec DevKinsta, un environnement de développement local WordPress populaire pour concevoir, développer et déployer des sites WordPress depuis le confort de votre machine locale.
DevKinsta est gratuit à vie et vous offre de grands avantages et un grand confort pour développer et créer WordPress avec lui.
Vous pouvez télécharger et installer DevKinsta sur le site officiel et suivre les instructions de la documentation pour commencer.
Comme nous avons déjà installé DevKinsta, nous allons l’ouvrir et suivre l’étape ci-dessous pour configurer notre premier WordPress headless.
Sur le tableau de bord DevKinsta, créez un nouveau site WordPress en utilisant Nginx, MySQL et toute version de WordPress disponible. Vous pouvez aussi importer une instance WordPress existante ou créer une instance WordPress personnalisée depuis le tableau de bord.
Ensuite, donnez un nom à votre instance WordPress nouvellement créée, un identifiant d’admin et un mot de passe, puis cliquez sur Créer et copiez les détails pendant que DevKinsta crée une nouvelle instance WordPress sur votre machine locale.
Ensuite, cliquez sur Ouvrir le site pour ouvrir votre instance WordPress nouvellement créée sur votre navigateur par défaut.
Enfin, vous pouvez vous connecter au tableau de bord d’administration en accédant au lien http://headless-wordpress-news-blog.local/wp-admin et en saisissant les identifiants de connexion admin que vous avez saisis lors de la création de la nouvelle instance.
Notez que nous avons configuré notre WordPress headless localement avec l’URL http://headless-wordpress-news-blog.local avec le frontend hébergé localement sur http://news-blog.local, et nous l’utiliserons tout au long du tutoriel.
Configuration de notre WordPress headless
Ensuite, après vous être connecté à votre tableau de bord WordPress, vous pouvez procéder à l’installation des extensions et à la configuration de votre choix.
Nous désactiverons entièrement le thème pour ce tutoriel et n’accéderons au contenu que via le point de terminaison basé sur l’API REST de WordPress en installant l’extension Simple Website Redirect et en la configurant.
Allez dans Extensions > Ajouter et recherchez l’extension Simple Website Redirect, installez-la et activez-la :
Ensuite, cliquez sur les Réglages de l’extension et saisissez votre URL basée sur le frontend (par exemple http://news-blog.local), cliquez sur les options de réglage avancées et ajoutez les chemins suivants – /wp-admin, /wp-login.php, et /wp-json – à la section Chemins exclus.
Enfin, activez l’extension en sélectionnant Activé dans la liste déroulante État de la redirection:
…et c’est tout !
En outre, si votre API JSON n’est pas activée par défaut lorsque vous vous rendez sur http://headless-wordpress-news-blog.local/wp-json, vous pouvez l’activer en ouvrant vos Permaliens sous Réglages WordPress et en sélectionnant Titre de la publication ou tout autre de ton choix sauf Simple :
Maintenant, lorsque vous allez sur http://headless-wordpress-news-blog.local/wp-json, il devrait vous présenter des données JSON comme ci-dessous :
{
"name": "Headless WordPress News Blog",
"description": "Just another WordPress site",
"url": "http://headless-wordpress-news-blog.local",
"home": "http://headless-wordpress-news-blog.local",
"gmt_offset": "0",
"timezone_string": "",
"namespaces": [
"oembed/1.0",
"wp/v2",
"wp-site-health/v1"
],
"authentication": [
],
"routes": {
"/": {
"namespace": "",
"methods": [
"GET"
],
"endpoints": [
{
"methods": [
"GET"
],
"args": {
"context": {
"default": "view",
"required": false
}
}
}
],
...Configuration de Vue.js (Frontend)
Nous allons utiliser l’outil de développement web Vite pour créer notre application Vue 3 afin de nous connecter à WordPress headless. Vous pouvez en savoir plus sur Vue 3 et les outils de développement Vite.
Dans cet article, nous allons créer un blog d’actualités. Toute la gestion de contenu backend du projet sera développée et hébergée avec notre WordPress headless en utilisant Devkinsta.
Saisissez ces commandes simples :
npm init @vitejs/app news-blog
cd news-blog
npm install
npm run devSi vous avez des problèmes avec les espaces dans votre nom d’utilisateur, essayez d’utiliser :
npx create-vite-app news-blogNotez que nous avons configuré notre application Vue 3 pour écouter http://news-blog.local, mais vous pouvez vous en tenir à l’adresse par défaut http://localhost:3000.
Enfin, ouvrez votre base de code Vue 3 avec l’éditeur de code de votre choix. Nous opterons pour VSCode, et allons nous salir les mains avec des codes.
Consommer l’API de WordPress
Nous avons pris les devants pour développer la partie restante de l’application Vue afin de vous faire gagner du temps de lecture, mais vous pouvez aller de l’avant et cloner le dépôt depuis mon GitHub.
Composant Post de l’application Vue
L’extrait de code ci-dessous montre comment nous mettons en œuvre l’API REST de WordPress avec notre instance Vue pour afficher tous les articles de WordPress headless :
<template>
<section>
<div class="padding-top">
<div class="container inner-padding-top">
<div class="row">
<div class="col-md-12 col-sm-12-col-xs-12 text-center">
<h2 class="lead-title text-uppercase">
Latest Backend Dev. Articles
</h2>
<h3 class="article-subtitle">
Latest Backend Dev. Articles curated daily by the community.
</h3>
</div>
</div>
<div class="row mb-1 mt-5">
<post v-for="(post, i) in posts" :key="i" :post="post" />
</div>
</div>
</div>
<div class="col-md-12 col-sm-12-col-xs-12 text-center mb-5">
<Button link="/posts" class="col p-3">More Articles</Button>
</div>
</section>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState({
posts: (state) => {
return [...state.post.posts].slice(0, 22)
},
}),
},
}
</script>Afficher le composant d’un article unique
L’extrait de code montre comment nous récupérons un seul article avec l’API REST de WordPress avec WordPress headless et l’affichons dans notre instance Vue :
<template>
<div class="card single">
<div class="card-head pl-3 pr-3 pt-3">
<h1 class="title">{{ post.title || '' }}</h1>
<div class="d-flex">
<div class="author d-flex pr-3 pb-4">
<div class="profile mr-2"></div>
<a :href="'/authors/' + post.author.slug" class="subtitle is-6">
{{ post.author.name }}
</a>
</div>
<div class="date_created">
<small class="text-muted">
<li class="fa fa-calendar"></li>
<time
:datetime="$moment(post.date).format('MMMM Do YYYY, h:mm:ss a')"
>{{ $moment(post.date).format('MMMM Do YYYY') }}</time
>
</small>
</div>
</div>
</div>
<div class="block-image pl-3 pr-3 pt-2 mb-3">
<img
v-lazy-load
:data-src="image"
class="card-img-top img-fluid"
:alt="post.title"
/>
</div>
<div class="tags absolute">
<a
v-for="category in post.categories"
:key="category.id"
:href="'/categories/' + category.slug"
class="btn-tag"
>
{{ category.title }}
</a>
</div>
</div>
</template>
<script>
import Vue from 'vue'
export default {
name: 'SinglePost',
props: {
post: {
type: [Object, Array],
default: () => {},
},
},
}
</script>Vous trouverez ci-dessous ce qui effectue les appels à l’API de WordPress pour le contenu du backend :
export const actions = {
async getPosts({ commit }, { page, count = 22 }) {
try {
const response = await fetch(
`http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts`
)
const data = await response.json()
if (data) {
commit('setPosts', data)
}
return data
}
},
async getPost({ commit }, id) {
try {
const response = await fetch(
`http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts/${id}`
)
const data = await response.json()
if (data) {
commit('setPost', data)
}
return data
}
},
}Déploiement de WordPress headless avec Kinsta
Enfin, le déploiement de votre WordPress headless est rendu très facile avec DevKinsta en utilisant le service d’hébergement Kinsta.
Pour déployer votre WordPress headless sur Kinsta, cliquez sur le bouton Pousser en staging dans votre tableau de bord DevKinsta et connectez-vous à Kinsta avec vos identifiants de connexion.
Vous pouvez apprendre à pousser les changements vers l’environnement de staging pour déployer votre WordPress headless tête vers les services d’hébergement Kinsta en un seul clic.
Enfin, vous pouvez déployer votre instance Vue.js chez l’hébergeur cloud de votre choix. Assurez-vous de mettre à jour votre point de terminaison WordPress headless en conséquence pour tester votre application dans un environnement de production.
Résumé
WordPress headless tête et les avantages qui en découlent sont là pour rester pendant un certain temps. Sa popularité ne fera que croître à mesure que les développeurs et les propriétaires de sites comprendront les avantages d’une option headless.
Dans ce guide, nous vous avons présenté les avantages, les bénéfices et les inconvénients de WordPress headless, et nous vous avons montré comment construire et déployer votre premier WordPress headless avec DevKinsta. Vous êtes maintenant sur la bonne voie pour avoir votre implémentation de WordPress headless.
Quels sont vos conseils pour déployer un site WordPress headless ? Partagez-les dans la section des commentaires !
Je suis un ingénieur logiciel et un créateur de contenu orienté vers la construction de produits performants et innovants en suivant les meilleures pratiques et les normes de l'industrie. J'aime aussi écrire à ce sujet sur Masteringbackend.com. Suivez-moi sur X, LinkedIn et About Me.
Laisser un commentaire