Créer une table dans le style administrateur?

Question

Créer une table dans le style administrateur?

- 48
- 51381 2010-09-06
Quelleest laméthode recommandéepour créer unepage avec untableau,dans le style destableaux affichant des articles ou des utilisateurs dans la zone d'administration?

Je développe leplug-in Cache Images ,et il contient unetable avec les domaineset un certainnombre d'images de ce domaine. Iln'y a doncpas detableexistante équivalente sur laquelleje puissem'appuyer (dans lapremière version de cette question,j'aiposé une question sur unetable avec desmessages,mais là,je pourrais (peut-être) développez letableau depublicationexistant ).

Dois-je simplementme baser sur lapage deprésentation de l'article ,et commencezpar un <table class="widefat">,ou y a-t-il demeilleuresfonctions quigèrent celamaintenant? Connaissez-vous unexemplepropreet vide detable avecpagination sur laquelleje pourraisbasermontravail?

What is the recommended way of creating a page with a table, in the style of the tables showing posts or users in the admin area?

I am expanding the Cache Images plugin, and it contains a table with domains and a number of images from that domain. So there is no equivalent existing table that I can build upon (in the first version of this question, I asked about a table with posts, but there I could (maybe) expand the existing post table).

Should I just base myself on the post overview page, and start with a <table class="widefat">, or are there better functions that handle this now? Do you know a clean, empty example of a table with paging that I could base my work on?

plugin-development admin

- Ilexiste unnouveaublogpour leguide de style de l'interface utilisateur WordPress,vous letrouverezpeut-être utile.http://dotorgstyleguide.wordpress.com/outline/
  
  There is a new blog for the WordPress UI styleguide, you may find it helpful. http://dotorgstyleguide.wordpress.com/outline/
  - 3
  - 2010-09-27
  - sorich87
- Note àmoi-même: scribu a ajouté [unnouveau système detable ajaxifié dans WP 3.1] (http://core.trac.wordpress.org/ticket/14579),avec une classe debase `WP_List_Table`.Cette questionpeutprobablement êtremise àjour avec desinformations sur lafaçon de l'utiliser.
  
  Note to self: scribu added [a new ajaxified table system in WP 3.1](http://core.trac.wordpress.org/ticket/14579), with a base class `WP_List_Table`. This question can probably be updated with information on how to use it.
  - 2
  - 2010-12-28
  - Jan Fabry

5 réponses

votes

- 27
- 2012-12-19
Utilisez l'API Core,pas seulement son CSS

Normalement,vous utilisez simplement uneinstance de la classe WP_List_Table.

Guides:

Pouren savoirplus,consultez le Codex ici .

Voici également unguide de WP Engineer -troppour le copier.

Et un autreguide sur Smashing Magazine en ligne.

Avantages?

OUI!

Vouspouvez ajouter unepagination,des champs de recherche,des actionset toute lamagie que vouspouvezimaginer (etpouvez coder).
Use the Core API, not only its CSS

Normally you just use an instance of the WP_List_Table class.

Guides:

More about it in the Codex here.

Here's also a guide from WP Engineer - too much to copy it over.

And another guide on Smashing Magazine online.

Benefits?

YES!

You can add pagination, search boxes, actions and whatever magic you can imagine (and are able to code).
- Petitindice comme lienpour voir lebalisage,les classespour l'interface d'administration,sans seulement l'objectif de créer destableaux: https://github.com/bueltge/WordPress-Admin-Style
  
  Small hint as link to see markup, classes for the admin interface, without only the goal to create tables: https://github.com/bueltge/WordPress-Admin-Style
  - 1
  - 2013-11-04
  - bueltge
- > L'accès de cette classeestmarqué commeprivé.Cela signifie qu'iln'estpas destiné à être utilisépar les développeurs d'extensionset dethèmes carilest sujet à changement sans avertissement danstoutefuture version de WordPress.Si vous souhaiteztoujours utiliser la classe,vous devezen faire une copie à utiliseret à distribuer avec votrepropreprojet,oubien l'utiliser à vospropres risques.
  
  >This class's access is marked as private. That means it is not intended for use by plugin and theme developers as it is subject to change without warning in any future WordPress release. If you would still like to make use of the class, you should make a copy to use and distribute with your own project, or else use it at your own risk.
  - 2
  - 2017-05-20
  - Austin Pray
- @AustinPray _Une copie_?Non,ne faitespas ça.Ilexiste des versionsbêta,RCet autrespré-versions de WP disponibles.Mettez simplement àjour votreimplémentation/extension.Si vous devez vraiment aller de côté,écrivez simplement quelque chose demieuxpar vous-même.Le code debasen'estpasbon.
  
  @AustinPray _A copy_ ? No, please do not do that. There are betas, RCs and other pre-releases of WP available. Just update your implementation/ extension. If you really have to go sideways, just write something better on your own. The core code isn't _that_ good.
  - 1
  - 2017-05-20
  - kaiser
- @kaiser Netirezpas sur lemessager,cene sontpasmesmots.Je citais le WP Codex.Bien que vousinscrire à destests de régressionperpétuels avec chaque versionbêtaet RCne sonnepasbeaucoupmieux que de copier la classe.Je suis d'accord que la rédaction de votrepropre cours simpleest unemeilleurefaçon d'avancer.
  
  @kaiser Don't shoot the messenger, those aren't my words. I was quoting from the WP Codex. Although signing yourself up for perpetual regression testing with every beta and RC doesn't sound much better than copying the class. I agree writing your own simple class is a better way forward.
  - 0
  - 2017-05-22
  - Austin Pray
- @AustinPray Pas de rancune :) Le Codexest écritpar desgens comme vouset moi.Enfait,vouspouvez revenirmaintenantet revenir sur cette déclarationet lesgens la citeront.
  
  @AustinPray No hard feelings :) Codex is written by people like you and me. In fact, you can go now and revert that statement and people will quote it.
  - 0
  - 2017-05-22
  - kaiser
