web-development-kb-pt.site

Criando uma tabela no estilo admin?

Qual é a maneira recomendada de criar uma página com uma tabela, no estilo das tabelas que mostram posts ou usuários na área de administração?

Eu estou expandindo o plugin Cache Images , e ele contém uma tabela com domínios e um número de imagens daquele domínio. Portanto, não há uma tabela equivalente existente sobre a qual eu possa construir (na primeira versão desta pergunta, perguntei sobre uma tabela com postagens, mas lá eu poderia (talvez) expandir a tabela de postagens existente ).

Devo me basear apenas em a página de visão geral do post , e começar com um <table class="widefat">, ou existem funções melhores que lidem com isso agora? Você conhece um exemplo limpo e vazio de uma tabela com paginação em que eu poderia basear meu trabalho?

plugin-developmentadmin
42
Jan Fabry

Isso é o que geralmente uso:

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

Espero que ajude.

28
sorich87

Use a API do Core, não apenas seu CSS

Normalmente você usa apenas uma instância da classe WP_List_Table.

Guias:

Benefícios

SIM!

Você pode adicionar paginação, caixas de pesquisa, ações e qualquer mágica que possa imaginar (e seja capaz de codificar).

26
kaiser

Use este exemplo (escrito como um plugin) para criar suas tabelas de administração:

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

Ele usa a classe integrada WP_List_Table .

13
Sander

Também você pode usar este pequeno plugin para ver as possibilidades do backend no WP: https://github.com/bueltge/WordPress-Admin-Style

4
bueltge

Você pode querer considerar adicionar um filtro à sua lista de tipos de postagens personalizadas no admin? A resposta vinculada abaixo mostra como fazer isso com uma taxonomia, mas você pode facilmente usar outros critérios em seu gancho restrict_manage_posts:

Deixe-me saber se você tem mais perguntas.

0
MikeSchinkel