Qu’est-ce que WordPress sans tête ? Comment en créer un ? [Didacticiel]

Quels sont les avantages et les inconvénients du CMS sans tête WordPress ?

Headless WordPress présente de nombreux avantages et inconvénients, chacun pouvant affecter votre travail dans différents scénarios. Pour avoir une idée claire, comparons ses avantages et ses inconvénients dans le format tableau de comparaison.

WordPress sans tête est-il bon ?

Si vous ignorez les limitations que nous avons mentionnées précédemment, il existe certains scénarios dans lesquels l'utilisation de WordPress sans tête peut être bénéfique pour vous.

• Si la sécurité de votre site Web est une priorité absolue et que le traitement des données est très sensible ou critique.
• Si vous appréciez une conception personnalisée et des possibilités illimitées sans les contraintes des options de thème limitées de WordPress et que vous recherchez une conception frontale unique, optez pour Headless WordPress.
• Si vous aimez garder votre site Web isolé grâce aux mises à jour et mises à niveau fréquentes de WordPress.
• Si vous souhaitez préparer votre site Web ou votre application pour l’avenir et vous adapter aux nouvelles technologies, tendances et comportements des utilisateurs sans avoir à remanier l’ensemble de votre infrastructure, pensez à WordPress sans tête.
• Une configuration Headless peut être une bonne option si vous recherchez des sites Web de démonstration, des projets à petit ou à court terme ou des didacticiels.

Comment fonctionne WordPress sans tête ?

Tout en parlant de WordPress standard, il est livré avec une interface conviviale et un panneau d'administration facile à utiliser grâce auquel vous pouvez facilement modifier, créer et supprimer du contenu ainsi que gérer le site Web.

Pour le front-end, il propose des milliers d'options de thème combinant des thèmes intégrés ainsi que des thèmes tiers pour créer un site Web visuellement attrayant à l'écran.

Mais lorsque vous dissociez WordPress, vous pouvez profiter du meilleur des deux mondes. Pour rendre cela possible, WordPress dispose d'une API appelée WordPress REST API.

Il s'agit d'une interface de programmation qui permet aux développeurs d'accéder aux données du site Web WordPress et d'interagir avec celles-ci à l'aide de méthodes HTTP standard.

Il permet aux développeurs de récupérer, créer, mettre à jour et supprimer du contenu WordPress à distance, ce qui facilite l'intégration de WordPress avec d'autres plates-formes d'application ou d'autres technologies frontales comme React.js, Angular.js, etc. pour créer un site Web personnalisé.

Comment rendre WordPress sans tête ? (Tutoriel WordPress sans tête)

Il existe différentes manières de dissocier WordPress standard, en fonction de la technologie que vous allez utiliser, des ressources, des langages préférés et des frameworks. Quelle que soit la méthode utilisée, vous devez être à l’aise avec les langages frontaux ainsi qu’avec l’API WordPress Rest.

Mais pour l’instant, nous allons choisir la méthode la plus simple puisque la majorité des individus sont des débutants. Consultez les étapes indiquées ci-dessous :

Étape 1 : Configurer WordPress

La première chose que vous devez faire est de créer un site Web WordPress comme vous le feriez normalement sur votre serveur. Cela signifie que le site Web doit être en ligne, avoir son domaine et un compte d'hébergement Web approprié.

Mais choisir la bonne plateforme d'hébergement WordPress est en soi une tâche très difficile et c'est même une étape très cruciale lors de la configuration de WordPress et de la création d'un CMS headless.

C’est très important car, même si le front-end et le back-end sont découplés, le back-end doit toujours résider sur un serveur nécessitant un hébergement.

Le serveur fournit non seulement un hébergeur pour stocker tout le contenu de votre site Web, mais ses performances, sa sécurité et sa fiabilité sont également cruciales pour fournir le contenu du site Web en douceur au front-end, quelle que soit la technologie qu'il utilise.

Il devient donc essentiel de choisir un hébergeur offrant des performances de serveur ultra-rapides et une sécurité renforcée.

Compte tenu de cela, vous pouvez choisir WPOven, l’une des sociétés d’hébergement WordPress entièrement gérées les plus rapides et les plus importantes qui offre un mélange de vitesse, de sécurité de niveau entreprise et de support de conciergerie, garantissant ainsi que votre parcours WordPress sans tête est plus fluide.

• Plus précisément, WPOven fournit un hébergement géré sur le fournisseur de cloud de premier plan Linode , garantissant des performances et une évolutivité à haut débit.
• La plate-forme propose une installation pré-WordPress, ce qui rend la configuration de WordPress et d'autres outils sans tracas.
• De plus, grâce au système de mise en cache avancé intégré et au réseau de diffusion de contenu (CDN) de Cloudflare, votre contenu est diffusé plus rapidement, quel que soit l'emplacement de l'utilisateur.
• De plus, WPOven garantit une sécurité robuste au niveau de l'entreprise grâce à des pare-feu de protection Web intégrés et à l'installation SSL, contribuant ainsi à protéger vos données et interactions back-end.
• Les sauvegardes automatisées et les options de restauration faciles offrent une couche supplémentaire de protection des données et une tranquillité d'esprit.
• De plus, le support client 24h/24 et 7j/7 de WPOven et sa vaste base de connaissances garantissent que tout problème est rapidement résolu, vous permettant ainsi de vous concentrer sur la création et la gestion de votre CMS sans tête sans tracas liés à l'hébergement.

