Personnaliser le menu du back-office WordPress

La personnalisation du menu du back-office de WordPress est une étape cruciale pour améliorer l’expérience utilisateur, tant pour les administrateurs que pour les clients. En effet, vos clients n’ont pas besoin d’accéder à tous les réglages de WordPress, il est donc judicieux de penser à eux en simplifiant l’interface. Un menu bien structuré, adapté aux besoins spécifiques, facilite non seulement la navigation, mais optimise également la gestion du site, permettant ainsi un gain de temps précieux et une meilleure efficacité.

Ajouter des éléments au menu

Utilisation du hook admin_menu

Le hook admin_menu est un point d’ancrage dans WordPress qui permet aux développeurs d’ajouter, de modifier ou de supprimer des éléments dans le menu du back-office. Il est déclenché lorsque WordPress génère le menu d’administration, ce qui en fait un emplacement idéal pour personnaliser l’interface selon les besoins spécifiques de vos clients ou de votre projet.

Exemple de code pour ajouter un nouvel élément de menu

Pour ajouter un nouvel élément au menu du back-office, vous allez utiliser la fonction add_menu_page() dans le cadre du hook admin_menu. Voici un exemple de code :

PHP

function ajouter_element_menu() {
	add_menu_page(
    	'Titre de la page',    // Titre de la page
        'Nom du menu',         // Nom du menu dans le back-office
        'manage_options',      // Capacité requise pour voir ce menu
        'slug_de_la_page',     // Slug unique pour identifier cette page
        'afficher_contenu_page', // Fonction callback pour afficher le contenu de la page
        'dashicons-admin-generic', // Icône du menu (optionnel)
        20                      // Position dans le menu (optionnel)
    );
}
add_action('admin_menu', 'ajouter_element_menu');

Explication des paramètres

Titre de la page : Le titre qui apparaîtra dans la balise <title> de l’onglet du navigateur lorsque cette page est ouverte.
Nom du menu : Le texte qui apparaîtra dans le menu du back-office.
Capacité : La capacité requise pour accéder à cet élément de menu. manage_options est généralement utilisé pour les administrateurs.
Slug : Un identifiant unique pour cette page, utilisé dans l’URL (e.g., admin.php?page=slug_de_la_page).
Callback : La fonction qui s’exécute pour afficher le contenu de la page associée.
Icône : Une icône pour le menu, vous pouvez utiliser une des icônes intégrées de WordPress (comme dashicons-admin-generic).
Position : La position de cet élément dans le menu. Les numéros plus bas apparaîtront plus haut dans la liste.

Créer une nouvelle page associée

Une fois que vous avez ajouté un nouvel élément de menu, vous devez créer la page d’administration qui lui est associée.

Comment lier un nouvel élément de menu à une page d’administration personnalisée

La fonction callback que vous avez passée comme argument dans add_menu_page() sera utilisée pour afficher le contenu de la page lorsque l’élément de menu est cliqué. Voici un exemple simple de code pour créer une page d’administration personnalisée.

Exemple de code pour afficher une page simple

PHP

function afficher_contenu_page() {
    ?>
    <div class="wrap">
        <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
        <p>Bienvenue sur votre page d'administration personnalisée !</p>
        <form method="post" action="options.php">
            <?php
                // Les réglages du formulaire de WordPress
                settings_fields( 'groupe_options' );
                do_settings_sections( 'slug_de_la_page' );
                submit_button();
            ?>
        </form>
    </div>
    <?php
}

Explication du code

get_admin_page_title() : Cette fonction récupère le titre de la page que vous avez défini dans add_menu_page().
settings_fields() : Cette fonction est utilisée pour générer les champs cachés nécessaires au formulaire d’options WordPress.
do_settings_sections() : Utilisé pour afficher les sections de paramètres et les champs associés.
submit_button() : Génère un bouton d’envoi.

Cette page d’administration personnalisée est maintenant liée à l’élément de menu que vous avez ajouté. Vous pouvez enrichir cette page avec des formulaires, des sections d’options ou tout autre contenu pertinent pour votre projet.

Modifier des éléments existants

Changement du titre d’un élément de menu

Utilisation de la fonction global $menu

Pour modifier le titre d’un élément de menu existant dans le back-office de WordPress, vous pouvez utiliser la variable globale $menu. Cette variable contient un tableau multidimensionnel qui représente tous les éléments du menu.

Exemple de code pour modifier le titre d’un élément existant

Voici comment changer le titre du menu « Articles » (qui a normalement le titre « Posts » en anglais) :

PHP

function modifier_titre_menu() {
    global $menu;
    
    foreach ( $menu as $key => $value ) {
        if ( $value[2] == 'edit.php' ) { // Vérifier si le slug correspond à 'edit.php' (le slug des "Articles")
            $menu[$key][0] = 'Nouveaux Articles'; // Modifier le titre de cet élément de menu
        }
    }
}
add_action( 'admin_menu', 'modifier_titre_menu' );

Explication :

global $menu : Vous permet d’accéder à la variable globale $menu où sont stockés tous les éléments du menu.
$value[2] : Correspond au slug de l’élément de menu (dans ce cas, 'edit.php' pour les Articles).
$menu[$key][0] : Modifie le titre affiché dans le menu.

