Creazione di una tabella in stile amministratore?

Usa l'API Core, non solo il suo CSS

Normalmente utilizzi semplicemente un'istanza della classe WP_List_Table.

Guide:

• Maggiori informazioni nel Codex qui.
• Ecco anche una guida da WP Engineer - troppo lunga per copiarla qui.
• E un'altra guida su Smashing Magazine online.

Vantaggi?

ASSOLUTAMENTE SI!

Puoi aggiungere paginazione, caselle di ricerca, azioni e qualsiasi magia tu possa immaginare (e sia in grado di codificare).

Utilizza questo esempio (scritto come plugin) per creare le tue tabelle di amministrazione:

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

Utilizza la classe integrata WP_List_Table.

Puoi anche utilizzare questo piccolo plugin per visualizzare le possibilità del backend in WP: https://github.com/bueltge/WordPress-Admin-Style

Ci sono molte buone opzioni qui. Ma manca una soluzione rapida e sporca:

<table class="widefat striped fixed">
    <thead>
        <tr>
            <th>Intestazione1</th>
            <th>Intestazione2</th>
            <th>Intestazione3</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Contenuto1</td>
            <td>Contenuto2</td>
            <td>Contenuto3</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th>Piè di pagina1</th>
            <th>Piè di pagina2</th>
            <th>Piè di pagina3</th>
        </tr>
    </tfoot>
</table>

Spiegazione

• La classe widefat viene utilizzata dal common.css, caricato nell'area di amministrazione, per far sembrare la tabella come una tabella di WordPress.
• La classe striped la rende a righe alternate (che sorpresa).
• La classe fixed aggiunge il CSS: table-layout: fixed;

Per chi sta cercando di implementare WP_List_Table, si prega di notare che tutte le guide che ho trovato sono tristemente obsolete e porteranno a scrivere codice ridondante o addirittura a fare cose che non funzionano più.

Ecco un esempio minimale che funziona in una certa misura. Dovrebbe essere facile da capire senza una "guida" e vi darà un punto di partenza.

Include:

• filtri rapidi (viste)
• casella di ricerca
• azioni sulla riga

Mancano:

• configurazione della dimensione della pagina (in realtà non ho mai visto una pagina Wordpress che utilizzi questa funzionalità)
• azioni bulk
• filtri a tendina

class My_List_Table extends WP_List_Table {

    function __construct() {
        parent::__construct([
            'singular' => 'employee',
            'plural' => 'employees',
        ]);
    }

    function get_columns() {
        return [
            'name'      => __('Nome'),
            'employer' => __('Datore di lavoro'),
            'rank'     => __('Livello'),
            'phone'    => __('Telefono'),
            'joined'   => __('Data di assunzione'),
        ];
    }

    /* Opzionale - senza di esso nessuna colonna è ordinabile */
    public function get_sortable_columns() {
        return [
           // le chiavi sono "nome_colonna" come sopra
           // i valori sono nomi di campo "ordine" in base a ciò di cui ha bisogno il tuo modello dati
            'name'     => 'name',
            'employer' => 'employer',
            'rank'     => 'rank',
            'joined'   => 'joined',
        ];
    }

