Personnaliser l’apparence du tableau de bord WordPress

Bien qu’il existe de nombreux plugins pour cela, je pars du principe qu’il est souvent préférable de faire ces modifications soi-même, avec quelques lignes de code, plutôt que de charger un énième plugin.

Personnaliser les CSS 

Vous pouvez décider de modifier l’apparence de votre back-office (interface d’administration), en modifiant les feuilles de style (CSS) qui s’y appliquent. 

1. Ajoutez une feuille de style avec votre style à votre thème enfant appelé admin-style.css.
2. Créez une fonction dans functions.php pour ajouter wp_enqueue_style pour admin-style.css.
3. Utilisez add_action pour connecter la fonction au hook admin_enqueue_scripts.

Si vous êtes pressé, voilà le code :

add_action( 'admin_enqueue_scripts', 'my_admin_style');

function my_admin_style() {
  wp_enqueue_style( 'admin-style', get_stylesheet_directory_uri() . '/admin-style.css' );
}

Explications : 
Notez que selon que vous utilisiez, ou non, un thème enfant (child theme), le code varie 
Pour le thème enfant : 

function my_admin_style() { //dans le cas d'un thème enfant
  wp_enqueue_style( 'admin-style', get_stylesheet_directory_uri() . '/admin-style.css' );
}

Si vous développez votre propre thème, la syntaxe est légèrement différente  : 

function my_admin_style() { 
  wp_enqueue_style( 'admin-style', get_template_directory_uri() . '/admin-style.css' );  
}

Evidemment, il faudra créer le fichier sous le thème en question, et s’il porte un nom différent, mettre à jour le code en conséquence.  

Cacher les metaboxes

Souvent les extensions rajoutent de nombreuses metaboxes, qui polluent inutilement votre interface, à commencer par page d’accueil de votre administration. 
Il convient de proposer une interface tout au contraire épurée, afin que l’utilisateur puisse se concentrer sur l’essentiel. 

Dans tous mes projets, j’installe donc un plugin, l’une de ses fonctions est justement de supprimer l’affichage de ces metaboxes indésirables : 

function remove_useless_widgets() {	
    remove_meta_box( 'wpforms_reports_widget_lite', 'dashboard', 'normal');
    remove_meta_box( 'e-dashboard-overview', 'dashboard', 'normal');
    remove_meta_box( 'owp_dashboard_news', 'dashboard', 'normal');
    remove_meta_box('dashboard_primary', 'dashboard', 'side');   // WordPress blog
    remove_meta_box('dashboard_secondary', 'dashboard', 'side');
    remove_meta_box( 'updraft-dashnotice', 'dashboard', 'normal'); //UpdraftPlus
    remove_meta_box( 'quadlayers-dashboard-overview', 'dashboard', 'normal'); //
    remove_meta_box( 'yith_dashboard_products_news', 'dashboard', 'normal'); //
    remove_meta_box( 'yith_dashboard_blog_news', 'dashboard', 'normal'); //
    //remove_meta_box('wpseo-dashboard-overview', 'dashboard', 'normal');//Yoast
    //remove_meta_box('tinypng_dashboard_widget', 'dashboard', 'normal'); //tinypng
    //remove_meta_box('wp_mail_smtp_reports_widget_lite', 'dashboard', 'normal'); //wp_mail (also see remove useless admin menus)	
}	
add_action('wp_dashboard_setup', 'remove_useless_widgets', 40);

Ici on fait donc appel à l’API WordPress, en utilisant la fonction remove_meta_box. On passe en premier paramètre l’identifiant de cette metabox. Pour le connaître, il suffit d’utiliser l’inspecteur (Firefox ou Chrome Dev Tools), accessible en faisant clic-droit>inspecter (ou F12) .
Dans la copie d’écran ci-après, on voit « dashboard_primary ». 

Ajouter sa propre meta-box

Il peut-être pratique de rajouter une metabox proposant un ensemble de liens vers les fonctionnalités les plus utilisées de l’administration du site web

