Travailler avec des APIs dans WordPress

Les APIs sont devenues au fil du temps une des composantes importante de la distribution de l’information sur le web. En effet, il en existe énormément (le site ProgrammableWeb en compte plus de 20 000), avec une variété impressionnante. Elles fournissent tout type d’informations : des photos d’Instagram à un répertoire de toutes les bières existantes.

L’utilisation de ces APIs est donc fréquente et l’intégration au sein d’un site web des données fournies est facilitée par WordPress : c’est cela que nous allons voir en réalisant un exemple.

Tout d’abord, voyons exactement ce qu’est une API.

Qu’est-ce qu’une API ?

API est l’acronyme de Application Programming Interface ou interface de programmation applicative en français. Mais cela ne nous avance pas plus 🙂

Pour schématiser, imaginons qu’un russe et un japonais dînent à la même table d’un restaurant et qu’aucun des deux ne parle la langue de l’autre. Lorsque le russe demande le sel au japonais, il ne se passe rien, car il ne se comprennent pas. Par contre, si un traducteur est placé entre les deux personnes, il leur permettra de communiquer facilement. L’API est le traducteur. En effet, l’API permet à deux systèmes différents (votre site et Instagram par exemple) de communiquer et de « se comprendre » en parlant la même « langue ». Concrètement, en utilisant l’API d’Instagram vous pouvez lui demander les 3 dernières photos d’un utilisateur pour l’afficher sur votre site.

WordPress et l’utilisation des API

Afin de gérer les différents types de requêtes, WordPress a créé une API HTTP qui permet d’avoir une méthode standardisée et unique. Lorsque l’on utilise PHP, on peut utiliser cURL pour créer des requêtes mais cURL n’est pas toujours installé sur les serveurs. Ainsi, en utilisant l’API HTTP de WordPress, vous pouvez profiter des possibilités qu’offrent les différentes API disponibles.

Pour effectuer une requête GET ou POST, WordPress propose l’utilisation de wp_remote_get et wp_remote_post qui peuvent être accompagné d’un certain nombre d’arguments afin d’ajouter des paramètres précis.

Exemple d’utilisation

Pour illustrer le fonctionnement des APIs avec WordPress, je vais récupérer des infos sur une API en libre accès pour ensuite les afficher sur une page. Je vais me servir de l’API fournie par le site JSONPlaceholder qui permet de récupérer plusieurs types de données (articles, utilisateurs, photos, etc.). Toutes les données seront retournées en JSON comme c’est souvent le cas pour les APIs.

Dans l’exemple suivant, je souhaite donc afficher les utilisateurs ainsi que leur numéro de téléphone. Premièrement, il faut parcourir la documentation pour comprendre le fonctionnement de l’API et la structure des données. Ici, elle est assez sommaire, la récupération des utilisateurs se fait via cette URL : https://jsonplaceholder.typicode.com/users.

Récupération des données dans WordPress

WordPress dispose d’une fonction native wp_remote_get pour récupérer les données présentes dans une API. Cette fonction s’utilise de la façon suivante : wp_remote_get( $url, $args ). Ainsi, la variable $url correspond à l’URL de l’API et la variable $args aux paramètres que l’on envoit à l’API pour affiner les contenus que nous recevrons en retour. Voici donc le code que nous utiliserons dans notre exemple :

$request = wp_remote_get('https://jsonplaceholder.typicode.com/users');

if( is_wp_error( $request ) ) {
    return false; // Si il y a une erreur, on s'arrête là
}

Ainsi, dans cet exemple, j’effectue 2 actions :
1- Appel de l’URL de l’API
2- Je vérifie qu’il n’y a pas d’erreurs, sinon je quitte

A partir de là, tout le contenu de la réponse est dans ma variable $request. Les réponses d’une API se composent généralement de plusieurs parties (entêtes, corps, etc.). La partie qui va nous intéresser sera le corps de la réponse. Par conséquent, nous allons isoler cette partie, là encore à l’aide d’une fonction de WordPress : wp_remote_retrieve_body. Concrètement, cela se traduira comme cela dans la suite du code :

$body = wp_remote_retrieve_body( $request );
var_dump($body);

En utilisant var_dump($body), nous affichons sur notre page le contenu de la variable. Pour cet exemple, chaque utilisateur affiche cela :

{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  }

Affichage des données sur le site

Maintenant que nous avons nos données, affichons le nom et le numéro de téléphone de chaque utilisateur. Avant de faire cela, il nous reste à utiliser la fonction PHP json_decode afin de convertir le JSON en variable PHP.

$data = json_decode( $body, true );

A noter que la variable true dans l’exemple ci-dessus, indique que nous retournons un tableau et non un objet.

Enfin, il suffit de parcourir le contenu pour afficher ce que l’on souhaite à l’aide d’une boucle foreach :

foreach ($data as $item) {
  $name = $item['name'];
  $phone = $item['phone'];
  echo '<p>' . $name . ' - ' . $phone . '</p>';
}

Nous affichons donc bien les noms et numéros de téléphones des utilisateurs contenus dans l’API :

<p>Leanne Graham - 1-770-736-8031 x56442</p>
<p>Ervin Howell - 010-692-6593 x09125</p>
<p>Clementine Bauch - 1-463-123-4447</p>
<p>Patricia Lebsack - 493-170-9623 x156</p>

Conclusion

Comme nous l’avons vu dans cet exemple, l’utilisation d’APIs est facilitée par les méthodes natives au sein de WordPress. Bien que chaque API soit différente dans sa structure ou ses données, le principe de récupération de données reste le même.

Le fonctionnement des APIs est riche et permet, non seulement de récupérer des données, mais également d’en ajouter, supprimer ou les mettre à jour, n’hésitez donc pas à explorer toutes les possibilités !

Haut de page