Eine Tabelle im Admin-Stil erstellen?

Question

Eine Tabelle im Admin-Stil erstellen?

- 48
- 51381 2010-09-06
Wie wirdempfohlen,eine Seitemit einer Tabelleim Stil der Tabellen zuerstellen,in denen Beiträge oder Benutzerim Administratorbereich angezeigt werden?

Icherweitere das Pluginfür Cache-Bilder undesenthälteine Tabellemit Domänen undeine Reihe von Bildern aus dieser Domäne. Esgibt also keine äquivalente vorhandene Tabelle,auf derich aufbauen kann (in derersten Version dieser Frage habeichnacheiner Tabellemit Beiträgengefragt,aber dort könnteich (vielleicht) Erweitern Sie die vorhandene Beitragstabelle ).

Sollteichmichnur auf stützen? die Post-Übersichtsseite undbeginnen Siemit einer <table class="widefat">,odergibt esbessere Funktionen,die diesjetzt handhaben? Kennen Sieein sauberes,leeres Beispielfüreine Tabellemit Paging,auf dieichmeine Arbeit stützen könnte?

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

- Esgibt einneues Blogfür den WordPress UI Styleguide,das Sie vielleicht hilfreichfinden.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
- Hinweisfür sich selbst: scribu hat [einneues ajaxifiziertes Tabellensystemin WP 3.1] (http://core.trac.wordpress.org/ticket/14579)mit der Basisklasse "WP_List_Table" hinzugefügt.Diese Frage kann wahrscheinlichmit Informationen zur Verwendung aktualisiert werden.
  
  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 Antworten

Stimmen

- 27
- 2012-12-19
Verwenden Sie die Core-API,nichtnur das CSS

Normalerweise verwenden Sienureine Instanz der Klasse WP_List_Table.

Anleitungen:

Mehr dazuim Codex hier .

Hierist aucheine Anleitung von WP Engineer - zu viel,um sie zu kopieren.

Undein weiterer Leitfaden zu Smashing Magazine online.

Vorteile?

JA!

Sie können Paginierung,Suchfelder,Aktionen undjede Magie hinzufügen,die Sie sich vorstellen können (und die Sie codieren können).
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).
- Kleiner Hinweis als Link zum Anzeigen von Markups,Klassenfür die Administrationsoberfläche,ohnenur das Ziel,Tabellen zuerstellen: 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
- > Der Zugriff dieser Klasse wird alsprivatmarkiert.Dasbedeutet,dassesnichtfür Plugin- und Theme-Entwickler vorgesehenist,daesin zukünftigen WordPress-Versionen ohne Vorwarnunggeändert werden kann.Wenn Sie die Klasse dennochnutzenmöchten,sollten Sieeine Kopieerstellen,die Siemit Ihremeigenen Projekt verwenden und verteilen können,oder sie aufeigenes Risiko verwenden.
  
  >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 _Eine Kopie_?Nein,bitte tu dasnicht.Esgibt Betas,RCs und andere Vorabversionen von WP.Aktualisieren Sieeinfach Ihre Implementierung/Erweiterung.Wenn Sie wirklich seitwärtsgehenmüssen,schreiben Sieeinfach selbstetwas Besseres.Der Kerncodeistnicht sogut.
  
  @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 Schießnicht auf den Boten,das sindnichtmeine Worte.Ich habe aus dem WP Codex zitiert.Obwohles sichnicht vielbesser anhört,sichmit jeder Beta und RCfürewige Regressionstests anzumelden,als die Klasse zu kopieren.Ichbin damiteinverstanden,dass das Schreibeneinereigenen einfachen Klasseein besserer Wegist.
  
  @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 Keine harten Gefühle :) Codex wird von Leuten wie dir undmirgeschrieben.In der Tat können Siejetztgehen und diese Aussage zurücksetzen,und die Leute werden sie zitieren.
  
  @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
