Bonjour, aujourd’hui nous allons parler des flux. On voit de plus en plus apparaître des API, par exemple pour récupérer la météo, des articles externes à intégrer ou autre. Dans ce billet nous allons développer un petit plugin WordPress pour l’interrogation d’un flux API formaté en JSON permettant afficher des événements sur notre site. Dans un premier temps nous nous occuperons de la partie admin. On rendra administrable l’url du flux ou encore les pages de listing , etc…
Voici aussi une petite api IPSUM pour faire quelques tests. On est donc partie pour interroger un flux API avec wordpress.

Création du plugin

C’est parti, on va commencer par créer notre plugin « json_integration ». On crée un dossier dans

 /wp-content/plugins/json_integration

On le déclare ensuite comme à chaque fois pour que WordPress le reconnaisse. Je vous invite à aller lire l’article sur la création d’un plugin dans WordPress si vous n’avez pas les bases.

<?php

/*
 Plugin Name: Json Integration
 Plugin URI: https://kevinjaniky.com/
 Description: Intégration d'un flux json.
 Version: 1.0.0
 Author: Kevin JANIKY
 Author URI: https://kevinjaniky.com/
 License: GPL3
 Text Domain: json_integration
 */

Comme à mon habitude je crée un dossier admin dans notre plugin, cela me permet de bien séparer chaque fonctionnalité.

Ajouter une entrée dans le menu

Je vais ajouter une entrée dans le backoffice pour pouvoir créer notre page d’administration. Heureusement pour nous, rien de plus simple. WordPress met à disposition une fonction permettant d’ajouter facilement une valeur.

add_menu_page( string $page_title, string $menu_title, string $capability, string $menu_slug, callable $function = '', string $icon_url = '', int $position = null )

Dans mon cas, voici ce que j’obtiens :

function ji_menu_admin()
{
    add_menu_page('Json Integration', 'Json Integration', 'manage_options', 'json-integration', 'ji_render_admin_callback');
}

Remarque : Dans toute mes fonctions j’ajoute un prefix ji_ ce qui me permet de bien isoler mon code et d’éviter les conflits lors de prochain développement.

Le callback du menu

Je déclare également dans le dernier paramètre un callback ( une fonction de retour qui sera appelé lors du clic sur le lien de menu ).

Dans ce callback je vais définir plusieurs choses :

  • Le template à afficher
  • Le traitement lorsque je sauvegarderai le formulaire de la page ( POST )
  • La récupération des informations déjà enregistrées en base de données

Dernière chose, je vais utiliser la fonction update_option et get_option. Ce sont des fonctions qui permettent de sauvegarder / d’afficher des valeurs en base de données lié a des clés.


function ji_render_admin_callback()
{
    // Le traitement lorsque la page est appelé en post, donc à la sauvegarde de notre formulaire
    if (!empty($_POST)) {
        if (!empty($_POST['url'])) {
            update_option('json_integration_url', $_POST['url']);
        }
        if (!empty($_POST['page'])) {
            update_option('json_integration_page', $_POST['page']);
        }
        if (!empty($_POST['page_event'])) {
            update_option('json_integration_page_event', $_POST['page_event']);
        }
    }

    // Je récupère les valeurs dont j'ai besoin quand la page s'affiche
    $pages = get_pages();
    $p = get_option('json_integration_page');
    $pe = get_option('json_integration_page_event');
    $url = get_option('json_integration_url');

    // Je récupère le template
    include dirname(__FILE__) . '/templates/admin_form.php';
}

Pour finaliser notre menu, on devra demander à WordPress de venir charger notre fonction au moment où il construira notre menu.

add_action('admin_menu', 'ji_menu_admin');

Le template

<h1>JSON INTEGRATION</h1>
<form method="post">
    <div class="group-f">
        <label for="url">Url du flux</label>
        <input type="text" name="url" value="<?php echo (!empty($url)) ? $url : '' ?>" class="regular-text" id="url">
    </div>
    <div class="group-f" style="margin-top:10px;">
        <label for="pages">Pages de listing</label>
        <select name="page">
            <?php
            foreach ($pages as $page) {
                if ($page->ID == $p) {
                    ?>
                    <option selected value="<?php echo $page->ID ?>"><?php echo $page->post_title ?></option>
                    <?php
                } else {
                    ?>
                    <option value="<?php echo $page->ID ?>"><?php echo $page->post_title ?></option>
                    <?php
                }
            }
            ?>
        </select>
    </div>
    <div class="group-f" style="margin-top:10px;">
        <label for="pages">Page d'un event</label>
        <select name="page_event">
            <?php
            foreach ($pages as $page) {
                if ($page->ID == $pe) {
                    ?>
                    <option selected value="<?php echo $page->ID ?>"><?php echo $page->post_title ?></option>
                    <?php
                } else {
                    ?>
                    <option value="<?php echo $page->ID ?>"><?php echo $page->post_title ?></option>
                    <?php
                }
            }
            ?>
        </select>
    </div>


    <input type="submit" class="button button-primary" style="margin-top:10px" value="Sauvegarder">
</form>

Pour le template rien de bien compliqué. Un peu d’HTML, un formulaire et le tour est joué. J’ai donc déclaré un simple champs text pour l’url du flux. Pour les pages de listing et d’affichage d’un évènement j’ai préféré un sélecteur contenant la liste de toutes les pages et en valeur leurs ID que je stockerai en base.

Dernière étape

La dernière chose à faire dans cette partie est simplement d’appeler le fichier ji_admin.php pour qu’il soit exécuté, dans json_integration.php. Voici ce que contient à présent mon fichier.

<?php

/*
 Plugin Name: Json Integration
 Plugin URI: https://kevinjaniky.com/
 Description: Intégration d'un flux json.
 Version: 1.0.0
 Author: Kevin JANIKY
 Author URI: https://kevinjaniky.com/
 License: GPL3
 Text Domain: json_integration
 */

require_once dirname(__FILE__) . '/admin/ji_admin.php';

Dès que vous avez terminé les modifications actualisées votre page WordPress. Un nouvel onglet va apparaître dans le menu.

Menu wordpress

En cliquant sur ce même onglet vous allez accéder à votre formulaire.

Formulaire intégré dans la partie admin de wordpress

Vous pouvez à présent construire un formulaire plus complet , ajouter du CSS , du JS. Libre à vous de faire selon vos besoins avant d’interroger le flux api.

On va s’arrêter là pour aujourd’hui. La partie front arrivera dans le prochain billet et vous aurez alors 100% du code. Je vous souhaite bon courage et bon développement, n’hésitez pas à me donner vos avis.

PS : Je mettrais sur Github les sources du projet une fois terminé pour que vous puissiez l’adapter à vos besoins.

Photo by Dennis Kummer on Unsplash

Articles liés:

Show CommentsClose Comments

Leave a comment