New Slang - Création de Site Internet Artisanale
Contact

Accéder à l’API de Wordpress par le code

thierry
Wordpress
Accéder à l'API de Wordpress par le code

Que ce soit en PHP, Javascript ou grâce aux méthodes natives de WordPress, apprenez comment accéder à l’API de WordPress par le code et en traiter les résultats. Vous pourrez ainsi accéder au contenu d’un site WordPress externe et le réutiliser sur votre site ou même une application mobile.

Suite de ma série d’articles sur WordPress. Après une courte explication du développement de shortcode dans WordPress et une introduction à son l’API, voici comment accéder à cette même API par le code. Et surtout, comment en traiter les données reçues.

Requête à L’API

Avant de commencer, il est préférable, si ce n’est déjà fait, d’aller jeter un oeil à mon introduction à l’API de WordPress. Dans cet article, j’explique comment former des requêtes pour accéder à l’API. Le fonctionnement de cette requête a déjà été détaillée dans l’épisode précédent.

Je vais donc récupérer tous les articles de mon blog appartenant à la catégorie Comic et en récupérer les résultats. Je rappel donc la requête en question :

https://www.newslang.ch/wp-json/wp/v2/posts?categories=14

N’hésitez pas à cliquer sur le lien pour afficher le résultat, vous pourrez voir tous les articles de cette catégorie retournés au format JSON.

Accès par le code

On entre maintenant dans le vif du sujet : comment accéder à ces informations par le code. Vous allez-voir comment réaliser ça avec :

  • PHP : Afin d’y accéder depuis n’importe quel site web développé en PHP et sans utiliser les fonctions mises à disposition par WordPress. PHP n’est pas forcément mon langage de prédilection, mais il reste le langage Web serveur le plus utilisé.
  • PHP / WordPress : Toujours en PHP, mais cette fois-ci en utilisant les méthodes mises à disposition par WordPress.
  • Javascript / JQuery : Pour accéder à ces données en Javascript en utilisant la librairie JQuery et des requêtes Ajax.

Disclaimer : Gardez bien en tête que ce code n’a qu’un but pédagogique. Il ne gère pas toutes les erreurs et ne prétend pas être très robuste. Il s’agit d’exemples sur lesquels vous pourrez construire en fonction de vos besoins.

Avant tout : allow_url_fopen

Pour exécuter le code que je vais vous présenter en PHP, vous devrez vous assurer que la variable de configuration allow_url_fopen est bien activée. Késako ? Une fois cette option activée, elle permet l’accès à des ressources FTP ou HTTP distantes depuis un fichier PHP présent sur le serveur.