- Leider sindbeide Handbücher ab Wordpress 5,dasichbeim Brechen der Dinge auf die harte Tourgebracht habe,absolut veraltet (auch das Smashing Managzine weisteklatante Syntaxfehler auf -jemand konnte das Kopieren und Einfügennichtbeherrschen).Ich habe keine aktuelle Alternativegefunden (das "Custom-List-Table-Beispiel"istnurgeringfügigbesser) undim Codexfehlen viele Dinge.Ich habeesgeschafft,eine einfache Implementierung zu schreiben,indemichmir Wordpress selbst angesehen habe,insbesondere `class-wp-users-list-table.php`,dasfast vollständig ausgestattetist,abereinfacher als andere WP-Klassen.
  
  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 Die Antwort stammt aus dem Jahr 2012. Vielleichtmöchten Sie Ihreeigene Antwort hinzufügen,umeine aktuellere Lösung anzubieten :)
  
  @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 - hab dasgemacht.Siehe unten :-)
  
  @Kaiser - did that. See below :-)
  - 0
  - 2020-06-09
  - Guss
- 13
- 2011-12-24
Verwenden Sie dieses Beispiel (als Plugingeschrieben),um Ihre Admin-Tabellen zuerstellen:

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

Es wird dieintegrierte WP_List_Table -Klasse verwendet.

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.
- Ich denke,das sollte die akzeptierte Antwort sein.Lesen Sie auch diesen Artikelim Smashing Magazine,dereinen ähnlichen Ansatzformuliert: 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
Mit diesem kleinen Plugin können Sie auch die Möglichkeiten des Backendsin WP anzeigen: 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
Siemöchtenmöglicherweiseeinen Filter zu Ihrerbenutzerdefinierten Beitragstyplisteim Administrator hinzufügen?Die unten stehende verknüpfte Antwort zeigt,wie diesmit einer Taxonomiegemacht wird. Sie könnenjedochproblemlos andere Kriterienin Ihrem restrict_manage_posts -Hook verwenden:

Hinzufügeneines Taxonomiefilters zur Administratorlistefüreinen benutzerdefinierten Beitragstyp?

Lassen Siemich wissen,wenn Sie weitere Fragen haben.
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.
- Ichentschuldigemichfür die unklare Frage.Inmeinem ersten Beispiel wareseine Tabellemit Beiträgen,undtatsächlich könnteich versuchen,die vorhandene Beitragstabelle dafür zu verwenden (auch wennichnur die Beitragstitel und dann allebenutzerdefinierten Spalten anzeigenmöchte?).Aberjetzt habeichmeine Fragemit einem konkreten Beispielbearbeitet: Ich habeeine Tabellemit Domänen,sodasses keineentsprechende Tabellegibt,dieicherweitern kann.
  
  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.Ja,ich denke,Sie haben die Wahrheitgefunden,dasses keinengutengekapselten Weggibt,dies zutun,außer (dupliziertes) HTML zu schreiben.Ich hatte oft dasgleiche Problem.Erstellen Siemöglicherweiseein Ticket auftrac undfragen Sienach dieser Verbesserung. Verknüpfen Sie hier die URL/Ticketnummer,damit wir sie unterstützen können.
  
  *@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

Diesist,wasichim Allgemeinenbenutze:

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

Hoffe das hilft.

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.

Istes auch so,dass die automatische Paginierung soeingefügt wird?(z. B. zeigt Beitrag 1-20)

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

@MichielStandaert No.
- 0
- 2014-06-14
- kaiser
@MichielStandaert Wenn Sieein paginiertes Ergebnis wünschen,können Sie [paginate_links] verwenden (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
Vielen Dank !(Aberichfrageimmernoch,warum sienicht `: odd`für die Zeile verwendet haben,anstatt alle zwei Zeileneine Klasse hinzuzufügen ...)

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
Esgibt offensichtlich "bessere" Lösungen (wie die anderen Antworten hier),aberfüreine schnelle,einfache Tabelleist diesgenau das,wonachichgesucht habe.Vielen Dank!

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

Eine Tabelle im Admin-Stil erstellen?

5 Antworten

Verwenden Sie die Core-API,nichtnur das CSS

Anleitungen:

Vorteile?

Use the Core API, not only its CSS

Guides:

Benefits?