Personalizzazione delle tabelle di amministrazione di WordPress: per iniziare

Tutti coloro che utilizzano WordPress avranno familiarità con le tabelle di amministrazione di WordPress che appaiono in tutte le aree principali della panoramica come Pagine e Post. Lo stesso formato viene utilizzato per questi tipi di tabelle in WordPress, il che significa che diventi rapidamente esperto nell'usarle. Ma sapevi che puoi modificare le tabelle di amministrazione di WordPress e alterare le informazioni visualizzate o aggiungere le tue colonne extra?

In questo articolo spiegheremo come puoi farlo. Iniziamo!

I ganci

Per mostrare i dati delle tabelle di amministrazione, WordPress estende la classe integrata WP_List_Table . La classe WP_List_Table viene introdotta come classe privata nel file wp-admin/includes/class-wp-list-table.php . Le classi private sono denominate private in quanto sono destinate all'uso da parte di altre classi e funzioni principali e non da sviluppatori.

WordPress ti offre la possibilità di modificare le tabelle di amministrazione. Per manipolare le colonne delle tabelle devi usare uno dei filtri hook che WordPress fornisce nel file wp-admin/includes/class-wp-posts-list-table.php .

In questo file, la classe WP_Posts_List_Table estende la classe WP_List_Table e ne ridefinisce le proprietà e i metodi per popolare le tabelle di amministrazione in base al tipo di post. Puoi usare l'hook manage_posts_columns per la tabella dei post, manage_pages_columns per le pagine e manage_{$post_type}_posts_columns se vuoi manipolare le colonne di una tabella del tipo di post personalizzata.

In questo file sono descritte anche le colonne utilizzate per impostazione predefinita per i dati della tabella. Intorno alla riga 616 viene introdotto l'array $posts_columns e vengono aggiunte le seguenti colonne:

• La colonna della casella di controllo "cb" per le azioni collettive
• La colonna "titolo" del post
• La colonna "autore" per l'autore del post
• La colonna "categorie" per le categorie a cui appartiene il post
• La colonna "tag" del post
• La colonna "Commenti".
• La colonna "data" pubblicata

Aggiunta di una colonna personalizzata alle tabelle di amministrazione

L'aggiunta di una colonna personalizzata a una tabella è qualcosa che gli sviluppatori devono fare frequentemente. Inoltre, essere in grado di ordinare le colonne è anche molto utile quando si organizzano i contenuti. Dimostreremo come viene implementata una colonna personalizzata per post, pagine e tipi di post personalizzati e come possiamo rendere ordinabili queste colonne personalizzate.

Le tabelle dell'elenco dei post

Ad esempio, vediamo come potremmo aggiungere una colonna che descrive quando un post è stato modificato l'ultima volta. Questa potrebbe essere una funzionalità davvero utile da avere, soprattutto se gestisci un blog con molti post e vuoi essere in grado di controllare quando ciascuno è stato aggiornato l'ultima volta. Vediamo come questo può essere implementato.

Per iniziare, dobbiamo aggiungere il nome della nuova colonna all'array dei nomi delle intestazioni delle colonne. Diamo un'occhiata più da vicino alla riga 663 del file class-wp-posts-list-table.php .

 if ( 'page' === $post_type ) { $posts_columns = apply_filters( 'manage_pages_columns', $posts_columns ); } else { $posts_columns = apply_filters( 'manage_posts_columns', $posts_columns, $post_type ); }

In questa parte di codice è chiaro che dovremmo usare il filtro manage_posts_columns (vedi qui per maggiori informazioni su questo) poiché vogliamo apportare le modifiche alla tabella dell'elenco dei post. Per aggiungere il nome della colonna all'array di intestazioni di colonna, modificheremo il file functions.php del nostro tema attivo e inseriremo questo pezzo di codice:

 add_filter('manage_posts_columns','add_custom_columns'); function add_custom_columns( $columns ) { $columns['last_modified'] = 'Last modified'; return $columns; }

Ora, se aggiorniamo la pagina dell'elenco dei post dell'amministratore, possiamo vedere la colonna extra. Non ci saranno dati in questa colonna in questa fase.

Nel nostro prossimo passaggio dobbiamo dire a WordPress quale contenuto verrà visualizzato nella colonna. Per fare ciò, utilizzeremo l'azione manage_posts_columns che fa parte della funzione pubblica column_default che è responsabile dell'output delle colonne. Questa azione corrisponde solo ai tipi di post che non sono gerarchici, come i post, e puoi individuarla intorno alla riga 1258.