En gros si vous faites une requête depuis votre code, comme nous allons le faire, vers une URL absolue (http://www….), même si celle-ci est sur le même serveur, allow_url_fopendoit être activé.

Cette option se trouve dans le fichier de configuration php.ini. Une partie des hébergeurs, notamment Infomaniak, vous propose d’ailleurs de l’activer / désactiver directement depuis la console d’administration de votre site.

PHP

Tout d’abord, voici la page d’exemple du résultat du code que vais vous présenter :

Exemple PHP

Je vous fait grâce du HTML entourant mon code PHP, que vous pourrez consulter en affichant la source du fichier. L’idée pour chacune des itérations de ce code sera d’afficher le titre, l’extrait de l’article et un lien pour lire la suite.

Voilà le code PHP :

<?php 
 
    $url = "https://www.newslang.ch/blog/wp-json/wp/v2/posts?categories=14";
    $content = file_get_contents($url) or die("<p>Aye Caramba !</p>");
 
    $json = json_decode($content);
 
    if(count($json) > 0) {
        foreach($json as $article) {
            echo '<h1>'.$article->title->rendered.'</h1>';
            echo '<p>'.$article->excerpt->rendered.'</p>';
            echo '<p><a href="'.$article->link.'">Lire la suite</a></p>';
        }
    } else {
        echo('Aucun résultat.');
    }
 
?>

Petite explication :

  1. On commence par définir l’URL utilisée pour la requête. Ici il s’agit de l’adresse donnée plus haut
  2. Ensuite on appel file_get_contents sur la base de cette URL. Cette méthode exécute une simple requête GET et récupère son contenu. Il aurait également été possible d’utiliser cURL, mais comme nous n’avons pas besoin d’autres fonctions avancées (définition du header de la requête, autre méthode d’appel comme POST, etc.), file_get_contents fait ici très bien l’affaire.
  3. Grâce à json_decode on transforme le contenu JSON retourné en variable PHP. Comme le JSON retourné est un tableau, PHP le transformera en tableau d’objets.
  4. On vérifie que notre JSON contient bien des informations en exécutant count sur le tableau retourné. Si ce n’est pas le cas, on affiche Aucun résultat à l’utilisateur.
  5. Si c’est le cas, itération du contenu du tableau avec foreach. Pour chaque objet $article présent dans le tableau, on retourne le HTML avec le titre ($article->title->rendered), l’extrait ($article->excerpt->rendered) et le lien vers l’article ($article->link).

C’est clair pour vous ? Si vous vous demandé comment je sais que $article->title->rendered retourne le titre de l’article, c’est assez simple. J’ai simplement exécuté la requête exécutée dans mon navigateur, c’est à dire :

https://www.newslang.ch/wp-json/wp/v2/posts?categories=14

Pour plus de clarté, j’ai copié le contenu du JSON retourné et non formaté dans un formateur automatique (par exemple celui-ci).

[
   {
      "id":398,
      "date":"2018-08-15T07:13:28",
      "date_gmt":"2018-08-15T05:13:28",
      "guid":{
         "rendered":"https://newslang.ch/blog/?p=398"
      },
      "modified":"2018-07-25T16:42:13",
      "modified_gmt":"2018-07-25T14:42:13",
      "slug":"50-nuances-de-gris-tres-clair",
      "status":"publish",
      "type":"post",
      "link":"https://newslang.ch/blog/50-nuances-de-gris-tres-clair/",
      "title":{
         "rendered":"Comic : 50 nuances de gris tru00e8s clair"
      },
      "content":{
         "rendered":"[bla bla bla]",
         "protected":false
      },
      "excerpt":{
         "rendered":"
 
En design avec nos u00e9crans u00e0 la pointe, on joue, pour enrichir un visuel, sur d’infimes variations de couleurs… qui ne u00abu00a0parleronsu00a0u00bb pas u00e0 tout le monde.</p>n",
         "protected":false
      },
      "author":1,
      "featured_media":402,
      "comment_status":"open",
      "ping_status":"open",
      ...

Avec le résultat retourné, j’ai recherché le contenu qui m’intéresse grâce au nom des variables et à leur contenu. Comme PHP, grâce à json_decode, reprend à l’exacte la structure des données JSON, cette ligne :

"title":{
         "rendered":"Comic : 50 nuances de gris tru00e8s clair"
        },

Devient en PHP :

$article->title->rendered

PHP / WordPress

Ce deuxième exemple doit impérativement être exécuté au sein de WordPress. Par exemple, et c’est le but de cette série, afin de créer un shortcode dans le fichier functions.php. L’important est que le fichier où cette méthode est utilisée soit compilé par WordPress.

Le code, comme vous pourrez le voir, ne change pas beaucoup du précédent :

<?php 
 
    $url = "https://www.newslang.ch/blog/wp-json/wp/v2/posts?categories=14";
    $request = wp_remote_get($url);
 
    if(is_wp_error($request)) {
        echo("<p>Aye Caramba !</p>");
        return null;
    }
 
    $body = wp_remote_retrieve_body($request);
    $json = json_decode($body);
 
    $json = json_decode($content);
 
    if(count($json) > 0) {
        foreach($json as $article) {
            echo '<h1>'.$article->title->rendered.'</h1>';
            echo '<p>'.$article->excerpt->rendered.'</p>';
            echo '<p><a href="'.$article->link.'">Lire la suite</a></p>';
        }
    } else {
        echo('Aucun résultat.');
    }
 
?>

Voici les différences importantes :

  1. On n’exécute plus simplement file_get_content. Cette fois-ci on commence par créer un objet $request grâce à la méthode WordPress wp_remote_get. Cette méthode créé une requête à l’adresse donnée.
  2. On contrôle ensuite que cette requête ne contienne aucune erreur (adresse invalide, inaccessible, etc.). Si c’est le cas, on annule le reste de l’exécution.
  3. On récupère le contenu de la requête grâce à wp_remote_retrieve_body. Cette méthode récupère le JSON retourné par notre requête.
  4. On traite les données de la même manière que précédemment.

Oui, c’est à peine plus de code que dans la version précédente. Alors vous me direz : quelle est l’utilité de ces méthodes mises à disposition par WordPress ? Il s’agit en fait d’helpers qui s’occupe de tout le travail. Lors de la requête, wp_remote_get utilise la meilleur méthode pour récupérer les données (file_get_contents ou cURL) avec les paramètres et en-têtes nécessaires si besoin.

Donc si vous travaillez dans un fichier WordPress, c’est la méthode à utiliser.

Javascript / JQuery

Dernier exemple que vous pourrez voir ici :

Exemple Javascript

Cette fois l’exemple est un peu plus évolué. Un champ vous permet d’entrer l’id de la catégorie pour laquelle récupérer les données et en cliquant sur Afficher les articles, la page retourne les articles de cette catégorie. Si elle n’existe pas, elle retourne simplement une erreur.

Voici le code, cette fois-ci, pour plus de clarté, accompagné du contenu HTML :

<!doctype html>
<html lang="fr">
<head>
    <title>Accéder à l’API de WordPress par le code : jQuery</title>
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
 
    <script>
 
        $(function() {
 
            $("#show-articles").click(function() {
                var category = $("#category").val();
                var url = "https://www.newslang.ch/blog/wp-json/wp/v2/posts?categories=" + category;
 
                $.get(url, function(data) {
                    var content = "";
 
                    if (data.length == 0) {
                        $("#content").html("<p>Aucun résultat.</p>");
                    } else {
                        $.each(data, function(index, article) {
                            content += '<h1>' + article.title.rendered + '</h1>';
                            content += '<p>' + article.excerpt.rendered + '</p>';
                            content += '<p><a href="' + article.link + '">Lire la suite</a></p>';
                        });
 
                        $("#content").html(content);
                    }
 
                }).fail(function() {
                    $("#content").html("<p>Aye Caramba !</p>");
                });
 
            });
 
 
        });
 
    </script>
</head>
<body style="font-family: 'Raleway', 'Arial', sans-serif">
 
    <input type="text" value="14" id="category" />
    <button id="show-articles">Afficher les articles</button>
 
    <div id="content">
    </div>
 
</body>
</html>

Avant de commencer 2 points important :

  • Vous pourrez remarquer que j’ai nommé le contenu de mon HTML à l’aide d’id afin de m’assurer de pouvoir y accéder dans mon Javascript
  • J’utilise jQuery en chargeant ce dernier depuis le CDN mis à disposition

Maintenant pour le code :

  1. C’est jQuery, donc on commence par inscrire l’événement $(document).ready() qui peut aussi se résumer simplement par $(). Cela permet d’attendre que le document soit intégralement chargé avant d’exécuter ce qui se trouve entre parenthèse.
  2. On inscrit un événement click sur le bouton permettant d’ajouter les articles.
  3. On récupère la valeur de la catégorie donnée par l’utilisateur.
  4. Et on créé l’URL à appeler à partir de cette catégorie.
  5. On exécute la requête GET à l’aide de $.get en donnant en premier paramètre, l’url à appelé et en second paramètre une fonction à exécuté en cas de succès (aussi appelé callback).
  6. Dans cette fonction, on regarde si le contenu retourné est plus grand que 0. Si ce n’est pas le cas, on inscrit dans la variable content Aucun résultat, pour l’afficher ensuite.
  7. Si contenu il y a, itération dans les résultats à l’aide de $.each en donnant en paramètre les données à parcourir (la variable data), l’index et les données retournées par l’itération.
  8. Comme dans le code PHP précédent, on créé le HTML à afficher grâce au contenu du JSON. Ensuite on retourne le résultat dans le HTML de #content
  9. Dernière chose, la méthode fail permet de récupérer une erreur quelconque au moment de la requête. Faites le test, si vous entrez par exemple une valeur null pour la catégorie, vous aurez une erreur puisque la requête n’est plus valide.

Conclusion

J’espère que ce petit tour d’horizon des façons d’accéder à l’API de WordPress vous aura plus. Notez que vous pouvez accéder à n’importe quelle autre API JSON grâce à ce code, avec évidemment quelques variations.

Rendez-vous dans deux semaines pour mettre tout ça en pratique et créer un shortcode WordPress sur la base de ces articles.

Aucun commentaire

Laisser un commentaire

Télécharger cette super ressource gratuite !

Entrez votre adresse e-mail ci-dessous et recevez cette ressource dans votre boîte de réception dans quelques secondes.