Tworzysz tabelę w stylu administratora?


44

Jaki jest zalecany sposób tworzenia strony z tabelą w stylu tabel pokazujących posty lub użytkowników w obszarze administracyjnym?

Ja rozszerza Cache Obrazy wtyczki i zawiera tabelę z domen oraz liczbę zdjęć z tej domeny. Więc nie ma równoważnej istniejącej tabeli, na której mógłbym zbudować (w pierwszej wersji tego pytania pytałem o tabelę z postami, ale tam mogłem (być może) rozwinąć istniejącą tabelę postów ).

Czy powinienem po prostu oprzeć się na stronie przeglądu postów i zacząć od <table class="widefat">, czy są lepsze funkcje, które teraz to obsługują? Czy znasz czysty, pusty przykład tabeli ze stronicowaniem, na której mógłbym oprzeć swoją pracę?


3
Istnieje nowy blog dla stylistyki interfejsu użytkownika WordPress, może być pomocny. dotorgstyleguide.wordpress.com/outline
sorich87

2
Uwaga do siebie: scribu dodał nowy system tabelowania w skoroszafę w WP 3.1 z klasą podstawową WP_List_Table. To pytanie można prawdopodobnie zaktualizować o informacje, jak z niego korzystać.
Jan Fabry

Odpowiedzi:


29

Tego zazwyczaj używam:

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

Mam nadzieję, że to pomaga.


czy należy wstawić automatyczne paginowanie w ten sposób? (np. pokazuje pocztę 1-20)
Michiel Standaert,

@MichielStandaert No.
kaiser

@MichielStandaert jeśli chcesz z numeracją stron, wynik można użyć paginate_links
tiltdown

Dzięki ! (Ale wciąż pytam, dlaczego nie używali :oddwiersza zamiast pozwalać nam dodawać klasę co dwa rzędy ...)
Zachary Dahan

Są oczywiście „lepsze” rozwiązania (podobnie jak inne odpowiedzi tutaj), ale dla szybkiego, podstawowego stołu, właśnie tego chciałem. Dziękuję Ci!
rinogo,

26

Używaj Core API, a nie tylko CSS

Zwykle używasz tylko wystąpienia WP_List_Tableklasy.

Przewodniki:

Korzyści?

TAK!

Możesz dodać paginację, pola wyszukiwania, działania i dowolną magię, jaką możesz sobie wyobrazić (i umiesz kodować).


1
Mała podpowiedź jako link do wyświetlania znaczników, klas dla interfejsu administratora, bez celu tworzenia tabel: github.com/bueltge/WordPress-Admin-Style
bueltge

1
> Dostęp tej klasy jest oznaczony jako prywatny. Oznacza to, że nie jest przeznaczony do użytku przez twórców wtyczek i motywów, ponieważ może ulec zmianie bez ostrzeżenia w przyszłych wersjach WordPress. Jeśli nadal chcesz skorzystać z klasy, powinieneś zrobić kopię do wykorzystania i rozpowszechniania wraz z własnym projektem, lub użyj go na własne ryzyko.
Austin Pray

@AustinPray A copy ? Nie, proszę nie rób tego. Dostępne są wersje beta, RC i inne wstępne wersje WP. Po prostu zaktualizuj swoje wdrożenie / rozszerzenie. Jeśli naprawdę musisz iść na boki, po prostu napisz coś lepszego na własną rękę. Kod podstawowy nie jest tak dobry.
kaiser

@ kaiser Nie strzelaj do posłańca, to nie są moje słowa. Cytowałem z Kodeksu WP. Chociaż zapisywanie się na testy ciągłej regresji z każdą wersją beta i RC nie brzmi o wiele lepiej niż kopiowanie klasy. Zgadzam się, że napisanie własnej prostej klasy jest lepszym rozwiązaniem.
Austin Módlcie się

@AustinPray Żadnych twardych uczuć :) Kodeks jest napisany przez ludzi takich jak ty i ja. W rzeczywistości możesz już teraz cofnąć to oświadczenie, a ludzie go zacytują.
kaiser



0

Może warto rozważyć dodanie filtra do listy niestandardowych typów postów w panelu administratora? Poniższa powiązana odpowiedź pokazuje, jak to zrobić z taksonomią, ale możesz łatwo użyć innych kryteriów w restrict_manage_postshaczyku:

Daj mi znać, jeśli masz więcej pytań.


Przepraszam za niejasne pytanie. W moim pierwszym przykładzie była to tabela postów i rzeczywiście mogłem do tego użyć istniejącej tabeli postów (nawet jeśli chcę tylko wyświetlać tytuły postów, a następnie wszystkie niestandardowe kolumny?). Ale teraz zredagowałem moje pytanie konkretnym przykładem: mam tabelę domen, więc nie istnieje odpowiednik istniejącej tabeli, którą można rozwinąć.
Jan Fabry,

@Jan : Ah. Tak, myślę, że znalazłeś prawdę, że nie ma dobrego zamkniętego sposobu na zrobienie tego innego niż pisanie (powielonego) HTML. Często miałem ten sam problem. Może utwórz bilet na trac, prosząc o to ulepszenie i połącz tutaj adres URL / bilet #, abyśmy mogli go obsługiwać.
MikeSchinkel,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.