Lister les données d’une table personnalisée dans le tableau de bord

Vous avez créé une table personnalisée et ajouté une option de menu permettant de gérer ses données dans le tableau de bord. Bravo ! Il vous faut maintenant coder la gestion de ces données.

▼Publicité

L'approche de WordPress veut que le tableau de bord liste les données dans un tableau. C'est à partir de cette liste que les données pourront être éditées, tout comme l'API WordPress le fait pour les usagers, par exemple.

Gérer les droits d'accès

Lors de l'ajout de l'option de menu, il faut préciser les droits requis pour avoir accès à cette option de menu (ex : manage_options). On est donc assuré qu'un usager qui n'est qu'un abonné au site n'aura pas ces droits donc il ne verra pas l'option de menu.

Avant d'afficher la page associée à cette option de menu, l'API WordPress se charge de vérifier à nouveau si l'usager détient les droits requis. Ainsi, si un usager de tenter d'accéder à la page de configuration en entrant directement son URL (ex : http://mondomaine.com/wp-admin/admin.php?page=monprefixe_gestion), il doit détenir les droits requis pour que la page d'affiche.

On peut toutefois exiger des droits plus élevés pour certaines sections de la page.

Ex :

WordPress (PHP)

if ( current_user_can( '...' ) ) {

    ...

}

Utilisation de WP_List_Tables pour le développement natif de WordPress

Lorsqu'on consulte le code permettant de générer la liste des articles, on constate que cette liste est basée sur la classe WP_List_Table dont le code est disponible dans le fichier  www\votresite\wp-admin\includes\class-wp-list-table.php.

Mais attention : dans la documentation de la classe WP_List_Table, il est clairement indiqué que cette classe n'est pas destinée à être utilisée pour le développement de thèmes ou d'extensions. On réservera donc son utilisation pour le développement de l'API WordPress, ce qui n'est pas le cas ici.

Peu importe, il y a tout de même moyen de reproduire l'apparence de ces listes en analysant le code HTML généré.

Monter le tableau HTML

Le tableau sera monté à l'aide d'une balise HTML <table>.

Afin de respecter l'apparence des autres pages du tableau de bord, on appliquera la classe "widefat" à la balise <table>. D'autres classes pourraient être nécessaires. À vous de vérifier dans les pages existantes du tableau de bord pour trouver lesquelles.

Les balises HTML du tableau prendront donc la forme suivante :

Ex :

HTML

<table class="widefat ...">

    <thead>

        <tr>

            <th>Modèle</th>

            <th>Prix</th>

        </tr>

    </thead>

    <tfoot>

        <tr>

            <th>Modèle</th>

            <th>Prix</th>

        </tr>

    </tfoot>

    <tbody>

        <tr>

            <td>Jeep Wrangler</td>

            <td>25 000 $</td>

        </tr>

        <tr>

            <td>Hunday Accent</td>

            <td>8 000 $</td>

        </tr>

        <tr>

            <td>Honda Accord</td>

            <td>12 000 $</td>

        </tr>

    </tbody>

</table>

Remarquez que dans toutes les pages du tableau de bord, les tableaux de données commencent par une section <thead> et finissent par une section <tfoot> qui répète les mêmes informations.

Nous ferons de même dans nos pages personnalisées.

Retrouver les données à afficher et boucler dans les résultats

Afin d'illustrer les balises HTML à générer, l'exemple précédent montrait des données codées en dur dans la section <tbody>. Dans les faits, ces données seront plutôt obtenues à l'aide d'une requête dans la base de données puis elles seront affichées à l'aide d'une boucle.

Ex :

WordPress (PHP)

$requete = "...";

$resultat = $wpdb->get_results( $requete );   // ne pas oublier d'utiliser $wpdb->prepare() si la requête contient des paramètres

$erreur_sql = $wpdb->last_error;

 

if ( $erreur_sql == "" ) {

    if ( $wpdb->num_rows > 0 ) {

    ?>

        <table class="widefat">

            ...

            <tbody>

            <?php

                foreach( $resultat as $enreg ) {

                    echo "<tr>";

                    echo "<td>$enreg->matable_modele</td>";

                    echo "<td>$enreg->matable_prix</td>";

                    echo "</tr>";

                } 

            ?>

            </tbody>

        </table>

    <?php

    } else {

        echo '<div class="notice notice-warning"><p>';

        _e( "Aucune donnée ne correspond aux critères demandés.", "mon-domaine-de-localisation" );

        echo '</p></div>';

    }

} else {

    echo '<div class="notice notice-error"><p>';

    _e( "Oups ! Un problème a été rencontré.", "mon-domaine-de-localisation" );

    echo '</p></div>';

 

    // loguer l'erreur si on est en mode débogage

    monprefixe_log_debug( $erreur_sql );

}  

Remarquez que dans cet extrait de code, on a utilisé les classes prévues par WordPress pour styliser les messages : notice, notice-warning et notice-error.

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories