Ajouter une colonne custom avec un tri dans l’admin WordPress

Dewy.fr » Blog » WordPress » Ajouter une colonne custom avec un tri dans l’admin WordPress

Il est intéressant d’ajouter une information pertinente dans la colonne d’administration des articles de WordPress. Sur l’un de mes sites, j’ai eu besoin d’ajouter une colonne mettant en avant le nombre de mots présent dans l’article. Je souhaite également ajouter un tri spécifique sur cette nouvelle colonne. Je vous montre dans cet article la marche à suivre pour personnaliser le tableau d’affichage des articles dans l’administration WordPress.

Présentation de la liste des articles dans l’administration WordPress

Pour mon besoin je souhaite ajouter une colonne dans le listing des articles présent dans l’administration d’un site WordPress

Ce tableau est intéressant car en un coup d’œil, on peut voir les informations essentielles sur nos articles de notre site. Pour mon besoin, je souhaite ajouter une nouvelle colonne nombre de mots dans ce tableau. Je fais un peu de référencements sur mes sites et cette information me permet de visualiser rapidement le ou les articles avec un nombre de mots insuffisant. Pour mes sites je veux des articles avec minimum 1000 mots. En dessous de cette valeur, j’optimise mon texte en ajoutant du contenu.

Cette information sur le nombre de mot de l’article est nativement présente dans WordPress. En effet, lorsque vous êtes dans la zone d’édition d’un contenu vous pouvez voir un bouton information en haut à gauche de votre écran. En cliquant dessus, vous pouvez visualiser les informations suivantes sur votre article.

• le nombre de mots
• le nombre de caractères
• le temps de lecture
• le nombre de titre
• le nombre de paragraphes
• le nombre de blocs gutenberg utilisés pour l’article

Vous avez également un aperçu de votre article avec les titres utilisés pour construire votre contenu. Bref ces informations sont intéressantes mais il faut accéder à la zone d’édition de l’article pour avoir l’information. C’est assez ennuyeux surtout quand vous avez des centaines d’articles présents sur votre site.

Heureusement WordPress met à la disposition des développeurs des hooks spécifiques pour modifier l’affichage de ce tableau.

Comment ajouter une nouvelle colonne dans l’administration de WordPress ?

Pour faire cette opération, vous devez utiliser le filtre manage_{$post_type}_posts_columns. Ce filtre WordPress est ajouté dans le fichier functions.php de votre thème. Pour mon besoin, je souhaite voir cette nouvelle colonne sur le tableau d’édition des articles du coup j’adapte le filtre comme ceci manage_post_posts_columns.

Si vous voulez ajouter votre colonne sur le tableau d’édition des pages WordPress, vous devez modifier le filtre en mettant à la place de {$post_type} le post type page. Le filtre deviens manage_page_posts_columns.

Dans mon fichier functions.php, j’ai ces quelques lignes de code

add_filter('manage_post_posts_columns', function($columns) {
    $columns['word_count'] = 'Nombre de mots';
    return $columns;
  });

En mettant ce bout de code vous pouvez voir une nouvelle colonne Nombre de mots qui s’affiche

Maintenant dans cette colonne, j’ajoute le code nécessaire pour faire le calcul de nombres de mots de l’article. Le code doit être également ajouté dans le fichier functions.php.

add_action('manage_posts_custom_column', function($columns, $post_id){
    switch ($columns) {
      case 'word_count':
        str_word_count( 
          strip_tags( 
            strip_shortcodes(get_post_field( 'post_content', $post_id )) 
          ) 
        );
        echo $post_wordcount;
        break;
    }
  }, 2, 10);

Pour calculer le nombre de mots de l’article, j’utilise la fonction native de php str_word_count. Puis je récupère le contenu de l’article via la fonction WordPress get_post_field. Pour avoir un nombre de mots le plus précis possible, j’enlève toutes les balises HTML ou autres balises PHP éventuellement présentes dans le texte. J’enlève également les shortcodes WordPress qu’on peut parfois trouver dans un article.

En ajoutant ces quelques lignes de codes, vous aurez une indication sur le nombre de mots présents dans votre article…et cela en un coup d’œil.