- Malheureusement,les deuxguides sontterriblement obsolètes,àpartir de Wordpress 5,quej'aitrouvé à la dureen cassant les choses (également le Smashing Managzine a deserreurs de syntaxeflagrantes - quelqu'unn'apas réussi àmaîtriser le copier-coller).Jen'aipastrouvé d'alternative àjour (le `custom-list-table-example`n'est que légèrementmeilleur)et le Codex abeaucoup de chosesmanquantes.J'ai réussi à écrire uneimplémentation simpleen regardant Wordpress lui-même,en particulier `class-wp-users-list-table.php` quiestpresque completmaisplus simple que les autres classes WP.
  
  Unfortunately, both of the guides are woefully out of date, as of Wordpress 5, which I found the hard way while breaking things (Also the Smashing Managzine one has glaring syntax errors - someone failed to master copy&paste). I haven't found an up to date alternative (the `custom-list-table-example` is only slightly better) and the Codex has a lot of things missing. I managed to write a simple implementation by looking at Wordpress itself, especially `class-wp-users-list-table.php` which is almost fully featured but simpler than other WP classes.
  - 1
  - 2020-06-07
  - Guss
- @Guss La réponse date de 2012. Vous voudrezpeut-être ajouter votrepropre réponsepourproposer une solutionplus àjour :)
  
  @Guss The answer is from 2012. You might want to add your own answer to offer a more up to date solution :)
  - 0
  - 2020-06-08
  - kaiser
- @Kaiser - afait ça.Voir ci-dessous :-)
  
  @Kaiser - did that. See below :-)
  - 0
  - 2020-06-09
  - Guss
- 13
- 2011-12-24
Utilisez cetexemple (écrit sousforme deplugin)pour créer vostables d'administration:

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

Il utilise la classeintégrée WP_List_Table .

Use this example (written as a plugin) to create your admin tables:

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

It uses the built-in WP_List_Table class.
- Jepense que cela devrait être la réponse acceptée.Voir également cet article dans Smashing Magazine qui articule une approche similaire: http://wp.smashingmagazine.com/2011/11/03/native-admin-tables-wordpress/
  
  I think this should be the accepted answer. Also see this article in Smashing Magazine that articulates a similar approach: http://wp.smashingmagazine.com/2011/11/03/native-admin-tables-wordpress/
  - 3
  - 2012-03-10
  - julien_c
- 4
- 2011-05-27
Vouspouvez également utiliser cepetit pluginpour voir lespossibilités dubackend dans WP: https://github.com/bueltge/WordPress-Admin-Style

