Criando uma tabela no estilo admin?

44

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

Estou expandindo o plug-in Imagens de cache e ele contém uma tabela com domínios e várias imagens desse domínio. Portanto, não há uma tabela existente equivalente na qual eu possa criar (na primeira versão desta pergunta, perguntei sobre uma tabela com postagens, mas era possível (talvez) expandir a tabela de postagens existente ).

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

plugin-development admin Jan Fabry
fonte
3
Há um novo blog para o guia de estilo da interface do usuário do WordPress, que pode ser útil. dotorgstyleguide.wordpress.com/outline
sorich87
2
Nota para self: scribu adicionou um novo sistema de tabela ajaxificado no WP 3.1 , com uma classe base WP_List_Table. Esta pergunta provavelmente pode ser atualizada com informações sobre como usá-la.
Jan Fabry

Respostas:

29

Isto é o que eu 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.

sorich87
fonte
é também ter paginação automática inserida assim? (por exemplo, mostrando as postagens 1-20)
Michiel Standaert 7/11/11
@MichielStandaert No.
kaiser
@MichielStandaert se você quer um resultado paginado você pode usar paginate_links
tiltdown
Obrigado ! (Mas eu ainda perguntar por que eles não usar :oddpara a linha em vez de deixar-nos adicionar uma classe cada duas fileiras ...)
Zachary Dahan
Obviamente, existem soluções "melhores" (como as outras respostas aqui), mas para uma tabela rápida e básica, é exatamente isso que eu estava procurando. Obrigado!
rinogo 01/11
26

Use a API principal, não apenas seu CSS

Normalmente você apenas usa uma instância da WP_List_Tableclasse.

Guias:

Benefícios?

SIM!

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

kaiser
fonte
1
Pequena dica como link para ver a marcação, classes para a interface de administração, sem apenas o objetivo de criar tabelas: github.com/bueltge/WordPress-Admin-Style
bueltge
1
> O acesso desta classe está marcado como privado. Isso significa que ele não deve ser usado por desenvolvedores de plug-ins e temas, pois está sujeito a alterações sem aviso prévio em qualquer versão futura do WordPress. Se você ainda deseja fazer uso da classe, faça uma cópia para usar e distribuir com seu próprio projeto, ou use-a por sua conta e risco.
Austin Pray
@AustinPray Uma cópia ? Não, por favor, não faça isso. Existem betas, RCs e outros pré-lançamentos do WP disponíveis. Basta atualizar sua implementação / extensão. Se você realmente tem que ir de lado, basta escrever algo melhor por conta própria. O código do núcleo não é que boa.
Kaiser #
@kaiser Não atire no mensageiro, essas não são minhas palavras. Eu estava citando o WP Codex. Embora se inscreva para o teste de regressão perpétuo com todas as versões beta e RC não pareça muito melhor do que copiar a classe. Concordo que escrever sua própria aula simples é o melhor caminho a seguir.
Austin Pray
@AustinPray Sem ressentimentos :) O Codex é escrito por pessoas como você e eu. De fato, você pode ir agora e reverter essa declaração e as pessoas a citarão.
Kaiser #
0

Você pode considerar adicionar um filtro à sua lista de tipos de postagem personalizados no administrador? A resposta vinculada abaixo mostra como fazer isso com uma taxonomia, mas você pode facilmente usar outros critérios no seu restrict_manage_postsgancho:

Deixe-me saber se você tem mais perguntas.

MikeSchinkel
fonte
Peço desculpas pela pergunta incerta. No meu primeiro exemplo, era uma tabela de postagens e, de fato, eu poderia tentar usar a tabela de postagens existente para isso (mesmo que eu queira apenas mostrar os títulos das postagens e todas as colunas personalizadas?). Mas agora editei minha pergunta com um exemplo concreto: tenho uma tabela de domínios, portanto não há tabela existente equivalente que possa ser expandida.
Jan Fabry
@ Jan : Ah. Sim, acho que você encontrou a verdade, que não há uma boa maneira encapsulada de fazer isso além de escrever HTML (duplicado). Eu sempre tive o mesmo problema. Talvez crie um ticket no trac solicitando esse aprimoramento e vincule o URL / ticket # aqui para que possamos dar suporte.
MikeSchinkel