WordPress est l’un des systèmes de gestion de contenu (Content Management System) les plus populaires, utilisé par 810 millions de personnes, soit 41 % de l’ensemble de l’internet ! C’est le choix par excellence pour tous ceux qui souhaitent créer rapidement un site web, car il est simple, convivial, offre une grande variété d’options de personnalisation et dispose d’un solide écosystème d’extensions et d’autres ressources.

L’une des façons de tirer le meilleur parti de WordPress est d’opter pour le mode « headless ».

Un CMS headless, également connu sous le nom de système headless, est un type de CMS backend qui est uniquement utilisé pour gérer le contenu. Cela vous permet d’intégrer du contenu dans n’importe quel système ou site web en appelant simplement les API du CMS headless.

Cependant, l’interface publique (frontend) doit être gérée séparément. C’est là qu’intervient une API.

Les API permettent à deux ou plusieurs applications différentes d’échanger des données. Dans le cas présent, l’API est utilisée pour transférer les données du CMS vers un site web frontend, ce qui offre une plus grande flexibilité et des performances plus rapides.

Dans cet article, nous verrons ce qu’est un CMS headless, pourquoi vous pourriez vouloir en créer un et comment le configurer pour WordPress.

Qu’est-ce qu’un site WordPress headless ?

Un site WordPress headless est un type de site qui utilise principalement WordPress comme CMS, ou système de gestion de contenu, et utilise d’autres technologies frontend telles que React ou Vue pour l’interface publique.

Les bibliothèques et frameworks JavaScript sont utilisés pour afficher le contenu du site web. Par conséquent, un site WordPress headless possède un frontend et un backend séparés, et une API est utilisée pour la communication.

En termes plus simples, une architecture headless signifie que le CMS est utilisé uniquement pour stocker et gérer votre contenu, et qu’il ne se préoccupe pas de l’interface publique du site web.

La tâche principale du frontend, en revanche, est d’afficher le contenu, et il ne se soucie pas de l’endroit où le contenu est stocké ou géré, tant qu’il peut l’atteindre.

Un WordPress headless est plus performant car les requêtes du frontend sont gérées par des technologies plus rapides comme React, et seul le backend est géré par WordPress. La séparation du frontend et du backend permet de faire évoluer les composants de manière indépendante.

Avantages et inconvénients de WordPress headless

Comme pour toutes les options de développement, il y a des avantages et des inconvénients à opter pour une solution WordPress headless. Il est important de comprendre les deux avant de prendre une décision.

Les avantages d’un WordPress headless

Voici quelques-uns des principaux avantages d’une implémentation de WordPress headless :

  • Flexibilité : Headless WordPress permet aux développeurs de créer des expériences frontend personnalisées sans être limités par le système de thème traditionnel de WordPress. Cela signifie que vous pouvez créer des interfaces utilisateur et des expériences uniques pour des besoins spécifiques.
  • Performance : La séparation du frontend et du backend d’un site WordPress peut accélérer le chargement de votre site et augmenter ses performances, car le serveur ne fournit des données que par l’intermédiaire d’une API, au lieu de rendre le code HTML pour chaque requête.
  • Sécurité : En séparant le frontend et le backend, WordPress headless peut fournir une couche supplémentaire de sécurité en limitant l’accès à la base de code et à la base de données sous-jacentes de WordPress.

Les inconvénients d’un WordPress headless

Les inconvénients de WordPress headless peuvent être les suivants :

  • L’absence de thèmes : Puisque WordPress headless ne s’appuie pas sur des thèmes pré-construits, vous devrez créer vos propres thèmes personnalisés. Cela peut prendre du temps et nécessiter des ressources supplémentaires.
  • Le coût : Le développement d’un site WordPress headless peut être plus coûteux qu’un site WordPress traditionnel, car il nécessite plus d’expertise technique et de ressources pour le mettre en place et le maintenir.
  • Limitations des extensions : Certaines extensions WordPress peuvent ne pas fonctionner avec un site WordPress headless, car elles s’appuient sur des thèmes WordPress pour fonctionner correctement.

Qu’est-ce que la REST API WordPress ?

La REST API WordPress est utilisée comme interface entre le backend et le frontend. Avec l’API, les données peuvent être envoyées ou récupérées du site facilement, car l’API a un accès contrôlé aux données du site. Elle garantit également que seuls les utilisateurs autorisés peuvent interagir avec elle.

L’API peut prendre en charge un large éventail de formats de données, y compris JSON, ce qui facilite l’interaction avec le système.

