New Slang - Création de Site Internet Artisanale

Afficher les news d’un autre site Wordpress avec un shortcode

thierry
Afficher les news d'un autre site Wordpress avec un shortcode

Dernier article de ma petite série sur le développement WordPress. Voici l’heure de la mise en pratique : nous allons créer un shortcode qui utilisera l’API de WordPress pour afficher les news d’un autre site. Pour un résultat ma foi, pas piqué des hannetons !

Pour commencer et pour vous assurer de ne pas être perdu, jetez un œil à mes articles précédents, dont le code et les concepts seront utilisés ici. À savoir :

Le concept

Le concept de cet article final est simple : regrouper toutes ces connaissances pour créer un shortcode WordPress, accédant à l’API d’une autre site WordPress (ça fait beaucoup de WordPress) pour en afficher le contenu. Plus exactement : récupérer la liste des articles d’une catégorie spécifique d’un autre site WordPress, pour l’afficher sur son site. Ouf.

Comme l’intégralité du code se fera au sein de WordPress, il sera nécessaire d’utiliser les méthodes de ce dernier pour accéder à l’API et non les méthodes PHP de base, comme expliqué dans mon article précédent.

Récapitulation

Récapitulons rapidement les 3 informations les plus importantes des articles précédents avant de commencer :

  1. Pour créer un shortcode, commencer par créer un thème enfant
  2. Dans ce thème enfant, saisir le code du shortcode (et donc le code que je vais vous présenter) dans le fichier functions.php
  3. Commencer par s’assurer que la requête passée à l’API est valide et retourne bien les informations désirées. Entrer l’adresse de cette requête dans un navigateur. Exemple :
    https://www.newslang.ch/wp-json/wp/v2/posts?categories=14
    Qui affichera la liste des articles appartenant à la catégorie 14, id unique de la catégorie comic.

Vous ne savez pas comment créer un thème enfant ? Vous aimeriez plus de détails à ce sujet ? Découvrez mon générateur de thème enfant WordPress !

En plus de vous permettre de créer votre thème en un clic, vous y trouverez toutes les informations importantes pour bien comprendre leur fonctionnement.

Le code

Assez parlé, voici le code complet du shortcode qui effectuera cette action. Comme indiqué plus haut, ce code devra être ajouté au fichier functions.php de votre thème enfant.

<?php

    ...
  
    function my_news_shortcode($attr) {         
        $attr = shortcode_atts(
            array(
                'category' => 14,
                'url' => 'https://newslang.ch/wp-json/wp/v2'
            ), $attr
        );
  
        $url = $attr['url'].'/posts?categories='.$attr['category'].'&per_page=10';
        $request = wp_remote_get($url);
  
        if(is_wp_error($request)) {
            return null;
        }
  
        $body = wp_remote_retrieve_body($request);
        $data = json_decode($body);
  
        $content = "<div class='my-news'>";
  
        if(!empty($data)) {
            foreach( $data as $post ) {
                $image_url = "";
  
                if ($post->featured_media != "") {
                    $media_url = $attr['url'].'/media/'.$post->featured_media;
                    $request = wp_remote_get($media_url);
      
                    if(!is_wp_error($request)) {
                        $body = wp_remote_retrieve_body($request);
                        $data_img = json_decode($body);
                        $image_url = $data_img->media_details->sizes->full->source_url;
                    }
                }
  
                $content .= 
                '<div class="news-item">
                    <a href="'.$post->link.'" style="background-image: url('.$image_url.');" title="'.$post->title->rendered.'" target="_blank"></a>
                    <div class="meta-infos">
                        <h4><a href="'.$post->link.'" alt="'.$post->title->rendered.'" target="_blank">'.$post->title->rendered.'</a></h4>
                        <p>'.date('d.m.Y', strtotime($post->date)).'</p>
                    </div>
                </div>';
            }
        }
  
        $content .= '</div>';
  
        wp_reset_postdata();
        return $content;
    }
  
    add_shortcode('my_news', 'my_news_shortcode');
  
?>

Il y a pas mal de code, mais rien de bien compliqué :

  1. On créé donc un fonction appelée my_news_shortcode, le nom de cette fonction est réutilisée en fin de code pour enregistrer le shortcode avec add_shortcode('my_news', 'my_news_shortcode').
  2. On définit les attributs par défaut de $attr. Si l’utilisateur, au moment de l’appel du shortcode, choisi de donner d’autres attributs, par exemple en entrant : [my_news category=10 url='https://youplaboum.ch/wp-json/wp/v2'] ces informations par défaut seraient écrasées par les valeurs passées en paramètres.
  3. Construction de l’URL complet de l’API à contacter à partir de l’URL, du modèle posts, de la catégorie donnée. En limitant l’affichage à 10 articles par page.
  4. On exécute la requête en vérifiant bien que WordPress ne retourne pas une erreur. Le contenu de cette dernière est récupérée avec wp_remote_retrieve_body. Puis on transforme ce résultat en json.
  5. On initialise ensuite la variable $content. Si le résultat json n’est pas vide, on commence à remplir la variable $content avec du HTML.
  6. Pour chaque article on commence par regarder si une image mise en avant existe. Pour se faire, on récupère l’id du media lié, indiqué dans $post->featured_media, s’il n’est pas vide.
    Ensuite on fait un nouvel appel à l’API. Cette fois plutôt que de récupérer la liste des articles avec posts, on accède au modèle media en donnant directement l’id du média qui nous intéresse. On stock tout ça dans notre variable $data_img.Si le résultat est valide, on récupère le chemin vers l’image en question avec $data_img->media_details->sizes->full->source_url. Il serait possible de récupérer une des autres tailles générées par WordPress par défaut, mais pour des questions pratique, on récupère l’image source en taille réelle.
  7. Ensuite on génère le contenu HTML avec :
    1. Un lien vers l’article à l’aide de $post->link dont le contenu affiche en background-image l’image mise en avant de l’article.
    2. Les données meta de l’article à commencer par son titre. À nouveau avec un lien vers l’article.
    3. Pour terminer la date de l’article affiché sous la forme d.m.Y, soit jour.mois.année(exemple : 12.08.2018). Grâce à la méthode PHP strtotime.
  8. Point très important avant de terminer, on appel wp_reset_postdata. Par défaut WordPress possède une variable globale $post qui permet d’accéder à des informations de l’article (ou de la page actuelle) depuis n’importe où dans le code.Or, lorsqu’on récupère les articles d’un autre site avec les méthodes WordPress, ces méthodes auraient tendance à transformer la variable globale $post. Pour s’assurer que ce n’est pas le cas, on force le rechargement de cette variable à sa valeur initiale au chargement de la page. Sans cette méthode, vous risquez d’avoir de drôles de résultats.
  9. On retourne la variable $content qui contient le HTML à affiché. Et la magie opère !

Conclusion

Mon article était plutôt court, mais les principes et une grande partie du code avait déjà été expliqués précédemment. L’idée est surtout de vous proposer un cas pratique qui peut vous donner un tas d’autres idées de shortcode ou d’utilisations de l’API fournie.

Dernièrement j’ai créé un shortcode utilisant l’API. Ce dernier affichait tous les médias de type PDF enregistrés sur un site WordPress, avec un titre et une description pour chaque fichier. Ou encore un shortcode, sur une page listant les références d’une entreprise, récupérant aléatoirement l’image d’une des références pour l’afficher en bannière de page.

Bref les possibilités sont infinies avec WordPress, son API et ses shortcodes. Si vous avez des exemples de shortcode que vous avez réalisés ou que vous avez la moindre question sur cette série d’articles, n’hésitez pas à participer dans les commentaires. En attendant : à vous de jouer !

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.