web-dev-qa-db-fra.com

Créer une table dans le style admin?

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?

J'agrandis le plugin Cache Images , et il contient un tableau avec les domaines et un certain nombre d'images de ce domaine. Donc, il n’existe aucune table existante équivalente sur laquelle je puisse me fonder (dans la première version de cette question, j’avais posé une question sur une table avec des publications, mais j’aurais (peut-être) développé la table de publication 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 qui gèrent cela maintenant? Connaissez-vous un exemple propre et vide d’une table avec pagination sur laquelle je pourrais baser mon travail?

plugin-developmentadmin
42
Jan Fabry

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 cela pourra aider.

28
sorich87

Utilisez l'API de base, pas seulement son CSS

Normalement, vous utilisez simplement une instance de la classe WP_List_Table.

Guides:

  • Plus d'informations à ce sujet dans le Codex ici .
  • Voici également un guide de WP Engineer - trop pour le 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).

26
kaiser

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 le WP_List_Table class intégré.

13
Sander

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

4
bueltge

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 hook restrict_manage_posts:

Dites moi si vous avez d'autres questions.

0
MikeSchinkel