Bonjour, nous voici dans la suite de l’article de la semaine dernière. Si vous n’avez pas vu le début du projet, n’hésitez pas à aller y faire un tour. Dans cette partie, nous allons pouvoir gérer toute la partie front de notre plugin pour afficher les informations provenant du flux API. Réalisons donc ensemble la partie front.

Pour cet exemple, j’ai créé un fichier JSON que j’appelle grâce à une URL. Voici la structure d’un objet dans mon flux :

{
"title": "Lorem ipsum dolor sit amet",
"slug": "lorem-ispum-dolor-sit-amet",
"resume": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a ultrices urna. Suspendisse potenti. Praesent eu efficitur urna, id dictum dolor. Quisque eget mattis elit.",
"date": "01/01/2020",
"contenu": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a ultrices urna. Suspendisse potenti. Praesent eu efficitur urna, id dictum dolor. Quisque eget mattis elit. Duis id ex magna. Pellentesque sed dignissim mauris, sit amet ultrices felis. Mauris fermentum lacinia nisl, ut luctus libero ultrices non. Nam finibus velit nisl, eget eleifend mauris convallis vel. Integer lacus ante, pretium vitae sem at, interdum vulputate enim.\n\nSed magna nibh, mattis ac eros in, luctus bibendum nisl. Aenean cursus placerat tellus, at blandit lacus fringilla in. Aliquam ut tristique diam. Praesent eget diam at leo cursus accumsan in et est. Aenean tincidunt nibh id vulputate viverra. Nullam eleifend egestas quam id maximus. Maecenas at est sit amet augue luctus aliquet eget nec tellus. Sed efficitur dui vel elit auctor, eu malesuada elit vestibulum.\n\nDonec eget consectetur sapien. Duis vitae lorem in velit commodo imperdiet. Pellentesque pellentesque velit ligula, at bibendum eros sodales eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam odio lectus, aliquet et sem eu, condimentum lacinia ex. Fusce vitae sapien in nunc interdum iaculis. Vivamus et felis lorem. Quisque blandit justo eleifend nulla aliquet efficitur laoreet vitae est. Nam eleifend in tellus vel maximus. Praesent velit erat, maximus eget ante et, ultrices imperdiet magna.\n\nNulla laoreet vulputate massa, sed pulvinar erat laoreet at. Proin nibh erat, cursus nec turpis sit amet, facilisis sollicitudin erat. Sed ac quam aliquam, lacinia leo quis, cursus leo. Maecenas non vestibulum sapien. Quisque quis augue in neque tristique laoreet. Vivamus condimentum maximus purus sed iaculis. Curabitur sit amet lectus eu dolor placerat tristique vel sit amet velit. Nulla eleifend nibh eu lacus porttitor, quis posuere dolor faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam est eu auctor semper. Fusce aliquet condimentum odio sed congue. Fusce ac pulvinar nisl, at mollis nulla. In eu justo lorem.",
"lieu": "Paris",
"tags": [
	"expo"
	]
}

Le listing des objets

On va commencer par la page listing, celle-ci va simplement lister les objets que je récupère dans le flux. Dans un dossier public dans notre plugin, je crée un fichier ji_public.php

Dans notre première fonction, nous allons récupérer l’ID de la page qui va contenir le listing, celle définie dans le backoffice. On le comparera ensuite à l’id de la page courante. Pour un soucis de temps, je décide également de charger Bootstrap pour gérer un affichage basique mais seulement sur les pages concernées. Ensuite, je récupère l’url du flux en base de données et j’appelle cette même url pour récupérer et traiter le flux. Dernière étape, je charge le template.

<?php
function ji_intercept_list_page(){
    $pageToIntercept = get_option('json_integration_page');
    global $post;
    if($post->ID == $pageToIntercept){

        wp_enqueue_style('bootstrap-cdn-css','https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');
        wp_enqueue_script('bootstrap-cdn-js','https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js',['jquery']);

        $urlFlux = get_option('json_integration_url');
        if(!empty($urlFlux)){
            $data = wp_remote_get($urlFlux);
            if(!$data instanceof WP_Error){
                $json = $data['body'];
                $content = json_decode($json,true);
                include dirname(__FILE__).'/templates/ji_listing.php';
                exit();
            }
        }
    }
}

J’ajoute l’action correspond à « template_redirect », cela me permettra d’appeler cette fonction à chaque fois qu’une page front s’affichera.

add_action('template_redirect', 'ji_intercept_list_page');

Le template du listing

Comme à chaque fois un template HTML + PHP, il n’y a pas de réel difficulté, les valeurs sont stockées dans un tableau. Une fois récupérée, je boucle sur ce même tableau et j’affiche les valeurs.

<?php
get_header();
?>
<style>
    #listing .list-group-item {
        text-decoration: none;
    }
