Créer une table dans le style admin?

44

Quelle est la méthode recommandée pour créer une page avec une table, dans le style des tables affichant des publications ou des utilisateurs dans la zone d'administration?

Je développe le plug - in Cache Images , qui contient une table avec des domaines et un certain nombre d'images de ce domaine. Donc, il n’existe pas de tableau existant équivalent sur lequel je puisse me fonder (dans la première version de cette question, j’avais posé une question sur un tableau avec des publications, mais j’aurais (éventuellement) développé la table de publications existante ).

Devrais-je simplement me baser sur la page d'aperçu des publications et commencer par un <table class="widefat">ou existe-t-il de meilleures fonctions pour gérer cela maintenant? Connaissez-vous un exemple propre et vide d’une table avec pagination sur laquelle je pourrais baser mon travail?

plugin-development admin

— Jan Fabry
source

3

Il existe un nouveau blog pour le guide de style WordPress UI, vous le trouverez peut-être utile. dotorgstyleguide.wordpress.com/outline

— sorich87

2

Note personnelle: scribu a ajouté un nouveau système de tables ajaxified dans WP 3.1 , avec une classe de base WP_List_Table. Cette question peut probablement être mise à jour avec des informations sur son utilisation.

— Jan Fabry

29

C'est ce que j'utilise généralement:

<table class="widefat fixed" cellspacing="0">
    <thead>
    <tr>

            <th id="cb" class="manage-column column-cb check-column" scope="col"></th> // this column contains checkboxes
            <th id="columnname" class="manage-column column-columnname" scope="col"></th>
            <th id="columnname" class="manage-column column-columnname num" scope="col"></th> // "num" added because the column contains numbers

    </tr>
    </thead>

    <tfoot>
    <tr>

            <th class="manage-column column-cb check-column" scope="col"></th>
            <th class="manage-column column-columnname" scope="col"></th>
            <th class="manage-column column-columnname num" scope="col"></th>

    </tr>
    </tfoot>

    <tbody>
        <tr class="alternate">
            <th class="check-column" scope="row"></th>
            <td class="column-columnname"></td>
            <td class="column-columnname"></td>
        </tr>
        <tr>
            <th class="check-column" scope="row"></th>
            <td class="column-columnname"></td>
            <td class="column-columnname"></td>
        </tr>
        <tr class="alternate" valign="top"> // this row contains actions
            <th class="check-column" scope="row"></th>
            <td class="column-columnname">
                <div class="row-actions">
                    <span><a href="#">Action</a> |</span>
                    <span><a href="#">Action</a></span>
                </div>
            </td>
            <td class="column-columnname"></td>
        </tr>
        <tr valign="top"> // this row contains actions
            <th class="check-column" scope="row"></th>
            <td class="column-columnname">
                <div class="row-actions">
                    <span><a href="#">Action</a> |</span>
                    <span><a href="#">Action</a></span>
                </div>
            </td>
            <td class="column-columnname"></td>
        </tr>
    </tbody>
</table>

J'espère que ça t'as aidé.

— sorich87
source

est-ce aussi d'avoir une pagination automatique insérée comme ça? (par exemple, poste 1-20)

— Michiel Standaert

@ MichielStandaert No.

— kaiser

@MichielStandaert si vous voulez un résultat paginé vous pouvez utiliser paginate_links

— tiltdown

Merci ! (Mais je demande toujours pourquoi ils n'ont pas utilisé :oddpour row au lieu d'ajouter une classe à chaque fois deux rangées ...)

— Zachary Dahan

Il existe évidemment de "meilleures" solutions (comme les autres réponses ici), mais pour un tableau de base rapide, c'est exactement ce que je cherchais. Merci!

— rinogo

26

Utilisez l'API de base, pas seulement son CSS

Normalement, vous utilisez simplement une instance de la WP_List_Tableclasse.

Guides:

Plus d'informations à ce sujet dans le Codex ici .
Voici également un guide de l' ingénieur WP - trop difficile à copier.
Et un autre guide sur Smashing Magazine en ligne.

Avantages?

OUI!

Vous pouvez ajouter une pagination, des zones de recherche, des actions et tout type de magie que vous pouvez imaginer (et que vous pouvez coder).

— kaiser
source

1

Petit indice en tant que lien pour voir le balisage, classes pour l'interface d'administration, sans le seul objectif de créer des tableaux: github.com/bueltge/WordPress-Admin-Style

— bueltge

1

> L'accès à cette classe est marqué comme privé. Cela signifie qu'il n'est pas destiné à être utilisé par les développeurs de plugins et de thèmes, car il est susceptible de changer sans préavis dans une future version de WordPress. Si vous souhaitez toujours utiliser la classe, vous devez en créer une copie que vous pourrez utiliser et distribuer avec votre propre projet ou vous en servir à vos risques et périls.

— Austin Pray

@ AustinPray Une copie ? Non, s'il vous plaît ne faites pas ça. Des versions bêta, RC et autres versions préliminaires de WP sont disponibles. Il suffit de mettre à jour votre implémentation / extension. Si vous devez vraiment aller sur le côté, écrivez simplement quelque chose de mieux par vous-même. Le code de base n'est pas si bon.

— Kaiser

@ Kaiser Ne tirez pas sur le messager, ce ne sont pas mes mots. Je citais du WP Codex. Bien que vous inscrire pour des tests de régression perpétuels avec chaque version bêta et chaque commande RC ne sonne pas mieux que de copier la classe. Je suis d'accord pour écrire votre propre classe simple est une meilleure façon d'avancer.

— Austin Pray

@AustinPray Pas de rancune :) Codex est écrit par des gens comme vous et moi. En fait, vous pouvez maintenant revenir et revenir sur cette déclaration et les gens la citeront.

— Kaiser

13

Utilisez cet exemple (écrit en tant que plugin) pour créer vos tables d'administration:

http://wordpress.org/extend/plugins/custom-list-table-example/

Il utilise la classe intégrée WP_List_Table .

— Ponceuse
source

3

Je pense que cela devrait être la réponse acceptée. Voir également cet article dans Smashing Magazine qui articule une approche similaire: wp.smashingmagazine.com/2011/11/03/…

— julien_c

4

Aussi, vous pouvez utiliser ce petit plugin pour voir les possibilités du backend dans WP: https://github.com/bueltge/WordPress-Admin-Style

— bueltge
source

0

Vous voudrez peut-être envisager d’ajouter un filtre à votre liste de types de messages personnalisés dans l’administrateur? La réponse liée ci-dessous montre comment procéder avec une taxonomie, mais vous pouvez facilement utiliser d'autres critères dans votre restrict_manage_postshook:

Ajout d'un filtre de taxonomie à la liste des administrateurs pour un type de publication personnalisé?

Dites moi si vous avez d'autres questions.

— Mike Schinkel
source

Je m'excuse pour la question peu claire. Dans mon premier exemple, il s’agissait d’un tableau de publications, et je pourrais même essayer d’utiliser le tableau de publications existant à cet effet (même si je ne souhaite afficher que les titres des publications, puis toutes les colonnes personnalisées?). Mais maintenant, j'ai modifié ma question avec un exemple concret: j'ai un tableau de domaines, il n'y a donc pas de tableau existant équivalent que je puisse développer.

— Jan Fabry

@ Jan : Ah. Oui, je pense que vous avez trouvé la vérité, qu'il n'y a pas de bonne manière encapsulée de faire cela autre que l'écriture de HTML (dupliqué). J'ai souvent eu le même problème. Peut-être créer un ticket sur trac demandant cette amélioration et lier l'URL / ticket # ici pour que nous puissions le supporter.

— MikeSchinkel