Afficher vos POSTS via l’API REST de Wordpress

Voici 2 techniques possibles pour récupérer l’url de vos images mises en avant (thumbnail) sur Wordpress.

pierrealainfaure.com
2 min readNov 24, 2023

Imaginez que vous souhaitiez créer une gallerie d’images sur le front de votre blog Wordpress.

Voir le script en action : https://www.pierrealainfaure.com/karousel/

Le 1er reflexe sera de faire une requête Mysql avec la methode WP_Query. Mais les datas créées seront limitées dans le giron de votre installation Wordpress. Si on veut aller plus loin et relier ces données à une app android par exemple, il faut…

Une autre approche plus universelle, qui serait d’utiliser l’API Rest de Wordpress qui rends vos datas beaucoup plus accessibles.
Pour démarrer, il faut alors se rendre sur une url du type :

https://monsiteweb.com/wp-json/wp/v2/posts?_fields=id,title,featured_media,&per_page=20&_embed=1

Ici on cherche tous les POST avec les fields (champs) : id, title et featured_media (le thumbnail du post).

Cela retourne qlq chose comme :

[{“id”:68,”title”:{“rendered”:”Des plats magnifiques \u00e0 gouter \ud83d\ude1c”},”featured_media”:71},…

Pour “décoder” l’id 71 du media et avoir quelque chose qui ressemble à un url exploitable, il faut se rendre sur une autre url de l’API REST de Wordpess très pratique :

http://wordpress-defaut.local/wp-json/wp/v2/media/71

Cela retourne qlq chose comme :

{“id”:71,”date”:”2023–11–22T18:34:12",”date_gmt”:”2023–11–22T18:34:12",”guid”:{“rendered”:”http:\/\/monsiteweb.com\/wp-content\/uploads\/2023\/11\/stack.png”},”modified”:….

En fait, ça retourne des kilomètres d’infos sur l’image : toutes ses tailles (médium, large…), sa date de création, son alt_text, son media_type etc… Et bien sûr, son url : http:\/\/monsiteweb.com\/wp-content\/uploads\/2023\/11\/stack.png

Ca tombe bien, c’est ce qu’on cherche :)

Du coup, il faut une petite fonction qui, à partir de l’id du thumbnail de chaque Post, va chercher son url !

Cela peut donner ça :

  1. Créer votre adresse url de l’api rest wordpress :

const postsUrl = `${window.location.origin}/wp-json/wp/v2/posts?_fields=featured_media,&per_page=20&_embed=1`;

2. Créer une requete Ajax avec fetch qui produit un tableau d’objets postsData qui ressemble à ça :
{
“id”: 68,
“title”: {
“rendered”: “Des plats magnifiques à gouter 😜”
},
“featured_media”: 71
},…

fetch(postsUrl).then(response => {
if (!response.ok) {
throw new Error(`Network response was not ok: ${response.statusText}`);
}
return response.json();
})
.then(postsData => {

postsData.forEach(async (post) => {

const thumbnailId = post.featured_media;//Prendre l’id du thumbnail

const urLocation = window.location.origin;//prendre l’url du serveur https://monsite…

const urlMedia = await fetchMedia(urLocation,thumbnailId);// voir les détails ci-dessous
})
.catch(error => {
console.error(‘Fetch error:’, error);
});

Il faut faire un forEach du tableau de données provenant de l’url (api rest), ensuite appeler une fonction fetchMedia() qui bouclera un fetch sur chaque id de media.

L’idée maintenant est d’utiliser encore l’api rest mais au lieu d’aller chercher les posts comme au début :
../wp-json/wp/v2/posts
chercher les media :
../wp-json/wp/v2/media

Donc la fonction donne :

function fetchMedia(urLocation, thumbnailId){
return fetch(`${urLocation}/wp-json/wp/v2/media/${thumbnailId}`)
.then(response => response.json())
.then(mediaData => mediaData.source_url)
.catch(error => console.error(‘Error fetching media data:’, error));
return null;
}

Au final on obtient bien chaque url des thumbnail de chaque posts : const urlMedia = await fetchMedia(urLocation,thumbnailId);

Sources : https://developer.wordpress.org/rest-api/

--

--