Réorganiser l’ordre des éléments

Pour réorganiser l’ordre des éléments du menu, vous pouvez également utiliser la variable globale $menu. L’ordre des éléments est déterminé par la clé du tableau $menu, où les éléments ayant des clés plus petites apparaissent en premier.

Exemple pratique avec un code simple

Par exemple, pour déplacer les « Pages » avant les « Articles », vous pouvez utiliser ce code :

PHP

function reorganiser_menu() {
    global $menu;

    // Stocker l'élément "Pages"
    $pages = $menu[20]; // 20 est l'index par défaut pour "Pages"
    
    // Supprimer "Pages" de sa position actuelle
    unset($menu[20]);

    // Réinsérer "Pages" avant "Articles"
    $menu[5] = $pages; // 5 est l'index par défaut pour "Articles"
}
add_action( 'admin_menu', 'reorganiser_menu' );

Explication :

$menu[20] : Représente l’élément « Pages ».
unset($menu[20]) : Supprime « Pages » de sa position actuelle.
$menu[5] = $pages; : Réinsère « Pages » avant « Articles ».

Modifier l’icône d’un élément

WordPress utilise les Dashicons, une bibliothèque d’icônes, pour les éléments du menu. Vous pouvez modifier l’icône d’un élément existant en accédant à la variable globale $menu et en modifiant l’icône associée.

Exemple de modification d’une icône

Voici comment changer l’icône des « Pages » pour une autre icône Dashicon :

PHP

function modifier_icone_menu() {
    global $menu;

    foreach ( $menu as $key => $value ) {
        if ( $value[2] == 'edit.php?post_type=page' ) { // Slug pour les Pages
            $menu[$key][6] = 'dashicons-welcome-write-blog'; // Changer l'icône
        }
    }
}
add_action( 'admin_menu', 'modifier_icone_menu' );

Explication :

$value[2] : Vérifie que le slug correspond à « Pages ».
$menu[$key][6] : Modifie l’icône de l’élément. Le paramètre 'dashicons-welcome-write-blog' fait référence à une icône de la bibliothèque Dashicons. Vous pouvez remplacer cette valeur par n’importe quel nom d’icône Dashicons disponible.

Supprimer des éléments du menu

Suppression d’un élément avec remove_menu_page

La fonction remove_menu_page() est utilisée pour supprimer un élément du menu principal du back-office de WordPress. Cette fonction prend en argument le slug unique de l’élément de menu que vous souhaitez retirer. C’est une méthode simple et efficace pour nettoyer le menu et ne laisser que les éléments essentiels à vos utilisateurs.

Exemple de suppression d’un élément standard comme « Commentaires » ou « Plugins »

Supposons que vous souhaitiez supprimer l’accès aux « Commentaires » et aux « Plugins » dans le menu du back-office. Voici comment faire :

PHP

function supprimer_elements_menu() {
    remove_menu_page('edit-comments.php'); // Supprime l'élément "Commentaires"
    remove_menu_page('plugins.php');       // Supprime l'élément "Extensions"
}
add_action('admin_menu', 'supprimer_elements_menu');

Explication :

remove_menu_page('edit-comments.php') : Supprime le menu « Commentaires ».
remove_menu_page('plugins.php') : Supprime le menu « Extensions ».

Chaque élément du menu principal a un slug spécifique, et c’est ce slug que vous devez passer en argument à remove_menu_page().

Suppression d’un sous-menu avec remove_submenu_page

Exemple pratique de suppression d’un sous-menu

Si vous souhaitez seulement supprimer un sous-menu spécifique plutôt que tout un élément du menu principal, vous pouvez utiliser la fonction remove_submenu_page(). Cette fonction prend deux arguments : le slug du menu parent et le slug du sous-menu à supprimer.

Supposons que vous souhaitiez supprimer l’accès au sous-menu « Éditeur de thème » sous le menu « Apparence ». Voici comment procéder :

PHP

function supprimer_sousmenu() {
    remove_submenu_page('themes.php', 'theme-editor.php'); // Supprime le sous-menu "Éditeur de thème"
}
add_action('admin_menu', 'supprimer_sousmenu');

Explication :

remove_submenu_page('themes.php', 'theme-editor.php') :
- themes.php : Le slug du menu parent, ici « Apparence ».
- theme-editor.php : Le slug du sous-menu, ici « Éditeur de thème ».

Cette méthode est particulièrement utile pour masquer des fonctionnalités avancées ou inutiles pour certains utilisateurs, tout en conservant l’accès aux autres éléments du menu.

Gérer les permissions d’accès

Comprendre les rôles et capacités de WordPress

Bref rappel des rôles et capacités

WordPress utilise un système de rôles et de capacités pour contrôler ce que chaque utilisateur peut faire sur le site. Voici un aperçu des rôles principaux :

Administrateur : A accès à toutes les fonctionnalités de WordPress.
Éditeur : Gère et publie les contenus des autres utilisateurs.
Auteur : Gère et publie ses propres contenus.
Contributeur : Rédige des articles mais ne peut pas les publier.
Abonné : Peut seulement gérer son profil.

