REST API

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/

La page retournée 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.

Erreur fréquente
Si le Rest API de votre site ne répond pas à cette URL, il est probable que votre hébergeur ait modifié son emplacement. Pour le trouver, ouvrez le code source de votre page d’accueil et cherchez "wp-json/".

Avec une nouvelle installation WordPress, il est possible qu'il soit situé à cette adresse: https://site.com/index.php/wp-json/wp/v2/

Visualiser les données reçues

À l'aide d'une extention à ajouter à votrwe navigateur web préféré

OUTIL JSONView Permet d’afficher un fichier JSON en format standard dans un navigateur plutôt qu’en une longue chaine de caractères.

Avec Firefox

Avec Firefox, vous n'avez pas besoin d'extention supplémentaire pour visualiser le JSON de manière propre et ordonnée.

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.

Pages (pages)

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é.

Articles (posts)

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.

Dans cet exemple: /posts.

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

Type de publication personnalisé (custom post type)

Si un autre type de publication (custom post type) doit être retourné. Par exemple, les jeux comme dans l'exercice "Valet de coeur", il suffit de spécifier une route différente.

Dans cet exemple: /games.

https://site.com/wp-json/wp/v2/games

Et si on précisait la route vers une page spécifique?

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 Reference REST API REST API expliqué par capitaine WP 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 orderpermettant 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
Arguments Le premier paramètre est séparé de l’URL grâce à un point d’interrogation (?). Tous les paramètres suivants sont séparés entre eux par une perluète (&). 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.

Certaines extensions permettent d’ajouter plus d’une featured image, d’où pourquoi un tableau est retourné.

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

_embed Compatibilité SCF

Les post types que vous créez avec SCF vont être pris en compte et retournés par le REST API.

Par compte, les informations stockées dans des champs SCF ne sont pas retournées par le Rest API de WordPress. Heureusement, il est possible de les inclure facilement en activant REST API pour le/les groupe(s) de champs concernés.

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)); the_ID() est une fonction de WordPress retournant le id de la page courante, ex: 10. Pour creuser dans un JSON

Si vous ne vous souvenez pas comment creuser dans un JSON et aller chercher l'info qu'on veut afficher dans la page, retournez voir les contenus de cours de Fetch API. Je vous remonte aussi un CodePen que vous avez déjà vu dans un cours antérieur qui continent des explications (voir les commentaires dans le JS).

Fetch API L'API Fetch: interface pour récupération de ressources à travers le réseau

See the Pen DEMO Fetch API | GET - Reddit by TIM Montmorency (@tim-momo) on CodePen.



EXERCICE WP Rest API - Vice Versa Créer un microsite permettant de présenter les protagonistes du film Vice Versa


REST API