Étape 2 : Activer l'API REST

La prochaine chose que vous devez faire est de vous assurer que l’API REST de WordPress est activée. Par défaut, il est activé sur toutes les nouvelles installations WordPress.

Mais vous devez quand même vérifier s’il est activé ou non sur votre site Web. Vous pouvez le faire en faisant simplement une requête API en entrant l'URL suivante dans votre navigateur,

https://example.com/wp-json/wp/v2/

Remplacez « example.com » par votre nom de domaine réel et si l'API est activée, elle affichera une réponse JSON avec des informations sur les publications de votre site Web.

Alternativement, vous pouvez utiliser l’aide d’un plugin tel que le plugin WP REST API.

Lire : L'API REST WordPress : Guide de démarrage

Étape 3 : Récupérer les données de publication via l'API

Si vous souhaitez récupérer des données de publication, suivez ces étapes :

• Ouvrez votre tableau de bord WordPress > Paramètres > Permaliens et sélectionnez Nom de la publication.

• Après cela, vous devez télécharger l'outil de test de l'API Postman.
• Maintenant, dans l'outil API Postman, entrez l'URL comme dans le format indiqué ci-dessous.

https://mydomain.com/wp-json/wp/v2/posts

Cela récupérera les données de publication sur votre site Web WordPress.

Étape 6 : configurer l'application React

Maintenant que nous en avons terminé avec le backend, il est temps de commencer à travailler sur le front-end. Tout d’abord, nous créons une application React en exécutant le code ci-dessous dans le terminal.

npm create vite@latest my-blog-app
cd my-blog-app
npm install

Cette commande créera une nouvelle application React à l'aide de Vite et installera également les bibliothèques ou packages externes nécessaires.

De plus, vous devez également inclure Axios pour gérer les requêtes HTTP. Pour cela, exécutez la commande suivante pour l'installer.

npm install axios

Vous pouvez désormais démarrer un serveur de développement local pour votre application en exécutant la commande npm run dev dans votre terminal ou votre invite de commande.

Lorsque vous exécutez cette commande, elle démarrera un serveur sur votre ordinateur local et rendra votre application disponible à l'URL https://127.0.0.1:5173 .

La prochaine chose que vous devez faire est d'ouvrir votre projet dans l'éditeur de code (selon votre choix, Visual Studio Code, Subkline Text, Atom, etc.) et également de supprimer les fichiers inutiles tels que index.css, app.css, etc.

Étape 7 : Récupérer les publications de WordPress

Dans votre fichier App.jsx , en haut, importez le hook useState depuis la bibliothèque React. Cela vous permet d'utiliser l'état dans votre composant fonctionnel.

import React, { useState } from 'react';

Dans votre composant fonctionnel App , initialisez un élément d'état appelé posts à l'aide du hook useState . Cet État détiendra toute une série de postes. useState([]) initialise posts avec un tableau vide comme valeur initiale.

const [posts, setPosts] = useState([]);

Après avoir initialisé l'état posts avec un tableau vide à l'aide de useState([]) , vous devez ajouter du code pour récupérer les publications de l'API REST de WordPress. Cela implique d'envoyer une requête HTTP au point de terminaison de l'API qui sert les données des publications.

Vous devez ajouter le code nécessaire pour récupérer les données des publications après la déclaration d'état. Ce code impliquera généralement l'utilisation d'une méthode comme fetch() ou d'une bibliothèque comme Axios pour envoyer une requête HTTP GET au point de terminaison de l'API WordPress qui fournit les données de publication.

Ensuite, ajoutez le code suivant après la déclaration d'état pour récupérer les données des publications de l'API REST WordPress et mettre à jour les publications en conséquence.

const fetchPosts = () => {
// Using axios to fetch the posts
axios
.get("https://yourdomain.com/wp-json/wp/v2/posts")
.then((res) => {
// Saving the data to state
setPosts(res.data);
});
}
// Calling the function on page load
useEffect(() => {
fetchPosts()
}, [])

Ce code récupère les publications de l'API REST d'un site Web WordPress lorsque le composant est monté et met à jour l'état du composant avec les données récupérées à l'aide de la fonction setPosts du hook useState .

Étape 8 : Création d'un composant Blog et rendu