Ajout d’un tri personnalisé sur la colonne nombre de mots

Sur les colonnes de ce tableau WordPress, il est possible d’utiliser un tri pour afficher les données du plus petit au plus grand ou l’inverse. Notre nouvelle colonne ne possède pas cette fonctionnalité. Il faut ajouter un peu de code pour avoir un tri sur le nombre de mots. Pour ajouter ce tri il faut utiliser le filtre manage_{$this->screen->id}_sortable_columns. Pour que ce filtre fonctionne correctement, il est nécessaire de cibler précisément « l’écran » sur lequel vous voulez visualiser le tri. Pour mon besoin, je veux voir ce tri sur l’écran d’édition des articles. Du coup, mon filtre deviens manage_edit-post_sortable_columns.

add_filter(
    'manage_edit-post_sortable_columns',
    function( $columns ) {
      $columns['word_count'] = 'word_count';
      return $columns;
    }
  );

Pour avoir cette information précise sur « l’écran », n’hésitez pas à lire la documentation sur la fonction suivante get_current_screen. Cette fonction remonte toutes les informations sur les différents « écrans » de l’administration WordPress.

Pourtant, on va avoir quelques problèmes sur ce tri. En laissant, notre code en l’état, vous aurez un tri peu performant et assez aléatoire. Il faut ajouter des informations supplémentaires dans notre code pour que WordPress traite convenablement cette nouvelle colonne avec son tri personnalisé.

Amélioration du tri pour notre nouvelle colonne

En fait, si le tri initialement paramétré ne fonctionne pas bien c’est tout à fait normal. Ce tri dans les colonnes WordPress fonctionne grace au paramètre orderby de la requête WordPress. Cette variable de la requête ou query comprend les valeurs suivantes :

• title
• date
• modified
• comment_count

Avec notre filtre on ajoute un autre tri que WordPress et sa requête ne reconnaissent pas. Du coup il faut trouver un moyen d’ajouter notre tri personnalisé dans la requête.

Ajout d’une donnée nombre de mots dans la base de données pour les articles

Tout d’abord, je paramètre une nouvelle donnée en base pour les articles. WordPress nous permet d’ajouter des informations pour un post via la fonction add_post meta. Je vais donc ajouter mon nombre de mots en base et cela pour chaque article présent sur mon site WordPress. Je fais évoluer mon code dans le hook manage_posts_custom_column. J’ajoute via une nouvelle fonction WordPress mon nombre de mots en base.

add_action('manage_posts_custom_column', function($columns, $post_id){
    switch ($columns) {
      case 'word_count':
        $post_wordcount = str_word_count(
          html_entity_decode(
            strip_tags( strip_shortcodes(
              get_post_field( 'post_content', $post_id ))) ),
          0, "’'àçèéöôâïîêëùû." 
        );
		
		if ( ! add_post_meta( $post_id, '_wordcount', $post_wordcount, true ) ) {
          update_post_meta ( $post_id, '_wordcount', $post_wordcount );
        }
		
        echo $post_wordcount;
        break;
    }
  }, 2, 10);

En ajoutant ce code, on a dans la table wp_postmeta pour chaque article présent dans le site WordPress, l’information nombre de mots. Ce nombre de mot est présent en base via sa clef ou la meta_key suivante _wordcount. Maintenant, il faut indiquer à WordPress, le nouveau tri et l’ajouter dans la requête. Pour faire cette opération on utilise le hook pre_get_posts. Ce hook permet au développeur d’ajouter des paramètres à la query de WordPress. En effet, ce hook se déclenche à la création des variables nécessaires pour la requête mais avant que la requête principale se lance. C’est un hook très puissant. On ajoute dans le fichier functions.php le code suivant :

add_action('pre_get_posts',function($query) {
    
    if(is_admin()) {
      $orderby = $query->get( 'orderby');
      
      if('word_count' == $orderby){
        $query->set('meta_key','_wordcount');
        $query->set('orderby', 'meta_value_num' );
      }
    }
  });

En modifiant un peu le code initial, on a maintenant un tri pertinent sur notre colonne nombre de mots. Avec un peu de code on peut vraiment étendre le core de WordPress afin qu’il corresponde à notre besoin.