Personnalisation des tableaux d'administration de WordPress : mise en route

Tous ceux qui utilisent WordPress seront familiarisés avec les tableaux d'administration WordPress qui apparaissent dans toutes les zones de présentation principales telles que les pages et les publications. Le même format est utilisé pour ces types de tableaux dans WordPress, ce qui signifie que vous devenez rapidement apte à les utiliser. Mais saviez-vous que vous pouvez modifier les tableaux d'administration WordPress et modifier les informations affichées ou ajouter vos propres colonnes supplémentaires ?

Dans cet article, nous vous expliquerons comment vous pouvez le faire. Commençons!

Les crochets

Afin d'afficher les données des tables d'administration, WordPress étend la classe intégrée WP_List_Table . La classe WP_List_Table est introduite en tant que classe privée dans le fichier wp-admin/includes/class-wp-list-table.php . Les classes privées sont nommées privées car elles sont uniquement destinées à être utilisées par d'autres classes et fonctions principales et non par les développeurs.

WordPress vous offre la possibilité de modifier les tables d'administration. Pour manipuler les colonnes des tableaux, vous devez utiliser l'un des hooks de filtre fournis par WordPress dans le fichier wp-admin/includes/class-wp-posts-list-table.php .

Dans ce fichier, la classe WP_Posts_List_Table étend la classe WP_List_Table et redéfinit ses propriétés et ses méthodes afin de remplir les tables d'administration en fonction de son type de publication. Vous pouvez utiliser le crochet manage_posts_columns pour la table des publications, manage_pages_columns pour les pages et manage_{$post_type}_posts_columns si vous souhaitez manipuler les colonnes d'une table de type de publication personnalisée.

Les colonnes utilisées par défaut pour les données du tableau sont également décrites dans ce fichier. Autour de la ligne 616, le tableau $posts_columns est introduit et les colonnes suivantes sont ajoutées :

• La colonne de cases à cocher "cb" pour les actions groupées
• La colonne "titre" de l'article
• La colonne "auteur" pour l'auteur du message
• La colonne "catégories" pour les catégories auxquelles appartient la publication
• La colonne 'tags' de la publication
• La colonne "commentaires"
• La colonne 'date' publiée

Ajout d'une colonne personnalisée aux tableaux d'administration

L'ajout d'une colonne personnalisée à une table est quelque chose que les développeurs doivent souvent faire. De plus, pouvoir trier ses colonnes est également très pratique lors de l'organisation du contenu. Nous montrerons comment une colonne personnalisée est implémentée pour les publications, les pages et les types de publication personnalisés et comment nous pouvons rendre ces colonnes personnalisées triables.

Les tableaux de la liste des publications

À titre d'exemple, voyons comment nous pourrions ajouter une colonne qui décrit quand un article a été modifié pour la dernière fois. Cela pourrait être une fonctionnalité très utile à avoir, surtout si vous gérez un blog avec beaucoup de messages et que vous voulez pouvoir vérifier quand chacun a été mis à jour pour la dernière fois. Voyons comment cela peut être mis en œuvre.

Pour commencer, nous devons ajouter le nom de la nouvelle colonne au tableau des noms d'en-tête de colonne. Examinons de plus près la ligne 663 du fichier 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 ); }