Quello che faremo effettivamente qui per riempire il contenuto è eseguire un'istruzione switch per tutte le colonne personalizzate e, poiché il nome dell'intestazione è "last_modified" (come l'abbiamo registrato nel nostro passaggio iniziale sopra), faremo eco al nostro contenuto. Per fare eco al contenuto, utilizzeremo la funzione get_post_field incorporata in WordPress e restituiremo il campo desiderato che potrebbe essere qualsiasi colonna della tabella wp_posts nel database. In caso di errore restituirà una stringa vuota.

Quindi nel file functions.php aggiungeremo il codice qui sotto:

 add_action( 'manage_posts_custom_column','custom_columns_content', 10, 2 ); function custom_columns_content ( $column_id, $post_id ) { switch( $column_id ) { case 'last_modified': echo get_post_field('post_modified', $post_id); break; } }

Puoi confermare che funziona come previsto aggiornando nuovamente la pagina.

Si noti che il valore "Ultima modifica" per il secondo post che non è mai stato modificato dopo la sua pubblicazione iniziale è lo stesso della data di pubblicazione.

La tabella dell'elenco delle pagine

Per fare la stessa cosa nella tabella dell'elenco delle pagine, aggiungiamo il nome della colonna allo stesso modo all'array dei nomi delle intestazioni di colonna. La differenza questa volta è che useremo l'hook manage_pages_columns come mostrato di seguito:

 add_filter('manage_pages_columns','add_custom_page_columns'); function add_custom_page_columns( $columns ) { $columns['last_modified'] = 'Last modified'; return $columns; }

Successivamente aggiungeremo i contenuti usando l'hook manage_pages_custom_column invece di manage_posts_custom_column che abbiamo usato prima.

 add_action( 'manage_pages_custom_column','custom_columns_content', 10, 2 ); function custom_columns_content ( $column_id, $post_id ) { switch( $column_id ) { case 'last_modified': echo get_post_field('post_modified', $post_id); break; } }

Dopo aver inserito il codice sopra nel nostro file functions.php possiamo confermare che le cose stanno funzionando come previsto visitando la tabella di amministrazione delle pagine nella nostra area di amministrazione dove ora dovremmo vedere una colonna "Ultima modifica".

La tabella dei tipi di post personalizzati

Per prima cosa creeremo un tipo di post personalizzato inserendo il codice qui sotto nel nostro file functions.php :

 function my_custom_post_type() { register_post_type( 'mycpt', array( 'labels' => array( 'name' => __( 'Custom Post Types' ), 'singular_name' => __( 'Custom Post Type' ) ), 'public' => true, 'has_archive' => true, 'rewrite' => array('slug' => 'mycpt'), 'show_in_rest' => true, ) ); } add_action( 'init', 'my_custom_post_type' );

Nel nostro menu di amministrazione noteremo che è stato aggiunto un nuovo elemento chiamato "Tipo di post personalizzato".

Se non sai come vengono creati i tipi di post personalizzati e vuoi saperne di più, puoi consultare il nostro articolo correlato sulla creazione di tipi di post personalizzati.

Ora che abbiamo la nostra configurazione del tipo di post personalizzato, procederemo con l'aggiunta della nostra nuova intestazione di colonna con il suo contenuto. Come accennato in precedenza, nel caso di un CPT (Custom Post Type) dobbiamo utilizzare manage_{$post_type}_posts_columns per aggiungere la nostra colonna personalizzata.

Il {$post_type} deve essere identico al primo argomento della funzione register_post_type() che in questo caso è 'mycpt'.

Quindi, il pezzo di codice che useremo nel file functions.php per aggiungere l'intestazione della nostra colonna sarà il seguente:

 add_filter( 'manage_mycpt_posts_columns','add_mycpt_custom_columns'); function add_mycpt_custom_columns( $columns ) { $columns['last_modified'] = 'Last modified'; return $columns; }

E per riempire il contenuto della colonna:

 add_action( 'manage_mycpt_posts_custom_column','fill_mycpt_posts_custom_column'); function fill_mycpt_posts_custom_column( $column_id, $post_id ) { switch( $column_id ) { case 'last_modified': echo get_post_field('post_modified', $post_id); break; } }

I risultati dovrebbero essere qualcosa del genere:

Rendi le colonne ordinabili

Per rendere ordinabile la colonna, dobbiamo definire quali colonne personalizzate possono essere ordinate. Per fare ciò utilizziamo il manage_edit-{post-type}_sortable_columns con una funzione di callback.

Quindi, in ogni caso di tipo di post aggiungeremo lo stesso codice (con nomi di funzioni univoci ovviamente).

Per i post:

 add_filter( 'manage_edit-post_sortable_columns', 'sortable_post_columns' ); function sortable_post_columns( $columns ) { $columns['last_modified'] = 'Last modified'; return $columns; }

Per le pagine:

 add_filter( 'manage_edit-page_sortable_columns', 'sortable_page_columns' ); function sortable_page_columns( $columns ) { $columns['last_modified'] = 'Last modified'; return $columns; }

Per i nostri post personalizzati digita (mycpt):

 add_filter( 'manage_edit-mycpt_sortable_columns', 'sortable_mycpt_posts_columns' ); function sortable_mycpt_posts_columns( $columns ) { $columns['last_modified'] = 'Last modified'; return $columns; }

Ora, se visiti una delle tue tabelle di amministrazione, dovresti vedere che l'intestazione della colonna personalizzata viene visualizzata come collegamento. Se fai clic su questo dovrebbe quindi ordinare per data modificata.

Disabilita l'ordinamento per colonne

Per rimuovere la funzione di ordinamento per una colonna dobbiamo solo rimuoverla dall'array. Se, ad esempio, vogliamo farlo per la colonna 'date', aggiungeremo una riga di codice aggiuntiva unset($columns['date']) . Questo sarebbe simile a questo:

Per i post:

 add_filter( 'manage_edit-post_sortable_columns', 'sortable_post_columns' ); function sortable_post_columns( $columns ) { $columns['last_modified'] = 'Last modified'; unset($columns['date']); return $columns; }

Per le pagine:

 add_filter( 'manage_edit-page_sortable_columns', 'sortable_page_columns' ); function sortable_page_columns( $columns ) { $columns['last_modified'] = 'Last modified'; unset($columns['date']); return $columns; }

Per i nostri post personalizzati digita (mycpt):

 add_filter( 'manage_edit-mycpt_sortable_columns', 'sortable_mycpt_posts_columns' ); function sortable_mycpt_posts_columns( $columns ) { $columns['last_modified'] = 'Last modified'; unset($columns['date']); return $columns; }

Ora se visiti la tabella appropriata noterai che l'etichetta Data non è più selezionabile (e quindi quella colonna non è più ordinabile).

A questo punto vale la pena evidenziare un dettaglio che spesso confonde gli sviluppatori di WordPress. Dai un'occhiata alla tabella qui sotto che mostra gli hook che abbiamo usato per Post, Pagine e Post personalizzati.

Potresti aver notato che i ganci che utilizziamo per ordinare le colonne non seguono davvero lo schema. Ti aspetteresti che siano manage_posts_sortable_columns , manage_pages_sortable_columns e manage_mycpt_posts_sortable_columns . Purtroppo questa è solo una questione di cattiva denominazione. È comunque molto utile mantenere una tabella riassuntiva come questa come semplice promemoria.

Modifica della larghezza delle colonne

Per regolare la larghezza di una colonna utilizzeremo l'action hook admin_head che WordPress fornisce ed esegue nella sezione head per tutte le pagine di amministrazione che includono CSS o JS.

Ad esempio, prova a inserire il codice qui sotto nel file functions.php :

 add_action('admin_head', 'my_column_width'); function my_column_width() { echo '<style type="text/css">'; echo '.table-view-list.posts .column-title { width:120px !important; overflow:hidden }'; echo '</style>'; }

Qui, abbiamo usato la classe .column-title della colonna title che è comune a tutte le tabelle admin e le .table-view-list.posts . Combinati, questi assicurano che il CSS venga applicato solo nella tabella dell'elenco dei post.

Per ottenere la stessa cosa per le altre nostre schermate di amministrazione (come Pagine) utilizzeremo invece table-view-list.pages .

Conclusione

Ci sono molte possibilità quando si tratta di manipolare le colonne delle tabelle di amministrazione di WordPress. Negli articoli futuri esamineremo altri esempi e forniremo alcuni utili trucchi che puoi utilizzare per ottenere di più dalle tue tabelle di amministrazione!