Les capacités (ou « capabilities ») sont des permissions spécifiques qui permettent de contrôler des actions précises. Par exemple, la capacité edit_posts permet de modifier des articles, tandis que manage_options permet d’accéder aux réglages du site.

Comment gérer les accès aux éléments de menu selon le rôle de l’utilisateur

Lorsque vous ajoutez ou modifiez un élément de menu dans le back-office de WordPress, vous pouvez spécifier quelles capacités sont nécessaires pour afficher cet élément. Cela permet de restreindre l’accès à certains éléments du menu en fonction du rôle de l’utilisateur connecté.

Exemple de code pour restreindre l’accès à un élément de menu à certains rôles :

PHP

function ajouter_element_menu_personnalise() {
    add_menu_page(
        'Page Personnalisée',        // Titre de la page
        'Menu Personnalisé',         // Nom du menu
        'manage_options',            // Capacité requise pour accéder à ce menu
        'slug_personnalise',         // Slug unique pour la page
        'afficher_contenu_personnalise', // Fonction callback pour afficher le contenu
        'dashicons-admin-site',      // Icône du menu
        25                           // Position dans le menu
    );
}
add_action('admin_menu', 'ajouter_element_menu_personnalise');

Explication :

manage_options : Ce paramètre spécifie que seuls les utilisateurs avec cette capacité (généralement les administrateurs) pourront voir ce menu.

Exemple pratique

Restreindre l’accès à un menu spécifique pour certains utilisateurs

Imaginons que vous souhaitiez créer un menu spécifique uniquement accessible aux administrateurs, tandis que les autres rôles, comme les éditeurs ou les auteurs, ne pourront pas y accéder. Voici un exemple de code pratique pour gérer cette restriction :

PHP

function ajouter_menu_restreint() {
    if ( current_user_can('manage_options') ) { // Vérifie si l'utilisateur a la capacité 'manage_options'
        add_menu_page(
            'Réglages avancés',       // Titre de la page
            'Réglages avancés',       // Nom du menu
            'manage_options',         // Capacité requise pour accéder à ce menu
            'reglages_avances_slug',  // Slug unique pour la page
            'afficher_page_reglages', // Fonction callback pour afficher le contenu
            'dashicons-admin-tools',  // Icône du menu
            30                        // Position dans le menu
        );
    }
}
add_action('admin_menu', 'ajouter_menu_restreint');

function afficher_page_reglages() {
    ?>
    <div class="wrap">
        <h1>Réglages avancés</h1>
        <p>Cette page est réservée aux administrateurs pour configurer les réglages avancés du site.</p>
    </div>
    <?php
}

Explication :

current_user_can('manage_options') : Cette condition vérifie si l’utilisateur connecté a la capacité manage_options, ce qui est généralement réservé aux administrateurs. Si la condition est vraie, le menu est ajouté.
Fonction afficher_page_reglages : Cette fonction génère le contenu de la page réservée aux administrateurs.

Conclusion

Résumé des points clés

Dans cet article, nous avons exploré plusieurs méthodes pour personnaliser le menu du back-office de WordPress. Voici un récapitulatif des points clés abordés :

Ajout de nouveaux éléments de menu : En utilisant le hook admin_menu et la fonction add_menu_page(), vous pouvez facilement ajouter des éléments de menu personnalisés pour offrir des fonctionnalités supplémentaires à vos utilisateurs.
Modification des éléments existants : Nous avons vu comment changer le titre, réorganiser l’ordre des éléments et modifier les icônes en manipulant la variable globale $menu.
Suppression d’éléments du menu : Avec les fonctions remove_menu_page() et remove_submenu_page(), vous pouvez supprimer des éléments inutiles ou non pertinents pour certains utilisateurs.
Gérer les permissions d’accès : En tirant parti des rôles et des capacités de WordPress, vous pouvez restreindre l’accès à certains éléments du menu en fonction du rôle de l’utilisateur connecté, offrant ainsi une interface plus sécurisée et adaptée.

Encouragement à l’expérimentation

La personnalisation du menu du back-office est une excellente manière de créer une expérience utilisateur sur mesure dans WordPress. Je vous encourage à aller plus loin et à expérimenter avec ces méthodes pour adapter l’interface aux besoins spécifiques de vos projets. N’hésitez pas à explorer d’autres aspects du back-office, tels que la personnalisation des pages d’administration, la création de widgets personnalisés ou l’ajout de scripts et de styles personnalisés.

Personnaliser le menu du back-office de WordPress

Ajouter des éléments au menu

Utilisation du hook admin_menu

Créer une nouvelle page associée

Modifier des éléments existants

Changement du titre d’un élément de menu

Réorganiser l’ordre des éléments

Modifier l’icône d’un élément

Supprimer des éléments du menu

Suppression d’un élément avec remove_menu_page

Suppression d’un sous-menu avec remove_submenu_page

Gérer les permissions d’accès

Comprendre les rôles et capacités de WordPress

Exemple pratique

Conclusion