La REST API de WordPress est un outil puissant qui permet aux développeurs de créer, de mettre à jour ou de supprimer des données, ainsi que de créer des fonctionnalités personnalisées pour les sites ou de s’intégrer à un autre service. De plus, il existe des extensions qui étendent les fonctionnalités de l’API, comme l’intégration de méthodes d’authentification supplémentaires.

Qu’est-ce que React ?

React est une bibliothèque JavaScript pour la construction d’interfaces utilisateur. Il s’agit d’une bibliothèque frontend open source, réutilisable et basée sur des composants, qui permet aux développeurs de créer des composants d’interface utilisateur (IU) à l’aide d’une syntaxe déclarative.

React crée une interface utilisateur interactive et rend les composants lorsque les données changent. Cette bibliothèque est très populaire parmi les développeurs qui souhaitent créer des composants complexes et réutilisables, gérer efficacement l’état et mettre facilement à jour l’interface utilisateur en temps réel.

La solide communauté de développeurs de React a créé un ensemble d’outils, de bibliothèques et de ressources pour améliorer les fonctionnalités de la bibliothèque. De nombreuses organisations et entreprises adoptent React comme technologie pour créer des applications web complexes, dynamiques et performantes.

Entreprises populaires utilisant React.js
Entreprises populaires utilisant React.js (source : inexture.com)

Pourquoi utiliser React ?

React offre de nombreux avantages qui en font un excellent choix pour développer des applications web complexes et dynamiques.

Voici quelques-uns des principaux avantages de l’utilisation de React :

  • Syntaxe déclarative : React utilise une approche déclarative pour construire des composants d’interface utilisateur, ce qui facilite la création de composants réutilisables et très efficaces.
  • Grande communauté et écosystème : React dispose d’une communauté de développeurs importante et active, ce qui a conduit à la création d’un large éventail d’outils et de bibliothèques pour améliorer ses fonctionnalités.
  • DOM virtuel : React utilise le DOM virtuel pour mettre à jour l’interface utilisateur en temps réel. Cela signifie que lorsque l’état change, il ne met à jour que les composants qui ont besoin d’être modifiés, plutôt que de rendre à nouveau la page entière.
  • Réutilisation : React.js offre des composants réutilisables qui peuvent être utilisés dans différentes applications, ce qui réduit considérablement le temps et les efforts de développement.

Comment créer un site WordPress headless avec React

Il est maintenant temps de mettre les mains dans le cambouis et d’apprendre à créer et à déployer un site WordPress headless avec React.

Continuez à lire pour vous y plonger.

Pré-requis

Avant de commencer ce tutoriel, assurez-vous d’avoir :

Étape 1. Mise en place d’un site web WordPress

Commençons par configurer le site web WordPress, qui servira de source de données pour l’application React. Si vous avez déjà un site web WordPress, vous pouvez sauter cette section ; sinon, suivez la procédure.

Dans ce tutoriel, nous utiliserons DevKinsta, un environnement de développement local rapide et fiable largement utilisé pour créer, développer et déployer des sites WordPress. Son utilisation est entièrement gratuite – il suffit de le télécharger depuis le site officiel et de l’installer sur votre système.

Une fois l’installation terminée, ouvrez le tableau de bord DevKinsta et cliquez sur Nouveau site WordPress pour créer un nouveau site WordPress.

Remplissez les champs requis et cliquez sur le bouton Créer un site pour continuer.

Page de création du site DevKinsta
Page de création du site DevKinsta

Cela peut prendre quelques minutes, mais une fois que votre site est créé, vous pouvez y accéder ainsi qu’à son panneau d’administration en cliquant sur Ouvrir le site ou WP Admin respectivement.

Ensuite, pour activer l’API JSON, vous devrez mettre à jour les permaliens de votre site web.

Dans le tableau de bord d’administration de WordPress, cliquez sur Réglages, puis sur Permaliens. Choisissez l’option Nom de la publication et cliquez sur Enregistrer.

Réglages des Permaliens de WordPress
Réglages des Permaliens de WordPress

Vous pouvez également utiliser des outils tels que Postman pour tester et envoyer facilement des requêtes aux REST API de WordPress.

Étape 2 : Mise en place d’une application React

Maintenant que nous avons configuré notre site WordPress, nous pouvons commencer à travailler sur le frontend. Comme mentionné ci-dessus, dans ce tutoriel, nous utiliserons React pour le frontend de notre application.

Pour commencer, exécutez le code ci-dessous dans votre terminal pour créer une application React.

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

