Eine Tabelle im Admin-Stil erstellen?

44

Was ist die empfohlene Methode, um eine Seite mit einer Tabelle im Stil der Tabellen zu erstellen, in denen Beiträge oder Benutzer im Administrationsbereich angezeigt werden?

Ich erweitere das Cache Images-Plugin und es enthält eine Tabelle mit Domänen und einer Reihe von Bildern aus dieser Domäne. Es gibt also keine äquivalente vorhandene Tabelle, auf der ich aufbauen kann (in der ersten Version dieser Frage habe ich nach einer Tabelle mit Beiträgen gefragt, aber dort könnte ich (vielleicht) die vorhandene Beitragstabelle erweitern ).

Sollte ich mich einfach auf die Beitragsübersichtsseite stützen und mit a beginnen <table class="widefat">, oder gibt es bessere Funktionen, die dies jetzt handhaben? Kennen Sie ein sauberes, leeres Beispiel für einen Tisch mit Seitenwechsel, auf den ich meine Arbeit stützen könnte?

plugin-development admin

— Jan Fabry
quelle

3

Es gibt einen neuen Blog für den WordPress UI Styleguide, der möglicherweise hilfreich ist. dotorgstyleguide.wordpress.com/outline

— sorich87

2

Hinweis für sich selbst: scribu hat in WP 3.1 ein neues ajaxifiziertes Tabellensystem mit einer Basisklasse hinzugefügt WP_List_Table. Diese Frage kann möglicherweise mit Informationen zur Verwendung aktualisiert werden.

— Jan Fabry

29

Dies ist, was ich im Allgemeinen benutze:

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

Ich hoffe, das hilft.

— sorich87
quelle

ist es auch so eine automatische Paginierung einzufügen? (zB Beitrag 1-20)

— Michiel Standaert

@MichielStandaert Nr.

— Kaiser

@MichielStandaert , wenn Sie ein paginierte Ergebnis möchten , können Sie verwenden paginate_links

— tiltdown

Vielen Dank ! (Aber ich frage immer noch, warum sie nicht :oddfür Zeile verwendet, anstatt uns jeweils zwei Zeilen eine Klasse hinzufügen zu lassen ...)

— Zachary Dahan

Es gibt offensichtlich "bessere" Lösungen (wie die anderen Antworten hier), aber für eine schnelle, einfache Tabelle ist dies genau das, wonach ich gesucht habe. Danke!

— rinogo

26

Verwenden Sie die Core-API, nicht nur das CSS

Normalerweise verwenden Sie nur eine Instanz der WP_List_TableKlasse.

Guides:

Mehr dazu im Codex hier .
Hier ist auch eine Anleitung von WP Engineer - zu viel, um sie zu kopieren.
Und noch eine Anleitung zum Smashing Magazine online.

Leistungen?

JA!

Sie können Paginierung, Suchfelder, Aktionen und jede Art von Magie hinzufügen, die Sie sich vorstellen können (und die Sie codieren können).

— Kaiser
quelle

1

Kleiner Hinweis als Link zum Markup, Klassen für die Admin-Oberfläche, ohne nur das Ziel, Tabellen zu erstellen: github.com/bueltge/WordPress-Admin-Style

— bueltge

1

> Der Zugriff dieser Klasse ist als privat markiert. Das heißt, es ist nicht für die Verwendung durch Plugin- und Theme-Entwickler gedacht, da es in zukünftigen WordPress-Versionen ohne Vorwarnung geändert werden kann. Wenn Sie die Klasse dennoch verwenden möchten, sollten Sie eine Kopie erstellen, um sie mit Ihrem eigenen Projekt zu verwenden und zu verteilen, oder sie auf eigenes Risiko verwenden.

— Austin Pray

@AustinPray Eine Kopie ? Nein, bitte mach das nicht. Es gibt Betas, RCs und andere Vorabversionen von WP. Aktualisieren Sie einfach Ihre Implementierung / Erweiterung. Wenn Sie wirklich seitwärts gehen müssen, schreiben Sie einfach etwas Besseres auf eigene Faust. Der Kerncode ist nicht so gut.

— Kaiser

@kaiser Schieß nicht auf den Boten, das sind nicht meine Worte. Ich habe aus dem WP Codex zitiert. Obwohl Sie sich mit jeder Beta und jedem RC für einen permanenten Regressionstest anmelden, hört sich das nicht viel besser an, als die Klasse zu kopieren. Ich bin damit einverstanden, dass das Schreiben Ihrer eigenen einfachen Klasse ein besserer Weg ist.

— Austin Pray

@AustinPray Keine harten Gefühle :) Codex wird von Leuten wie dir und mir geschrieben. Tatsächlich können Sie jetzt diese Aussage zurücknehmen, und die Leute werden sie zitieren.

— Kaiser

13

Verwenden Sie dieses Beispiel (als Plugin geschrieben), um Ihre Admin-Tabellen zu erstellen:

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

Es verwendet die integrierte WP_List_Table- Klasse.

— Sander
quelle

3

Ich denke, das sollte die akzeptierte Antwort sein. Lesen

— Sie

4

Sie können dieses kleine Plugin auch verwenden, um die Möglichkeiten des Backends in WP anzuzeigen: https://github.com/bueltge/WordPress-Admin-Style

— bueltge
quelle

0

Vielleicht möchten Sie einen Filter zu Ihrer benutzerdefinierten Beitragstypenliste im Administrator hinzufügen? Die unten stehende verknüpfte Antwort zeigt, wie dies mit einer Taxonomie gemacht wird, aber Sie können problemlos andere Kriterien in Ihrem restrict_manage_postsHook verwenden:

Hinzufügen eines Taxonomiefilters zur Admin-Liste für einen benutzerdefinierten Beitragstyp?

Lassen Sie mich wissen, wenn Sie weitere Fragen haben.

— MikeSchinkel
quelle

Ich entschuldige mich für die unklare Frage. In meinem ersten Beispiel war es eine Tabelle mit Beiträgen, und ich konnte tatsächlich versuchen, die vorhandene Beitragstabelle dafür zu verwenden (auch wenn ich nur die Beitragstitel und dann alle benutzerdefinierten Spalten anzeigen möchte?). Jetzt habe ich meine Frage mit einem konkreten Beispiel bearbeitet: Ich habe eine Domänentabelle, sodass es keine entsprechende Tabelle gibt, die ich erweitern kann.

— Jan Fabry

@Jan : Ah. Ja, ich denke, Sie haben die Wahrheit herausgefunden, dass es keinen anderen gekapselten Weg gibt, als HTML zu schreiben (dupliziert). Ich hatte oft das gleiche Problem. Erstellen Sie auf trac ein Ticket, in dem Sie nach dieser Erweiterung fragen, und verlinken Sie die URL / Ticket-Nummer hier, damit wir sie unterstützen können.

— MikeSchinkel