Créez maintenant un nouveau dossier nommé « composants » dans le dossier src et créez deux nouveaux fichiers Blog.jsx et blog.css (à l'intérieur des composants).

Ensuite, ajoutez d'abord le code suivant au fichier Blog.jsx :

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./blog.css";
export default function Blog({ post }) {
const [featuredImage, setFeaturedImage] = useState();
const getImage = () => {
axios
.get(post?._links["wp:featuredmedia"][0]?.href)
.then((response) => {
setFeaturedImage(response.data.source_url);
});
};

useEffect(() => {
getImage();
}, []);
return (
<div class="container">
<div class="blog-container">
<p className="blog-date">
{new Date(Date.now()).toLocaleDateString("en-US", {
day: "numeric",
month: "long",
year: "numeric",
})}
</p>
<h2 className="blog-title">{post.title.rendered}</h2>
<p
className="blog-excerpt"
dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
/>
<img src={featuredImage} class="mask" />
</div>
</div>
);
}

Ce composant récupère et affiche le titre, la date, l'extrait et l'image vedette d'un article de blog passé comme accessoire.

Après cela, ajoutez le style suivant au fichier blog.css,

@import url("https://fonts.googleapis.com/css?display=swap&family=Poppins");
.blog-container {
width: 400px;
height: 322px;
background: white;
border-radius: 10px;
box-shadow: 0px 20px 50px #d9dbdf;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
img {
width: 400px;
height: 210px;
object-fit: cover;
overflow: hidden;
z-index: 999;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

.blog-title {
margin: auto;
text-align: left;
padding-left: 22px;
font-family: "Poppins";
font-size: 22px;
}

.blog-date {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #c8c8c8;
line-height: 18px;
padding-top: 10px;
}

.blog-excerpt {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #8a8a8a;
line-height: 18px;
margin-bottom: 13px;
}

Enfin, insérez l'extrait de code suivant dans l'instruction return du fichier App.jsx . C'est ici que vous définissez la structure de l'interface utilisateur de votre composant à l'aide de la syntaxe JSX.

<div>
{posts.map((item) => (
<Blog post={item} />
))}
</div>;

Here's the final version of your "App.jsx":
import React, { useEffect, useState } from 'react'
import axios from "axios"
import Blog from './components/Blog';
export default function App() {
const [posts, setPosts] = useState([]);
const fetchPosts = () => {
axios
.get("https://my-awesome-website.local/wp-json/wp/v2/posts")
.then((res) => {
setPosts(res.data);
});
}

useEffect(() => {
fetchPosts()
}, [])
return (
<div>
{posts.map((item) => (
<Blog
post={item}
/>
))}
</div>
)
}

Enregistrez le fichier et actualisez votre navigateur. Vous pourrez désormais voir les articles de blog rendus à l'écran.

Exemples WordPress sans tête

Pour votre référence et pour renforcer la confiance, nous vous proposons ici quelques exemples WordPress Headless :

1. Crise technologique

Si vous êtes un passionné de technologie, vous devez être familier avec TechCrunch. qui est un média technologique et un site d'information de premier plan. Ils ont repensé le front-end de leur site Web pour offrir une expérience utilisateur transparente.

Pour y parvenir, ils ont opté pour l’approche Headless WordPress et ont utilisé l’application React pour créer le front-end et headless WordPress pour le back-end.

2. Centre de ressources de marque Facebook

Facebook, désormais connu sous le nom de Meta, un géant des médias sociaux utilise cette approche Headless WordPress dans son site Web Brand Resource Center comme guide de style pour les actifs de sa marque.

Le site Web utilise un mélange unique de conception Web unique et élégante avec une expérience utilisateur fluide. Si Facebook/Meta, comme un grand géant de la technologie, le peut. faites confiance à WordPress sans tête, vous aussi.

Conclusion

En conclusion, outre ses certaines limites, inconvénients ou inconvénients. Une approche sans tête peut faire des merveilles si elle est mise en œuvre correctement. Cela peut particulièrement être très avantageux pour les développeurs ou les créateurs de contenu qui aiment créer des applications Web sans tête.

Il ne fait aucun doute que le découplage du WordPress standard peut ouvrir un monde de possibilités, comme obtenir la liberté de concevoir une interface utilisateur de site Web à l'aide de React et également de gérer le contenu à l'aide de WordPress.

Cette technologie vous permet de profiter de toute la puissance de chaque technologie ainsi que des avantages de flexibilité, d’évolutivité et d’optimisation du référencement.

Tout au long de ce blog, nous avons tenté de répondre à toutes les requêtes génériques concernant WordPress sans tête et vous avons également expliqué quelques étapes sur la façon de créer un WordPress sans tête pour votre référence. (Cependant, il peut exister plusieurs façons de découpler WordPress, alors suivez celle qui vous semble la plus simple).

Questions fréquemment posées

Rahul

Rahul Kumar est un passionné du Web et un stratège de contenu spécialisé dans WordPress et l'hébergement Web. Avec des années d'expérience et un engagement à rester au courant des tendances du secteur, il crée des stratégies en ligne efficaces qui génèrent du trafic, stimulent l'engagement et augmentent les conversions. L'attention portée aux détails et la capacité de Rahul à créer un contenu convaincant font de lui un atout précieux pour toute marque cherchant à améliorer sa présence en ligne.