Les commandes ci-dessus créeront une application React et installeront les dépendances nécessaires.

Nous devons également installer Axios, une bibliothèque JavaScript pour effectuer des requêtes HTTP. Exécutez la commande ci-dessous pour l’installer.

npm install axios

Maintenant, afin de démarrer le serveur de développement, vous pouvez lancer npm run dev dans le terminal. Le serveur devrait alors initialiser votre application à l’adresse http://127.0.0.1:5173.

Page de destination Vite + React
Page de destination Vite + React

Ensuite, ouvrez votre projet dans votre éditeur de code préféré et supprimez tous les fichiers inutiles, tels que le dossier assets, index.css et app.css.

Vous pouvez également remplacer le code à l’intérieur de main.jsx et App.jsx par le code suivant :

// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
// App.jsx

import React from 'react'

export default function App() {
  return (
    <App />
  )
}

Étape 3 : Récupérer les articles de WordPress

Il est maintenant temps de récupérer les articles de notre site WordPress.

Dans le fichier App.jsx, ajoutez l’état ci-dessous et importez <code>useState</code> de React :

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

useState est un hook intégré dans React qui est utilisé pour ajouter des états à un composant, un état se référant à des données ou à une propriété.

posts est utilisé pour obtenir les données de l’état, et setPosts est utilisé pour ajouter de nouvelles données à l’affichage. Nous avons également passé un tableau vide à l’état par défaut.

Ensuite, ajoutez le code suivant après l’état pour récupérer les articles depuis l’API REST de WordPress :

const fetchPosts = () => {
    // Using axios to fetch the posts
    axios
      .get("http://headless-wordpress-website.local/wp-json/wp/v2/posts")
      .then((res) => {
        // Saving the data to state
        setPosts(res.data);
      });
  }


  // Calling the function on page load
  useEffect(() => {
    fetchPosts()
  }, [])

Le code ci-dessus exécute la fonction fetchPosts() au chargement de la page. Dans la fonction fetchPosts(), nous envoyons une requête GET à l’API de WordPress en utilisant Axios pour récupérer les articles et les sauvegarder dans l’état que nous avons déclaré plus tôt.

Étape 4 : Création d’un composant de blog

Dans le répertoire racine, créez un nouveau dossier nommé components, et à l’intérieur de celui-ci, créez deux nouveaux fichiers : blog.jsx et blog.css.

Tout d’abord, ajoutez 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>
  );
}

Dans le code ci-dessus, nous avons créé un composant de carte qui prend la propriété posts qui contient les informations sur l’article de blog à partir de l’API de WordPress.

Dans la fonction getImage(), nous utilisons Axios pour récupérer l’URL de l’image mise en avant et enregistrer cette information dans l’état.

Ensuite, nous avons ajouté un hook useEffect pour appeler la fonction getImage() une fois que le composant est monté. Nous avons également ajouté l’instruction de retour dans laquelle nous rendons les données de l’article, le titre, l’extrait et l’image.

Ensuite, ajoutez les styles ci-dessous au fichier blog.css :

@import url("https://fonts.googleapis.com/css?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;
}

Ensuite, dans le fichier App.jsx, ajoutez le code suivant dans l’instruction return pour rendre le composant blog :

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

Enfin, voici à quoi devrait ressembler votre 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("http://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>
  )
}

Sauvegardez le fichier et rafraîchissez l’onglet de votre navigateur. Vous devriez maintenant voir vos articles de blog s’afficher sur la page.

WordPress headless avec React.js
WordPress headless avec React.js

Résumé

WordPress headless offre un excellent moyen de créer des sites web rapides et performants avec une architecture évolutive. Avec l’utilisation de React et de la REST API de WordPress, il est plus facile que jamais de créer des sites web dynamiques et interactifs avec WordPress comme système de gestion de contenu.

L’endroit où vous hébergez votre site WordPress est tout aussi important pour la rapidité. Kinsta est idéalement placé pour fournir une expérience d’hébergement WordPress rapide comme l’éclair avec des machines Google C2 haut de gamme sur leur réseau Premium Tier, ainsi qu’une intégration Cloudflare pour protéger votre site contre la perte de données et les attaques malveillantes.

Avez-vous construit – ou prévoyez-vous de construire – un site WordPress headless avec React ? Faites-nous en part dans la section des commentaires ci-dessous !

Suhail Kakar

Suhail est un développeur de logiciels spécialisé dans le développement d'applications web et mobiles à pile complète. Il contribue activement à des projets open source et aime construire des applications Web3.