Créateur de thèmes WordPress :: Formateur :: Web Designer

WordPress :: Masquer les sous-menus de votre back-office

Publié le : 

Modifié le : 

Par : 

Dans ce tutoriel, nous verrons comment masquer des éléments de votre sous-menu, dans le back-office de WordPress.

Masquer un élément du menu

D’abord, je vais me concentrer sur la barre latérale de l’administration WordPress. Les éléments de premier niveau ont souvent des classes ou des identifiants. J’aurais donc pu me débrouiller avec une feuille de style qui s’applique au back-office. Par contre, pour les sous-menus, ça se complique; les classes dédiées sont inexistantes. Heureusement, une fonction dédiée WordPress existe: remove submenu page.

Il s’agit alors de récupérer l’URL principale du menu parent et celle du son sous-menu. Par exemple, pour enlever le menu Widgets, cliquez sur le menu Apparence et vous obtiendrez le premier sous-menu Thèmes. Dans l’url vous aurez: votresite.com/wp-admin/theme.php. Nous aurons besoin du nom du fichier appelé theme.php.

Au final, pour enlever Widgets, on clique sur le menu et de la même manière on obtient l’adresse votresite.com/wp-admin/widgets.php. Ici le fichier appelé est widget.php. Pour retirer ce lien, on utilise la fonction WordPress remove_submenu_page et cela donne:

<?php
// Retirer le menu Widgets
// A mettre dans votre fichier functions.php
// sans les balises PHP
add_action( 'admin_menu', 'adjust_the_wp_menu', 999 );
function adjust_the_wp_menu() {
    remove_submenu_page( 'themes.php', 'widgets.php' );
}

Voici un autre exemple avec un conditionnel qui s’appliquera sur les rôles spécifique avec la fonction current user can. Pour les utilsateurs autre que les administrateurs, on va supprimer le sous-menu Ajouter que l’on retrouve dans le menu Média.

<?php
// Retirer le menu Média pour les non admins
// A mettre dans votre fichier functions.php
// sans les balises PHP
add_action( 'admin_menu', 'gn_remove_submenus' );
function gn_remove_submenus() {
	if ( !current_user_can('manage_options' ) ) {
	    remove_submenu_page( 'upload.php', 'media-new.php' );
	}
}

Masquer le bouton ajouter

Parfois supprimer une page du menu ne suffit pas. Vous aurez besoin de masquer des élément de l’interface d’administration à l’aide une fonction ou de CSS. Ainsi mon deuxième exemple, en plus de masquer la page Ajouter, j’ai besoin de masquer les boutons Ajouter qui lancent la même action. Pour ce point, je vais passer par des CSS appliqués aux back-office.

Je place dans mon fichier functions.php de mon thème le code suivant en veillant à ne pas mettre les balises PHP.

<?php 
// Retirer bouton ajouté sur page média
// A placer dans votre fichier functions.php
// sans les balises PHP
function gn_css_admin_page_media() { 
	if ( !current_user_can('manage_options' ) ) { 
?>
	    <style type="text/css">
	        .upload-php #wpbody-content .add-new-h2 { display: none;}   
	    </style>
<?php
	} 
}
add_action('admin_head','gn_css_admin_page_media');
?>

Voici le détail du hook.

  • lancer une action sur la zone <head> du back-office pour intégrer mes css avec add_action
  • déclarer la fonction gn_css_admin_page_media pour afficher les CSS dans la page
  • ajout d’un conditionnel avec current_user_can pour l’appliquer autres rôles que l’administrateur.
  • choix de la bonne règle descendante pour masquer l’élément

Attention à bien ajouter la classe du body de la page d’administration concernée. Ici c’est upload.php. Cela évite que les CSS s’appliquent à d’autres pages d’admin. Pour être sûr, inspecter votre page avec Chrome. Et dans notre cas, ces CSS de l’admin vont se charger sur toutes les pages de l’administration. Du coup, c’est sans doute mieux d’avoir une seule feuille de style CSS centralisée pour toute la partie admin.

Résultat final

Dans cette capture, je compare le même menu avec deux rôles différents: l’administrateur et le rôle avec qui j’active le masquage. Pour tester facilement selon les rôles, vous pouvez utiliser le plugin Test User Role.

capture: Masquer le menu du back-office WordPress

Liens