    public function prepare_items() {
       // supporto per la casella di ricerca
        $search = @$_REQUEST['s'] ? wp_unslash(trim($_REQUEST['s']))) : '';
       // ottiene l'impostazione del numero di record per pagina dallo storage delle opzioni
        $per_page = $this->get_items_per_page('my_list_table_per_page');
       // riempie l'array di dati con gli elementi del tuo modello. Nella mia implementazione questi
       // sono istanze di StdClass con vari campi, ma può essere qualsiasi cosa
       // vedremo tra un minuto come.
        $this->items = get_model_items([
            'offset' => ($this->get_pagenum()-1)*$per_page,
            'count' => $per_page,
            'orderby' => @$_GET["orderby"] ?: 'id', // campo di ordinamento predefinito, se non specificato
            'order' => @$_GET["order"] ?: 'ASC', // direzione di ordinamento predefinita
            'search' => $search, // passa il campo di ricerca se impostato
            'status' => @$_REQUEST['status'] // passa il filtro della vista, se impostato [vedi get_views()]
        );
        $this->set_pagination_args([
            "total_items" => get_model_item_count(),
            "per_page" => $per_page,
        ]);
       // `get_model_item_count` dovrebbe essere il numero totale di record dopo
       // il filtraggio (viste e ricerca) ma prima dell'impaginazione. Questo può essere difficile/inefficiente
       // da fare con MySQL. Se vuoi inserire qui i risultati di `COUNT(*)`,
       // nessuno ti biasimerà.
    }

    public function column_default($item, $column_name) {
        // presentazione predefinita della colonna
        // La maggior parte dei campi del mio oggetto sono stampabili così come sono, quindi abbiamo un metodo
        // generico per gestirlo.
        return $item->$column_name;
    }

    /* Opzionale, a meno che non abbia dati che richiedono una formattazione speciale */
    public function column_joined($item) {
        // Il campo 'joined' è un oggetto DateTime e non può essere implicitamente
       // convertito in stringa dalla logica integrata, quindi dovremo farlo noi
        return $item->joined->format("Y-m-d");
    }

   /* Opzionale - disegna filtri rapidi sopra la tabella */
    public function get_views() {
        $makelink = function($filter_val, $name) { // strumento per DRYing per i creatori di viste
            $filter_name = 'status';
            return '<a href="'
                . esc_url(add_query_arg($filter_name, $filter_val)) . '" ' .
                (@$_REQUEST[$filter_name]==$filter_val ? 
                    'class="current" aria-current="page"' : ''). ">" .
                $name . "</a>";
        };
        return [
            'all' => $makelink(false, __('Tutti')),
            'green' => $makelink('green', __('Principianti')),
            'pros' => $makelink('pro', __('Esperti')),
            'bofh' => $makelink('veteran', __('Vecchi veterani')),
        ];
    }

    /* Opzionale: azioni sulla riga */
    public function handle_row_actions($item, $column_name, $primary) {
        $out = parent::handle_row_actions($item, $column_name, $primary);
        if ($column_name === $primary)
            $out .= $this->row_actions([
                'edit' => sprintf('<a href="%s">%s</a>',
                    add_query_arg('employee_id', $item->id, admin_url('admin.php?page=edit-employee')),
                    __("Modifica")),
                'delete' => sprintf('<a href="%s">%s</a>',
                    add_query_arg('employee_id', $item->id, admin_url('admin.php?page=delete-employee')),
                    __("Elimina")),
            ]);
        return $out;
    }

}

Quindi la funzione della pagina di amministrazione (per add_menu_page/add_submenu_page) potrebbe essere così:

function drawAdminPage() {
    $my_list_table = new My_List_Table();
    $my_list_table->prepare_items();
    ?>
    <div class="wrap">
    <h1 class="wp-heading-inline"><?php _e('Titolo pagina admin')?></h1>
    <hr class="wp-header-end">
    <?php $my_list_table->views() ?>
    <form id="employee-filter" method="get">
    <input type="hidden" name="page" value="<?php echo $_REQUEST['page']?>">
    <?php $my_list_table->search_box(__('Cerca'), 'employee') ?>
    <?php $my_list_table->display(); ?>
    </form>
    </div>
    <?php
}

Potresti voler aggiungere un filtro alla lista del tuo custom post type nell'area di amministrazione? La risposta linkata qui sotto mostra come farlo con una tassonomia, ma potresti facilmente usare altri criteri nel tuo hook restrict_manage_posts:

• Aggiungere un Filtro per Tassonomia alla Lista di Amministrazione per un Custom Post Type?

Fammi sapere se hai altre domande.