</style>
    <div class="container-fluid mb-5">
        <h1 class="text-center">Event List</h1>

        <div class="row" id="listing">
            <div class="col-2"></div>
            <div class="col-8 ">
                <div class="list-group">
                    <?php
                    if (!empty($content)) {
                        foreach ($content as $c) {
                            ?>
                            <a href="<?php echo home_url() ?>/event/<?php echo $c['slug'] ?>" class="list-group-item list-group-item-action ">
                                <div class="d-flex w-100 justify-content-between">
                                    <h5 class="mb-1"><?php echo $c['title'] ?></h5>
                                    <small><?php echo $c['date'] ?> - <?php echo $c['lieu'] ?></small>
                                </div>
                                <p class="mb-1"><?php echo $c['resume'] ?></p>
                                <?php
                                    if(!empty($c['tags'])){
                                        foreach ($c['tags'] as $tag){
                                            ?>
                                            <span class="badge badge-primary "><?php echo $tag ?></span>
                                            <?php
                                        }
                                    }

                                ?>
                            </a>
                            <?php
                        }
                    }

                    ?>

                </div>

            </div>
        </div>
    </div>


<?php
get_footer();

Remarque : Je défini une URL /event/{slug} pour chaque item, nous allons y revenir juste après pas d’inquiétude.

Accédez à la page que vous avez choisie en backoffice, vous devriez voir apparaitre votre listing.

Remarque : N’oubliez pas d’inclure votre fichier ji_plugin.php dans le fichier json_integration.php. Référez vous au premièr article si vous n’y arrivez pas.

La page d’un objet

Cette étape est importante si vous voulez pouvoir créer des urls à la volée. Vous avez déclaré une page dans votre backoffice. Récupérez son slug. Vous allez devoir le remplacer dans la fonction suivante par la valeur : page-custom-event .

function ji_add_rules_redirect(){
    add_rewrite_rule('^event/?([^/]*)/?','index.php?pagename=page-custom-event&slug=$matches[1]','top');
    flush_rewrite_rules();
}

add_rewrite_rule permet d’ajouter une règle de réécriture d’url a wordpress. Dans mon cas toute urls commençant par event/. Je récupère ensuite la seconde partie et l’attribue a la variable GET slug. On termine par un flush des règles, pour que tout sois pris en compte. Nous finirons enfin par ajouter l’action.

add_action('init', 'ji_add_rules_redirect', 10, 0);

Récupérer le slug

Une fois la page, nous aurons besoin de récupérer le slug pour pouvoir afficher le bon objet. On ajoute donc au tableau $query_vars le slug. On ajoute le filtre correspondant et on passe la suite.


function ji_set_query_var( $query_vars )
{
    $query_vars[] = 'slug';
    return $query_vars;
}

add_filter( 'query_vars', 'ji_set_query_var' );

Récupérer les bonnes valeurs sur la bonne page

Comme pour le listing on récupère l’ID de la page définie et celui de la page courante. On récupère l’url du flux, on lance la requête. Dans mon cas je n’ai qu’une url qui me liste tous les objets. Je vais donc faire le traitement côté PHP, mais rien ne vous empêche d’appeler une autre URL, un autre flux, etc …

Petite subtilité on récupère le slug grâce aux query_vars pour pouvoir matcher.


function ji_intercept_event_rules(){
    $pageToIntercept = get_option('json_integration_page_event');
    global $post;
    if($post->ID == $pageToIntercept) {
        $slug = get_query_var('slug');
        if(!empty($slug)){

            $urlFlux = get_option('json_integration_url');
            if(!empty($urlFlux)) {
                $data = wp_remote_get($urlFlux);
                if (!$data instanceof WP_Error) {
                    $json = $data['body'];
                    $content = json_decode($json, true);
                    foreach ($content as $c){
                        if($c['slug'] == $slug){
                            wp_enqueue_style('bootstrap-cdn-css','https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');
                            wp_enqueue_script('bootstrap-cdn-js','https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js',['jquery']);
                            $article = $c;
                            include dirname(__FILE__) . '/templates/ji_event.php';
                            exit();
                        }
                    }
                }
            }
        }

    }
}

add_action('template_redirect', 'ji_intercept_event_rules');

On ajoute l’action et on ce penche sur le dernier template.

Template d’un seul objet

Sans surprise, on utilisera de l’HTML et du PHP. On récupère la variable $article contenant l’objet courant.

<?php
get_header();
?>

    <div class="container-fluid">
        <h1 class="title text-center">
            <?php echo $article['title'] ?>
        </h1>

        <div class="container">
            <div>
                <span class="badge badge-warning"><?php echo $article['lieu'] ?></span>
                <span class="badge badge-success"><?php echo $article['date'] ?></span>
                <?php
                foreach ($article['tags'] as $t) {
                    ?>
                    <span class="badge badge-primary"><?php echo $t ?></span>
                    <?php
                }
                ?>
            </div>
            <p><?php echo $article['resume'] ?></p>
            <p><?php echo $article['contenu'] ?></p>
        </div>
    </div>
<?php
get_footer();

Félicitation !

Et bien voilà. Nous sommes arrivés au bout de ce petit projet. Je vous félicite si vous êtes arrivé jusque la. Continuez à persévérer. Comme j’ai tendance à le dire très souvent, quand on veut, on peut. Vous savez comment intégrer une api dans wordpress, créer une page d’administration, récupérer ces valeurs en front. Je vous ai mis le code sur github, libre à vous de Forker le répo.

N’hésitez à me donner vos avis, vos retours et vos questions. A bientôt.

Photo by Launchpresso on Unsplash

Articles liés :

Show CommentsClose Comments

Leave a comment