Personnalisation du menu d’administration

Le menu d’administration de WordPress peut être complètement personnalisé, en ajoutant ou supprimant des pages, des séparateurs, en le réordonnant…

Dans cet article je montre comment regrouper les menus par thème, dans cet ordre :

Le tableau de bord
Les types de contenus (pages, articles, produits…)
La gestion des comptes utilisateurs WordPress
WooCommerce
Les réglages et outils WordPress
Enfin tout le reste…

En image, avant :

Sukellos WordPress Personnalisation Menu Administration

Après :

Ajout d’un séparateur

Le hook qui permet de modifier le menu est admin_menu. Cette action est appelée juste avant le chargement du menu d’administration WordPress. C’est donc l’endroit idéal pour manipuler le menu afin d’y ajouter le séparateur.

Le menu peut être modifié en utilisant la variable global $menu.

Voici ce que donne l’affichage de cette variable en utilisant ce code :

Copier

Pour y ajouter un séparateur, il suffit d’ajouter un élément à ce tableau :

Copier

Je ne me soucie guère pour le moment de l’emplacement du séparateur dans le menu, puisque je vais l’ordonner par la suite.

Réorganisation du menu d’administration

Afin de réorganiser un menu d’administration WordPress, il faut considérer deux hooks de type filter :

custom_menu_order pour autoriser la réorganisation
menu_order pour la réorganisation proprement dite

L’inscription des hooks :

Copier

La priorité de menu_order est fixé à 20 afin de passer après WooCommerce. En effet, il applique lui-même une réorganisation lors de la priorité 10. Sans cela, la modification de sa section serait reprise par ce dernier.

Le code de custom_menu_order est simplement un retour true pour activer la possibilité de réorganisation.

Copier

Le filtre menu_order possède un paramètre qui est l’ordre du menu. Son contenu dans mon cas :

Copier

Je recrée donc un nouveau tableau avec l’ordre des éléments qui me convient. Enfin, par souci de compatibilité par la suite, j’insère à la fin de ce tableau des éléments que j’aurais oublié ou qui serait apparu dans l’avenir :

Copier

/**
 * Filters the order of administration menu items.
 * @param $menu_order Whether custom ordering is enabled. Default false.
 */
 public function filter_menu_order( $menu_order ) {

$new_menu_order = array(
         'index.php',
         'separator1',
         'edit.php?post_type=page',
         'edit.php',
         'edit-comments.php',
         'upload.php',
         'edit.php?post_type=product',
         'separator-user',
         'users.php',
         'separator-woocommerce',
         'woocommerce',
         'wc-admin&path=/analytics/overview',
         'woocommerce-marketing',
         'separator2',
         'themes.php',
         'plugins.php',
         'tools.php',
         'options-general.php',
         'separator-last',
         'wpgb',
         'mailpoet-homepage',
         'wp_sukellos_fw_dashboard',
     );

foreach ( $menu_order as $menu ) {

if ( !in_array( $menu, $new_menu_order ) ) {

$new_menu_order[] = $menu;
         }
     }

return $new_menu_order;
}

Application d’une feuille de style CSS

Pour finir, il apparaît intéressant de personnaliser le style d’affichage de ce menu. En effet, les séparateurs sont quasiment invisibles.

Afin d’ajouter une feuille de style dans mon thème enfant, j’y place un nouveau fichier admin.css. J’utilise ensuite le hook admin_enqueue_scripts afin de l’enregistrer.

Copier

A noter l’utilisation de la fonction get_theme_file_uri qui permet de récupérer le chemin vers le répertoire du thème enfant.

Dans le CSS, je me contente de rendre visible les séparateurs, en les coloriant et en augmentant un peu les marges d’affichage comme suit :

Copier

Le code intégral

Copier

class Sukellos_Admin_Menu_Manager {

/**
     * Constructor
     */
    public function __construct() {

// To change admin menu CSS style
        add_action('admin_enqueue_scripts', array( $this, 'action_admin_enqueue_scripts' ), 10 );

// Hooks in following order : admin_menu, custom_menu_order, menu_order

// Fires before the administration menu loads in the admin.
        add_filter( 'admin_menu', array( $this, 'action_admin_menu' ), 10, 1 );

// Filters whether to enable custom ordering of the administration menu.
        add_filter( 'custom_menu_order', array( $this, 'filter_custom_menu_order' ), 10, 1 );

// Filters the order of administration menu items.
        add_filter( 'menu_order', array( $this, 'filter_menu_order' ), 20, 1 );
    }

/***
     * Adding CSS into header
     * Default add assets/admin.css
     */
    public function action_admin_enqueue_scripts() {

// CSS
        wp_enqueue_style('sukellos_theme_admin_css', get_theme_file_uri('admin.css'), array(), '1.0', 'all');
    }

/**
     * Fires before the administration menu loads in the admin.
     * @param $context Empty context.
     */
     public function action_admin_menu( $context ) {

global $menu;

// Adding a user separator
         $menu[] = array(
             0   =>  '',
             1   =>  'read',
             2   =>  'separator-user',
             3   =>  '',
             4   =>  'wp-menu-separator'
         );
    }

/**
     * Filters whether to enable custom ordering of the administration menu.
     * @param $custom An ordered array of menu items.
     */
     public function filter_custom_menu_order( $custom ) {

return true;
    }

/**
     * Filters the order of administration menu items.
     * @param $menu_order Whether custom ordering is enabled. Default false.
     */
     public function filter_menu_order( $menu_order ) {

$new_menu_order = array(
             'index.php',
             'separator1',
             'edit.php?post_type=page',
             'edit.php',
             'edit-comments.php',
             'upload.php',
             'edit.php?post_type=product',
             'separator-user',
             'users.php',
             'separator-woocommerce',
             'woocommerce',
             'wc-admin&path=/analytics/overview',
             'woocommerce-marketing',
             'separator2',
             'themes.php',
             'plugins.php',
             'tools.php',
             'options-general.php',
             'separator-last',
             'wpgb',
             'mailpoet-homepage',
             'wp_sukellos_fw_dashboard',
         );

foreach ( $menu_order as $menu ) {

if ( !in_array( $menu, $new_menu_order ) ) {

$new_menu_order[] = $menu;
             }
         }

return $new_menu_order;
    }
}
new Sukellos_Admin_Menu_Manager();

L’ordre d’appel des hooks permet évidemment cette exécution : admin_menu, custom_menu_order, menu_order

Quelques liens pour approfondir

Besoin d’une assistance technique par un expert WordPress ?
Optez pour un crédit temps de quelques heures

Contactez-moi

Personnaliser le menu d’administration WordPress

Personnalisation du menu d’administration

Ajout d’un séparateur

Réorganisation du menu d’administration

Application d’une feuille de style CSS

Le code intégral

Quelques liens pour approfondir

Laisser un commentaire Annuler la réponse