Niveau Niveau confirmé

Le headless à l'aise avec l'API Rest de WordPress

Articledéveloppement

Publié par le (11094 lectures)

wordpress api headless

On connait tous WordPress, on ne va plus le présenter ici et passer directement à ce qui nous intéresse l'API REST de WordPress !

Wordpress Logo

...Quoi sérieux ? Tu connais pas ?

Mais si tu sais le CMS le plus populaire du monde, sur lequel 43 % du web repose !

Non, toujours pas !?

Bon alors, un petit récap' vite fait s'impose et après on y va !

Petit récap' !

WordPress c'est un Système de Gestion de Contenu (SGC en bon français) ou Content Management System (CMS en anglais) qui permet de créer et gérer facilement l'ensemble d'un site.

Ses fonctionnalités permettent de créer et gérer différents types de site web :

  • Blog (c'est son cœur de métier à la base)
  • Site institutionnel
  • Portfolio
  • Site vitrine
  • Boutique en ligne (WooCommerce)

C'est écrit en PHP et repose sur une base de données MySQL, la plupart des installations WordPress utilisent des thèmes basés sur des modèles de page pour afficher le contenu.

Voilà pour les bases !

L'API REST

l'API REST a fait son apparition dans la version 4.5 en 2016, cependant elle existait déjà sous la forme d’une extension avant cela. Mais aujourd'hui elle est native et disponible avec l'url suivante : https://monWordPress.fr/wp-json/wp/v2

Exemple de requête globale sur l'api WordPress

Cela nous retourne un tableau avec les options de l'api et les requêtes pouvant être exécutées comme sur des :

  • Posts
  • Taxonomies
  • Catégories
  • Médias

Si on voulait avoir la liste des posts par exemple, il suffirait de faire une requête plus précise commehttps://monWordPress.fr/wp-json/wp/v2/posts

Exemple de requête sur les posts de l'api WordPress

Cela retourne un tableau avec tous nos posts et toutes les informations liées a chaque post comme :

  • L'id
  • Le titre
  • Le contenu
  • La catégorie

Vous l'aurez compris il est possible de faire les mêmes requêtes que sur un WordPress du moment que les champs y sont enregistrées.
Voici le lien vers la documentation pour plus d'informations à son sujet.


⚠️ Cependant attention !

L'API ne fonctionne pas si les Réglages > Permaliens sont réglés sur Simple, vous devez activer une autre option parmi les choix proposés.

Page du back-office de wordpress sur le réglage de permaliens


Par défaut l'API ne contient que ce qui y est prévu de base à savoir les options disponibles à l'installation comme :

  • les articles
  • les catégories associées
  • les médias
  • les commentaires
  • les widgets
  • Le menu (lui fait exception !)

Par exemple si on voulait ajouter un nouveau custom post type, au register_post_type() il faut impérativement passer l'option show_in_rest => true sinon il ne serait pas accessible depuis l'API. Il en va de même pour tout ajout supplémentaire à ce que WordPress inclut de base.

Mais nous verrons tout cela dans un tuto pour approfondir les choses !

Ok, le Headless ça à l'air cool, mais c'est quoi !?

Dans le cas de l'utilisation classique de WordPress, qui est conçu pour manager le contenu avec son back-office et afficher ce contenu via des modèles de page qui mélangent du PHP et du HTML. (Sauf si t'utilises Timber 😉)
WordPress génère les pages côté serveur donc en SSR (Server-Side Rendering)

Schématisation du fonctionnement de WordPress


Dans le cas de l'utilisation avec l'API REST, si on considère le back-office comme le corps et l'affichage en front comme la tête, ça revient à couper la tête de WordPress !

On se libère de la technologie PHP pour construire les interfaces, pour ne garder que le back-office et c'est un framework front qui génère les pages côté client donc en CSR (Client-Side Rendering).

Ce qui nous offre un contrôle complet sur la façon dont le contenu est présenté et nous permet d'utiliser notre framework frontend préféré ! Comme VueJS par exemple ! 😏

Schématisation du fonctionnemet de l'api de WordPress

Les avantages ✔️

  • Flexibilité : Le frontend étant dissocié de WordPress on peut développer à l’aide d’outils frontend modernes.

  • Performances : La mise en cache permet de ne pas devoir constamment faire des requêtes aux serveurs.

  • Sécurité supplémentaire : Vous pouvez héberger votre WordPress et votre front-end sur des serveurs différents. Et vous avez moins à vous soucier de toutes les mises à jour de sécurité et des autres problèmes de maintenance liés à son utilisation.

Les inconvénients ❌

  • Fonctionnalités manquantes : L'API ne prend pas en charge toutes les fonctionnalités. Par exemple un des intérêts de ce CMS est l’éditeur Gutenberg, l’aperçu en direct ne fonctionnera pas si vous utilisez un frontend séparé. (L'API renvoi le contenu en RAW HTML).

  • Plugins : Lorsqu'il repose uniquement sur des extensions et des fonctionnalités spécifiques, vous devez vous en tenir à WordPress, sauf si les extensions proposent des options basées sur l’API (Comme ACF par exemple depuis la V.5.11)

  • Contraintes : Malgré le côté headless pour alimenter l'API il faudra toujours développer les customs post type et taxonomies en PHP dans le thème et il faut faire toute une installation pour l'utiliser.

Conclusion

L'API REST de WordPress n’est pas parfaite au départ et arrive avec quelques contraintes.
Mais avec un peu de code, on arrive assez facilement à l'enrichir et elle s'avère bien utile pour certains projets !

Cependant aujourd'hui il existe d'autres headless CMS sur le marché comme le français Strapi par exemple.
Lui aussi est open source, gratuit et écrit en JS. Toutefois l’approche est différente il faut tout construire de toutes pièces et nécessite d'avoir d'autres compétences.

Voilà déjà deux cas avec une approche et des langages différents, mais il en existe d'autres comme Directus ou encore Contentful par exemple.

Toutefois il faut garder à l'esprit que WordPress n'a pas été développé pour être un headless CMS, mais que l'option est disponible et elle fonctionne bien.

Et vous ? Vous avez déjà utilisé l'API de WordPress ? Ou un autre CMS headless ?

Commentaires

Commenter

Vous devez être inscrit et identifié pour utiliser cette fonction.

Connectez-vous (déjà inscrit)

Oubli de mot de passe ? Pas de panique, on va le retrouver

Pas encore inscrit ? C'est très simple et gratuit.