Dans cette partie du code, il est clair que nous devons utiliser le filtre manage_posts_columns (voir ici pour plus d'informations à ce sujet) car nous voulons apporter les modifications à la table de la liste des publications. Pour ajouter le nom de la colonne au tableau des en-têtes de colonne, nous allons éditer le fichier functions.php de notre thème actif et insérer ce morceau de code :

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

Maintenant, si nous actualisons la page de la liste des messages d'administration, nous pouvons voir la colonne supplémentaire. Il n'y aura pas de données dans cette colonne à ce stade.

Dans notre prochaine étape, nous devons indiquer à WordPress quel contenu sera affiché dans la colonne. Pour ce faire, nous utiliserons l'action manage_posts_columns qui fait partie de la fonction publique column_default responsable de la sortie des colonnes. Cette action correspond uniquement aux types de publication non hiérarchiques, tels que les publications, et vous pouvez la repérer autour de la ligne 1258.

Ce que nous allons réellement faire ici pour remplir le contenu est d'exécuter une instruction switch pour toutes les colonnes personnalisées et, comme le nom de l'en-tête est 'last_modified' (comme nous l'avons enregistré dans notre étape initiale ci-dessus), nous ferons écho à notre contenu. Pour faire écho au contenu, nous utiliserons la fonction get_post_field de WordPress et renverrons le champ souhaité, qui pourrait être n'importe quelle colonne de la table wp_posts de la base de données. En cas d'échec, il renverra une chaîne vide.

Ainsi dans le fichier functions.php nous ajouterons le code ci-dessous :

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

Vous pouvez confirmer que cela fonctionne comme prévu en actualisant à nouveau la page.

Notez que la valeur "Dernière modification" pour le deuxième message qui n'a jamais été modifié après sa publication initiale est la même que la date de publication.

Le tableau de la liste des pages

Pour faire la même chose dans le tableau de la liste des pages, nous ajoutons le nom de la colonne de la même manière au tableau des noms d'en-tête de colonne. La différence cette fois est que nous utiliserons le crochet manage_pages_columns comme indiqué ci-dessous :

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

Ensuite, nous ajouterons le contenu en utilisant le crochet manage_pages_custom_column au lieu de manage_posts_custom_column que nous utilisions auparavant.

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

Après avoir inséré le code ci-dessus dans notre fichier functions.php , nous pouvons confirmer que tout fonctionne comme prévu en visitant la table Pages Admin dans notre zone d'administration où nous devrions maintenant voir une colonne "Dernière modification".

Le tableau des types de publication personnalisés

Nous allons d'abord créer un type de publication personnalisé en insérant le code ci-dessous dans notre fichier 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' );

Dans notre menu d'administration, nous remarquerons qu'un nouvel élément a été ajouté appelé "Type de message personnalisé".

Si vous ne savez pas comment les types de publication personnalisés sont créés et que vous souhaitez en savoir plus, vous pouvez consulter notre article connexe sur la création de types de publication personnalisés.

Maintenant que nous avons notre configuration de type de message personnalisé, nous allons ajouter notre nouvel en-tête de colonne avec son contenu. Comme mentionné précédemment, dans le cas d'un CPT (Custom Post Type), nous devons utiliser le manage_{$post_type}_posts_columns pour ajouter notre colonne personnalisée.

Le {$post_type} doit être identique au premier argument de la fonction register_post_type() qui dans ce cas est 'mycpt'.

Ainsi, le morceau de code que nous utiliserons dans le fichier functions.php pour ajouter notre en-tête de colonne sera le suivant :

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

Et pour remplir le contenu de la colonne :

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

Les résultats devraient ressembler à ceci :

Rendre les colonnes triables

Afin de rendre la colonne triable, nous devons définir quelles colonnes personnalisées sont autorisées à être triées. Pour ce faire, nous utilisons le manage_edit-{post-type}_sortable_columns avec une fonction de rappel.

Ainsi, dans chaque cas de type de publication, nous ajouterons le même code (avec des noms de fonction uniques bien sûr).

Pour les postes :

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

Pour les pages :

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

Pour notre type de messages personnalisés (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; }

Désormais, si vous visitez l'une de vos tables d'administration, vous devriez voir que l'en-tête de la colonne personnalisée s'affiche sous forme de lien. Si vous cliquez dessus, il devrait alors trier par date de modification.

Désactiver le tri des colonnes

Pour supprimer la fonction de tri d'une colonne, il suffit de la supprimer du tableau. Si, par exemple, nous voulons faire cela pour la colonne 'date', nous ajouterions une ligne supplémentaire de code unset($columns['date']) . Cela ressemblerait à ceci :

Pour les postes :

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

Pour les pages :

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

Pour notre type de messages personnalisés (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; }

Maintenant, si vous visitez le tableau approprié, vous remarquerez que l'étiquette Date n'est plus cliquable (et donc cette colonne n'est plus triable).

À ce stade, il convient de souligner un détail qui déroute souvent les développeurs WordPress. Jetez un œil au tableau ci-dessous qui montre les crochets que nous avons utilisés pour les publications, les pages et les publications personnalisées.

Vous avez peut-être remarqué que les crochets que nous utilisons pour trier les colonnes ne suivent pas vraiment le modèle. Vous vous attendez à ce qu'ils soient manage_posts_sortable_columns , manage_pages_sortable_columns et manage_mycpt_posts_sortable_columns respectivement. Malheureusement, ce n'est qu'une question de mauvais nom. Il est néanmoins très utile de conserver un tableau récapitulatif comme celui-ci comme aide-mémoire.

Modification de la largeur des colonnes

Pour ajuster la largeur d'une colonne, nous utiliserons le crochet d'action admin_head que WordPress fournit et exécute dans la section head pour toutes les pages d'administration qui incluent CSS ou JS.

Par exemple, essayez d'entrer le code ci-dessous dans le fichier 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>'; }

Ici, nous avons utilisé la classe .column-title de la colonne de titre qui est commune à toutes les tables d'administration, et les .table-view-list.posts . Combinés, ceux-ci garantissent que le CSS ne sera appliqué que dans le tableau de la liste des publications.

Pour obtenir la même chose pour nos autres écrans d'administration (tels que Pages), nous utiliserons à la place table-view-list.pages .

Conclusion

Il existe de nombreuses possibilités pour manipuler les colonnes des tableaux d'administration WordPress. Dans les prochains articles, nous passerons en revue d'autres exemples et fournirons quelques astuces utiles que vous pouvez utiliser pour tirer le meilleur parti de vos tables d'administration !