Voici le code du plugin associé, comme le code précédent, il repose sur l’appel du hook « wp_dashboard_setup ». 

function handylinks_add_dashboard_widgets() {
    // Only Admins and Editors Should See this.
        if ( ( current_user_can( 'activate_plugins' ) ) || current_user_can('delete_pages') ){
 	wp_add_dashboard_widget( 'handy_dashboard_widget', 'Handy Links', 'handy_dashboard_widget_function' );
    } // end of Admin check.

 	// Globalize the metaboxes array, this holds all the widgets for wp-admin 
 	global $wp_meta_boxes;
 	
 	// Get the regular dashboard widgets array 
 	// (which has our new widget already but at the end)
  	$normal_dashboard = $wp_meta_boxes['dashboard']['normal']['core']; 	

 	// Backup and delete our new dashboard widget from the end of the array 
 	$csf_widget_backup = array( 'handy_dashboard_widget' => $normal_dashboard['handy_dashboard_widget'] );
 	unset( $normal_dashboard['handy_dashboard_widget'] );
 
 	// Merge the two arrays together so our widget is at the beginning 
 	$sorted_dashboard = array_merge( $csf_widget_backup, $normal_dashboard );
 
 	// Save the sorted array back into the original metaboxes  
 	$wp_meta_boxes['dashboard']['normal']['core'] = $sorted_dashboard;
} 
add_action( 'wp_dashboard_setup', 'handylinks_add_dashboard_widgets' );



/* 
Now, let's build the widget. You can add or remove links as you wish.
Each link uses a Dashicon, which you can find at https://developer.wordpress.org/resource/dashicons/
*/
function handy_dashboard_widget_function() {
    
    echo '<h2>Handy Links</h2>';
    echo '<ul class="handy-widget">';    
    echo '<li><span class="dashicons dashicons-admin-site"></span> <a href="' . esc_url( home_url() ).'" target="_blank">Visit the Website</a></li>'; // The front end of the website.    
    echo '<li><span class="dashicons dashicons-admin-page"></span> <a href="' . esc_url( admin_url() ).'edit.php?post_type=page">Site Pages</a></li>'; // Pages.    
    echo '<li><span class="dashicons dashicons-admin-post"></span> <a href="' . esc_url( admin_url() ).'edit.php">Blog Posts</a></li>'; // Posts.    
    echo '</ul>';

    
} // end of function

 

Supprimer un lien de menu dans la barre supérieure d’admin

Il peut arriver que des plugins rajoutent des menus dans la barre noire supérieure. Certains de ces menus occupent de la place, sans qu’ils soient réellement utilisés. Il peut donc être bienvenu de les supprimer : 

function remove_from_admin_bar($wp_admin_bar) {
    if ( ! is_admin() ) {  
       /*place here item menu to be removed on front-end only */  
    } 
       
    // Example of removing item generated by plugin. Full ID is #wp-admin-bar-show_hooks
    $wp_admin_bar->remove_node('wp-admin-bar-wpforms-menu');
        $wp_admin_bar->remove_node('ocean-menu'); 
        $wp_admin_bar->remove_node('comments'); 
}

add_action('admin_bar_menu', 'remove_from_admin_bar', 998);

Voilà quelques exemples de personnalisations du backoffice de WordPress, on peut bien sûr décider de rajouter des menu supplémentaires, par exemple vers la documentation du site qui est tenue à jour dans un fichier Google Docs qui serait partagé en lecture seule pour les utilisateurs : 



Cela fera peut-être l’occasion d’un article séparé, car c’est moins simple que prévu que de rajouter des liens externes dans la navigation de l’administration. 

J’espère que cet article vous aura permis de voir que comme toujours, WordPress est extrêmement modulable, et qu’il est possible de personnaliser non seulement l’apparence de votre site, mais aussi son administration, et qu’il n’est pas nécessaire de passer par un plugin pour cela. 

---