{"id":17995,"date":"2022-12-22T16:44:34","date_gmt":"2022-12-22T16:44:34","guid":{"rendered":"\/tutoriels\/?p=17995"},"modified":"2024-09-20T22:07:39","modified_gmt":"2024-09-20T22:07:39","slug":"wordpress-headless","status":"publish","type":"post","link":"\/fr\/tutoriels\/wordpress-headless","title":{"rendered":"Un guide rapide sur le WordPress Headless"},"content":{"rendered":"

Un système WordPress headless aide les concepteurs et les développeurs Web à travailler plus efficacement sur leurs sites wordpress. Cependant, si vous êtes nouveau dans ce domaine, vous aurez peut-être du mal à comprendre comment cela fonctionne. De plus, vous vous demanderez également s’il représente vraiment la bonne solution pour votre projet. <\/p>

C’est pourquoi nous avons créé ce guide rapide sur WordPress headless. En plongeant dans le monde des systèmes de gestion de contenu (CMS) de back-end uniquement, vous pouvez décider si une configuration headless convient ou pas à vos projets de développement Web. <\/p>

Dans cet article, nous examinerons de plus près WordPress headless et discuterons de ses avantages et de ses inconvénients. Nous vous montrerons ensuite comment débuter, et passerons après en revue quelques outils que vous pouvez utiliser. Allons donc droit au but !<\/p>

\"\"<\/a><\/figure>

Une introduction à WordPress headless<\/h2>

La plupart des CMS comme wordpress ont une interface front end et back-end. Avec un site WordPress<\/a>, le back-end se compose du panneau d’administration et des outils de gestion de contenu comme ci-dessous :<\/p>

\"Tableau<\/figure>

De son côté, le front end représente tout ce que les visiteurs voient lorsqu’ils arrivent sur votre site Web wordpress. Typiquement, ce contenu est visible sur votre site grâce au thème WordPress actif :<\/p>

\"Page<\/figure>

Lorsque vous exécutez WordPress headless sur un site, vous supprimez la tête (le front end) du corps (le back end). De cette façon, vous pouvez continuer à utiliser le tableau de bord qui vous est familier, tout en vous libérant des contraintes frontales de la plateforme wordpress. <\/p>

Dans une configuration headless, le CMS WordPress fournit votre contenu sous forme de données en utilisant une interface de programmation d’application (API)<\/strong> de transfert d’état représentatif (REST). Vous pouvez accéder à ces informations en envoyant une demande réseau au point de terminaison de l’API REST de WordPress. Cela vous donne la liberté et la puissance de présenter tout ce contenu dans un front-end personnalisé.<\/p>

Vous pouvez entre autres employer vos données WordPress dans des contextes uniques, y compris des applications mobiles et des applications à page unique (API). Dans la section suivante, nous examinerons de plus près les avantages de l’exécution d’un système headless sur un CMS (content management system) comme WordPress.<\/p>

Pour quelles raisons souhaitez-vous exécuter WordPress headless ?<\/h3>

Il n’est pas rare de réutiliser le même contenu sur plusieurs plateformes. Par exemple, le géant du commerce électronique Amazon exploite une boutique en ligne et une application web dédiée pour le mobile. Ces deux plateformes affichent le même contenu :<\/p>

\n
\"La<\/figure><\/div>

En utilisant la configuration du headless sur un site e-commerce, vous pouvez utiliser exactement les mêmes données sur plusieurs plateformes. Cela facilite le maintien d’une présence active sur plusieurs canaux.<\/p>

Votre WordPress headless agit également comme un référentiel central. Cela peut assurer la cohérence sur toutes vos plateformes. Cela signifie aussi que vous n’aurez besoin de modifier votre contenu qu’une seule fois, et cette modification sera ensuite répliquée sur différents canaux. <\/p>

Étant donné que le contenu headless est diffusé via une api, vous êtes libre d’utiliser vos outils frontaux préférés. Si vous choisissez un outil que vous connaissez déjà, cela peut vous aider à réduire le temps que vous passez à concevoir et à développer vos pages.<\/p>

Au fur et à mesure que votre projet évolue, vous devrez peut-être adopter de nouveaux outils ou recourir à une technologie alternative. La bonne nouvelle est que vous pouvez modifier des parties de votre headless stack technique ou migrer vers un framework alternatif sans que cela affecte votre CMS. Cela vous permet d’ajuster en permanence votre projet afin de répondre à l’évolution de vos besoins.  <\/p>

Cette flexibilité ne se limite pas au back-end. En supprimant le front-end WordPress, vous éliminez également votre dépendance aux thèmes et aux plugins. <\/p>

WordPress peut avoir un énorme écosystème de logiciels tiers, mais les thèmes et les plugins sont toujours limités par les conventions du front-end de la plateforme. En supprimant ces limitations sur WordPress, vous aurez un meilleur contrôle sur l’apparence de votre contenu et les fonctionnalités de votre site web wordpress.<\/p>

\n
\"\"<\/a><\/figure><\/div>

Problèmes potentiels avec WordPress headless <\/h3>

WordPress headless vous offre plus de liberté de conception et de développement. Cependant, cette flexibilité a un coût. <\/p>

Construire votre propre front-end sur wordpress peut être un processus long et frustrant. Cela nécessite également une quantité importante de savoir-faire technique et peut impliquer l’écriture d’un code étendu. <\/p>

Il existe des outils et des frameworks WordPress<\/a> qui peuvent effectuer une grande partie du travail à votre place. Cependant, créer votre propre front-end est un peu plus complexe que d’utiliser les outils prêts à l’emploi de WordPress. <\/p>

Même lorsque votre site web WordPress est opérationnel, un site web WordPress headless nécessite généralement une maintenance plus continue. Étant donné que vous avez créé le front-end manuellement, vous devrez également mettre en place les modifications manuellement. Cela inclut la publication de nouveaux contenus ainsi que la modification de la conception de votre site web wordpress. <\/p>

Les thèmes et les plugins constituent une grande partie de l’expérience WordPress. Vous perdez immédiatement l’accès à tous ces logiciels supplémentaires. Si vous souhaitez ajouter une nouvelle fonctionnalité ou modifier votre conception, vous devrez la coder manuellement dans votre projet. <\/p>

À moins que vous ne développiez votre propre solution, WordPress headless n’offre pas d’éditeur WYSIWYG (What You See Is What You Get) ni d’option de prévisualisation en direct. Cela peut rendre difficile la capacité de juger de la façon dont votre contenu apparaîtra sur le front-end.<\/p>

Comment démarrer avec WordPress headless (2 méthodes) ?<\/h2>

Nous n’allons pas affirmer que la création de votre propre front-end est simple. En effet, son niveau de développement peut être compliqué. Cependant, vous pouvez disposer d’outils qui peuvent aider à faciliter le processus. <\/p>

Dans une telle perspective, explorons les deux façons de configurer un projet WordPress headless avec le moins de tracas possible. <\/p>

Méthode 1 : Utiliser un framework comme React <\/h3>

Construire un front-end pour un site avec un CMS WordPress peut être une tâche longue et complexe. En effet, la mise en place de features peut être compliquée. Pour cette raison, de nombreux développeurs choisissent d’utiliser un framework. <\/p>

Vous pouvez créer un front end WordPress personnalisé à l’aide de la bibliothèque React JavaScript<\/a>. Cette ressource populaire possède tout ce dont vous avez envie pour accéder aux données stockées dans votre CMS (content management systems) via l’API REST de WordPress<\/a> :<\/p>

\"Page<\/figure>

Le framework React promet également de surcharger votre projet headless en éliminant la nécessité de rendre à nouveau le code. Cela signifie que le code fondamental de votre projet n’est chargé qu’une seule fois.<\/p>

Si l’état d’un composant change, le framework React restituera uniquement le contenu affecté. Cela rend les frameworks basés sur React particulièrement populaires parmi les développeurs qui envisagent de créer un SPA. <\/p>

Initialement lancée pour être utilisée avec Facebook, de nombreux grands noms ont maintenant adopté cette technologie assez populaire. Cela inclut Airbnb, Dropbox, Netflix et Reddit. <\/p>

Avec le soutien de tant de sociétés multinationales, il n’est pas surprenant à ce que React dispose d’un support en ligne étendu, y compris une documentation officielle<\/a> et des tutoriels utiles<\/a> :<\/p>

La page React \"bien démarrer\", qui présente sa documentation et des tutoriels connexes.<\/figure>

Si vous rencontrez un problème quelconque, vous ne devriez avoir aucune difficulté à trouver des réponses et des solutions pertinentes. C’est une excellente nouvelle qui s’adresse à tous ceux qui explorent React pour la toute première fois ou qui font une découverte de frameworks en général. <\/p>

Bien que vous puissiez choisir d’utiliser la bibliothèque React, vous pouvez également vous servir d’un certain nombre de frameworks basés sur React. Cela inclut le projet Frontity<\/a>. Il est préconfiguré pour offrir la meilleure expérience possible aux utilisateurs de WordPress :<\/p>

\"Page<\/figure>

Parmi les autres frameworks populaires basés sur React, nous pouvons citer le projet open source Gatsby.js<\/a> et Next.js de Vercel<\/a> . Avec autant d’options au sein desquelles opérer une sélection, vous pouvez effectuer un achat et trouver la meilleure solution pour votre projet particulier. <\/p>

Méthode 2 : Utiliser un plugin wordpress<\/h3>

Avec WordPress, il y a toujours un plugin disponible pour vous aider à accomplir presque toutes les tâches. Lorsqu’il s’agit de configurer un headless WordPress, vous disposez de quelques bonnes options qui peuvent vous aider à démarrer. <\/p>

Jetons un coup d’œil à deux puissants outils que vous pouvez utiliser.<\/p>

    \n
  1. WPGraphQL<\/a><\/li>\n<\/ol>
    \"Bannière<\/figure>

    WPGraphQL est l’une des solutions gratuites conçues pour vous aider à récupérer des données à partir d’un headless WordPress. le plugin est livré avec l’environnement de développement intégré (IDE) GraphQL<\/a>, qui vous permet de parcourir le schéma GraphSQL de votre projet et de tester les requêtes et les mutations.<\/p>

    WPGraphQL transforme votre site web WordPress en une API GraphQL. Cela signifie dans la pratique que vous pouvez interagir avec ce plugin en vous servant de n’importe quel client capable de faire des requêtes HTTP au point de terminaison GraphSQL. <\/p>

    Il est également conçu pour être utilisé avec des frameworks, tels que Apollo Client, Next.js et Gatbsy.js. Si vous vous servez de Gatsby, vous pouvez consulter le plugin source Gatsby pour WordPress<\/a>. <\/p>

    Avec ce plugin source, vous pouvez effectuer des constructions incrémentielles rapides et prévisualiser le contenu dans votre CMS. Pour cette raison, vous pouvez opter pour WPGraphQL si vous envisagez d’utiliser Gatsby.js.<\/p>

    Principales caractéristiques<\/strong> : <\/p>