Le Rest API de WordPress est la fonctionnalité préférée des développeurs WordPress n'affectionnant pas particulièrement WordPress 🖤.
Elle permet aux éditeurs de continuer d'entrer/modifier du contenu dans le tableau de bord de WordPress, comme dans tout site WordPress classique. Tout en permettant aux développeurs d'accéder aux contenus en JavaScript via des JSON plutôt que d'avoir à utiliser les templates PHP de WordPress.
Utilisation de base
Par défaut, le Rest API est déjà présent sur tout site WordPress. Pour y avoir accès, il suffit d'ajouter /wp-json/wp/v2/
à la fin de l'url du site en question.
Par exemple:
https://site.com/wp-json/wp/v2/
Le page retourné ressemble probablement à un mur de texte illisible. Il s'agit en fait d'un fichier JSON minifié contenant tous les contenus du site, affichés sur une seule ligne.
Routes
Pour des raisons de performance et de facilité de traitement, il est généralement préférable de ne charger que les informations qui seront utilisées. Pour ce faire, il est possible d'utiliser ce que l'on appelle des routes.
Par exemple, si seulement les pages sont requises, il est possible de spécifier la route
https://site.com/wp-json/wp/v2/pages
Qui retournera un JSON ne contenant que les pages publiées.
Dans cet exemple, la partie https://site.com/wp-json/wp/v2
correspond à l'URL de base de l'API. Tandis que /pages
est la route spécifiant que seuls les contenus de type page doivent-être retourné.
Si un autre type de publication doit être retourné. Par exemple, les articles, ou en anglais posts, il suffit de spécifier une route différente.
Par exemple: /posts
.
https://site.com/wp-json/wp/v2/posts
Il est possible de spécifier des routes encore plus précises. Notamment en spécifiant l'ID de la publication désirée.
Par exemple, si seulement la page avec le ID 10 est requis, il est possible de spécifier la route /pages/10
.
https://site.com/wp-json/wp/v2/pages/10
Tri des résultats
orderby
Pour trier les résultats d’une requête, il faut ajouter des paramètres à l’URL fournie à la requête fetch. Un premier orderby
permet d'indiquer le critère devant être utilisé afin de trier les résultats. Il est entre autres possible de trier par:
Titre
title
Identifiant
id
Date de publication
date
Etc.
Par exemple, par titres:
https://site.com/wp-json/wp/v2/posts?orderby=title
order
Il est aussi de spécifier l’ordre dans lequel les posts devraient être triés via le paramètre order
permettant de spécifier si les résultats doivent être triés par:
ordre croissant asc
ordre décroissant desc
Par exemple, par titres décroissants:
https://site.com/wp-json/wp/v2/posts?orderby=title&order=desc
Featured Image
Par défaut, un objet correspondant à un post dans le JSON ne contient que le id du featured image lui étant associé. Pour obtenir plus d’informations concernant ce featured image, il faut le spécifier dans l’URL fournie à fetch en lui ajoutant le paramètre _embed
.
Par exemple:
https://site.com/wp-json/wp/v2/posts?_embed
Chaque post sera alors bonifié d’une propriété nommée _embedded
contenant une sous-propriété intitulée wp:featuredmedia
. Celle-ci est un tableau contenant des objets correspondant à chaque featured image associée au post.
Il est donc possible d’accéder à toutes les propriétés associées à cette image telles que: sa date de création, son alt et surtout son URL.
Par exemple, afin d’obtenir l’URL de la 1re featured image:
referencAuPost._embedded['wp:featuredmedia'][0].source_url
Compatibilité ACF
Par défaut, les informations stockées dans des champs ACF ne sont pas retournées par le Rest API de WordPress. Heureusement, il est possible de les inclure facilement en ajoutant l'extension ACF to REST API de Aires Gonçalves.
Aussi tôt l'extension installée, les champs ACF seront visibles dans le JSON retourné dans une propriété nommée ACF.
Affichage
Une fois les JSONs désirés identifiés, il ne reste plus qu'à afficher leurs informations!
Par exemple, dans la page single.php servant à afficher les articles, il serait possible de déclarer une balise <script>
et d'effectuer un fetch afin de récupérer les informations de l'article courant:
fetch("/wp-json/wp/v2/posts/<?php the_ID(); ?>")
.then(response => response.json())
.then(data => console.log(data));