Also you can use this small plugin for view the possibilities of the backend in WP: https://github.com/bueltge/WordPress-Admin-Style
- 0
- 2010-09-07
Vous voudrezpeut-êtreenvisager d'ajouter unfiltre à votre liste detypes demessagespersonnalisés dans l'administrateur?La réponse liée ci-dessousmontre comment lefaire avec unetaxonomie,mais vouspouvezfacilement utiliser d'autres critères dans votre hook restrict_manage_posts:

Ajouter unfiltre detaxonomie à la liste des administrateurspour untype depublicationpersonnalisé?

Faites-moi savoir si vous avez d'autres questions.
You might want to consider adding a filter to your custom post type list in the admin? The linked answer below shows how to do it with a taxonomy but you could easily use other criteria in your restrict_manage_posts hook:

Adding a Taxonomy Filter to Admin List for a Custom Post Type?

Let me know if you have more questions.
- Jem'excusepour la questionpeu claire.Dansmonpremierexemple,c'était unetable depublications,et eneffet,je pourraisessayer d'utiliser latable depublicationexistantepour cela (même sije ne veux afficher que lestitres despublicationset toutes les colonnespersonnalisées?).Maismaintenant,j'ai éditéma question avec unexemple concret:j'ai unetable de domaines,donciln'y apas detableexistante équivalente queje puisse développer.
  
  I apologize for the unclear question. In my first example it was a table of posts, and indeed, I could try to use the existing post table for that (even if I only want to show the post titles and then all custom columns?). But now I have edited my question with a concrete example: I have a table of domains, so there is no equivalent existing table that I can expand.
  - 0
  - 2010-09-07
  - Jan Fabry
- * @ Jan *: Ah.Oui,je pense que vous aveztrouvé la vérité,qu'iln'y apas debonnefaçonencapsulée defaire cela autre que d'écrire du HTML (dupliqué).J'ai souventeu lemêmeproblème.Peut-être créer unticket surtrac demandant cette améliorationet lier l'URL/ticket #ici afin quenouspuissions le soutenir.
  
  *@Jan*: Ah. Yes, I think you have found the truth, that there is not good encapsulated way to do this other than writing (duplicated) HTML. I've often had the same issue. Maybe create a ticket on trac asking for this enhancement and link the URL/ticket# here so we can support it.
  - 0
  - 2010-09-07
  - MikeSchinkel

sorich87 · Accepted Answer · 2010-09-06

34

2010-09-06

Voici ce quej'utilisegé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 vous aidera.

This is what I generally use:

<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>

Hope that helps.

est-ce aussi d'avoir unepagination automatiqueinsérée comme ça?(parexemple,affichage de l'article 1-20)

is it also to have automatic pagination inserted like this? (e.g. showing post 1-20)
- 0
- 2011-12-07
- Michiel Standaert
@MichielStandaert Non.

@MichielStandaert No.
- 0
- 2014-06-14
- kaiser
@MichielStandaert si vous voulez un résultatpaginé,vouspouvez utiliser [paginate_links] (http://codex.wordpress.org/Function_Reference/paginate_links)

@MichielStandaert if you want a paginated result you can use [paginate_links](http://codex.wordpress.org/Function_Reference/paginate_links)
- 0
- 2014-09-26
- tiltdown
Merci !(Maisje demandetoujourspourquoiilsn'ontpas utilisé `: odd`pour la ligne au lieu denous laisser ajouter une classetoutes les deux lignes ...)

Thanks ! (But I still asking why they didn't use `:odd` for row instead of let us add a class each two rows ...)
- 0
- 2016-03-15
- Zachary Dahan
Il y a évidemment de «meilleures» solutions (comme les autres réponsesici),maispour untableau simpleet rapide,c'estexactement ce queje cherchais.Je vous remercie!

There are obviously "better" solutions (like the other answers here), but for a quick, basic table, this is exactly what I was after. Thank you!
- 0
- 2019-11-01
- rinogo

Créer une table dans le style administrateur?

5 réponses

Utilisez l'API Core,pas seulement son CSS

Guides:

Avantages?

Use the Core API, not only its CSS

Guides:

Benefits?