Vous souhaitez personnaliser la barre d’outils d’administration de WordPress ?
La barre d’administration contient des liens pratiques vers certaines des pages d’administration les plus utilisées. Toutefois, vous souhaiterez peut-être ajouter vos propres raccourcis vers les pages que vous utilisez le plus souvent lorsque vous travaillez sur votre site.
Dans cet article, nous allons vous afficher comment ajouter des liens de raccourci personnalisés à la barre d’outils d’administration de WordPress.
Pourquoi ajouter des liens personnalisés à la barre d’outils d’administration de WordPress ?
Chaque fois que vous êtes connecté à votre site WordPress, vous remarquerez une barre d’outils en haut de l’écran. Il s’agit de la barre d’outils d’administration de WordPress ou barre d’administration.
Il existe plusieurs façons de prendre le contrôle de la barre d’administration de WordPress, notamment en l’inactivant lors de la consultation de votre site et en la désactivant pour tous les utilisateurs/administratrices, à l’exception des administrateurs/administratrices.
Par défaut, la barre d’outils définit un ensemble de liens vers des écrans d’administration spécifiques qui se trouvent dans la colonne latérale d’administration. Ces liens vous permettent d’effectuer rapidement des tâches administratives courantes.
Mais chacun a sa propre liste de liens favoris qu’il consulte souvent lorsqu’il rédige des publications ou travaille sur son site. Il peut s’agir de pages de votre zone d’administration ou de liens vers une ressource, un service ou un site externe.
Vous pouvez les ajouter à la barre d’outils de WordPress en tant que liens de raccourci personnalisés. De cette façon, vous et vos utilisateurs/utilisatrices pouvez facilement y accéder à partir de votre site ou de la zone d’administration. Ceci est particulièrement utile si vous gérez un site très fréquenté avec plusieurs auteurs/autrices.
Ceci étant dit, voyons comment ajouter des liens de raccourci personnalisés à la barre d’outils d’administration de WordPress. Nous allons couvrir trois méthodes :
Ajouter des liens de raccourci personnalisés à la barre d’outils à l’aide d’une extension
La première chose à faire est d’installer et d’activer le plugin WP Custom Admin Interface. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.
Lors de l’activation, vous devez vous rendre sur la page Interface d’administration personnalisée » Barre d’outils d’administration pour configurer le plugin. Cette page affiche tout ce qui apparaît sur la barre d’outils et vous permet d’ajouter de nouveaux articles.
Pour ajouter un lien de raccourci personnalisé à la barre d’outils d’administration, vous devez cliquer sur le bouton « + Ajouter un élément de menu » situé en haut de l’écran.
Un nouvel article est ajouté en tête de liste et contient deux champs.
L’une concerne le titre de l’article et l’autre le lien.
Pour ajouter un titre, vous devez cliquer sur l’article du carnet de notes pour placer le champ du titre en mode modification. Vous pouvez alors saisir le titre, puis cliquer sur l’icône de la coche pour le stocker.
Pour ce tutoriel, nous allons taper « Widgets ».
De même, pour ajouter un lien, vous devez cliquer sur l’icône de lien, puis taper le lien. Lorsque vous avez terminé, vous pouvez cliquer sur l’icône de la coche pour enregistrer le lien.
Pour ce tutoriel, nous allons coller le lien vers la page des widgets. Il devrait ressembler à http://example.com/wp-admin/widgets.php.
N’oubliez pas de remplacer « exemple.com » par votre propre nom de domaine.
Confirmez la modification de « exemple.com » par votre propre nom de domaine et n’oubliez pas de cliquer sur l’icône de la coche pour stocker le lien.
Comme le nouvel article se trouve en haut de la liste, il sera ajouté à la partie gauche de la barre d’outils d’administration. Pour le déplacer plus à droite, vous devez déplacer l’article plus bas dans la liste à l’aide de la fonction « glisser-déposer ».
Souhaitez-vous ajouter plus d’un lien de raccourci personnalisé ? Si c’est le cas, il vous suffit de répéter les mêmes étapes pour créer un autre article.
Si vous faites une erreur en personnalisant la barre d’administration, vous pouvez cliquer sur le bouton » Restaurer la barre d’outils WordPress par défaut » en haut pour supprimer toutes vos personnalisations, ou sur le bouton » Restaurer le dernier enregistrement » pour supprimer toutes les modifications effectuées depuis le dernier enregistrement.
Enfin, vous devez défiler jusqu’au bas de la page. Vous pouvez consulter cette page pour déterminer quels rôles du compte peuvent voir le nouvel article, puis enregistrer vos Réglages.
Si vous souhaitez que tous les utilisateurs connectés puissent voir votre nouveau Link, vous devez sélectionner « Tout le monde » dans le menu déroulant afin que le réglage indique « Mettre en œuvre pour tout le monde sauf ». Si vous n’ajoutez pas d’exceptions, tous les utilisateurs/utilisatrices pourront voir l’article.
Toutefois, si vous ne souhaitez pas que les utilisateurs ayant le rôle d’abonné/abonné ou de contributeur/contributrice voient l’article, vous devez sélectionner ces rôles en tant qu’exceptions.
Vous devez d’abord cliquer sur le lien « + Ajouter un cas d’exception ». Un menu déroulant s’affiche alors, dans lequel vous pouvez sélectionner « Rôle : Abonné’. Cliquez ensuite sur l’icône + et ajoutez le « Rôle : Contributeur/contributrices ».
Autre exemple : vous souhaitez que le lien soit visible uniquement par vous-même ou par un seul compte.
Dans ce cas, choisissez les options dans les menus déroulants de manière à ce que le réglage soit le suivant : « Mettre en œuvre cette mesure pour Personne sauf Utilisateur : Nom de la personne ».
Vous avez presque terminé. Si vous préférez ne pas voir le lien personnalisé lors de la vue de votre site, assurez-vous de cliquer sur la case libellée « Désactiver la barre d’outils personnalisée sur l’interface publique ».
Ensuite, une fois que vous avez fini de définir la barre d’outils d’administration, n’oubliez pas de cliquer sur le bouton « Enregistrer tous les réglages ».
Une fois que vous actualisez la page ou que vous cliquez sur une autre page dans la colonne latérale d’administration, vous pourrez voir votre lien de code court personnalisé.
Ajout d’un seul lien de raccourci personnalisé à la barre d’outils à l’aide d’un code
Voici une autre façon d’ajouter un lien de raccourci personnalisé à la barre d’outils de WordPress. Cette méthode est destinée à ceux qui sont à l’aise pour copier des extraits de code dans WordPress.
Vous devez copier et coller le code suivant dans le fichier functions.php de votre thème, dans un plugin spécifique au site ou dans un plugin d’extraits de code.
// add a link to the WP Toolbar
function custom_toolbar_link($wp_admin_bar) {
$args = array(
'id' => 'wpbeginner',
'title' => 'Search WPBeginner',
'href' => 'https://www.google.com:443/cse/publicurl?cx=014650714884974928014:oga60h37xim',
'meta' => array(
'class' => 'wpbeginner',
'title' => 'Search WPBeginner Tutorials'
)
);
$wp_admin_bar->add_node($args);
}
add_action('admin_bar_menu', 'custom_toolbar_link', 999);
Cet exemple de code ajoute un lien vers un moteur de recherche personnalisé de Google qui recherchera des tutoriels WordPress sur WPBeginner. Il utilise la fonction add_node
avec les arguments décrits dans le tableau.
Vous devez remplacer les articles id, title, href et meta par les valeurs de votre propre lien personnalisé.
Nous vous recommandons d’ajouter ce code dans WordPress avec WPCode. C’est la meilleure extension d’extraits de code qui facilite l’ajout de code personnalisé sans modifier le fichier functions.php de votre thème. Ainsi, vous n’avez pas à vous soucier de casser votre site.
Pour Premiers, vous devez installer et activer l’extension gratuite WPCode. Pour des instructions détaillées, consultez ce guide sur l ‘installation d’une extension WordPress.
Une fois l’extension activée, un nouvel élément de menu libellé » Extraits de code » sera ajouté à votre Tableau de bord WordPress. En cliquant dessus, vous afficherez une liste de tous les extraits de code personnalisés que vous avez enregistrés sur votre site. Comme vous venez d’installer l’extension, votre liste sera vide.
Cliquez ensuite sur le bouton « Ajouter une nouvelle » pour ajouter votre premier extrait de code.
Ensuite, accédez à l’option « Ajouter votre code personnalisé (nouvel extrait) » et cliquez sur le bouton « Utiliser l’extrait » situé en dessous.
Sur la page « Créer un extrait personnalisé », vous pouvez commencer par ajouter un titre à votre extrait. Il peut s’agir de n’importe quel titre qui vous aidera à vous souvenir de l’objet de l’extrait.
Ensuite, il suffit de coller le code ci-dessus dans le champ « Prévisualisation du code » et de sélectionner « Extrait PHP » comme type de code dans le menu déroulant.
Ensuite, permutez le commutateur de « Inactif » à « Actif » et cliquez sur le bouton « Enregistrer l’extrait ».
Ajout d’un groupe de liens de raccourci personnalisés à la barre d’outils à l’aide d’un code
La dernière méthode vous a affiché comment ajouter un lien personnalisé à la barre d’outils à l’aide d’un code. Mais qu’en est-il si vous souhaitez créer un menu personnalisé avec une poignée de raccourcis qui vous sont propres ?
Pour ce faire, vous pouvez regrouper plusieurs raccourcis sous un article parent. Les nœuds enfants sous le lien parent apparaîtront lorsqu’un utilisateur/utilisatrice survolera le lien parent avec sa souris.
Voici un exemple de la façon d’ajouter un groupe de liens personnalisés dans la barre d’outils WordPress. Comme pour la méthode précédente, vous devez copier et coller cet extrait de code dans le fichier functions.php de votre thème, dans une extension spécifique à votre site ou dans une extension d’extraits de code comme WPCode.
/*
* add a group of links under a parent link
*/
// Add a parent shortcut link
function custom_toolbar_link($wp_admin_bar) {
$args = array(
'id' => 'wpbeginner',
'title' => 'WPBeginner',
'href' => 'https://www.wpbeginner.com',
'meta' => array(
'class' => 'wpbeginner',
'title' => 'Visit WPBeginner'
)
);
$wp_admin_bar->add_node($args);
// Add the first child link
$args = array(
'id' => 'wpbeginner-guides',
'title' => 'WPBeginner Guides',
'href' => 'https://www.wpbeginner.com/category/beginners-guide/',
'parent' => 'wpbeginner',
'meta' => array(
'class' => 'wpbeginner-guides',
'title' => 'Visit WordPress Beginner Guides'
)
);
$wp_admin_bar->add_node($args);
// Add another child link
$args = array(
'id' => 'wpbeginner-tutorials',
'title' => 'WPBeginner Tutorials',
'href' => 'https://www.wpbeginner.com/category/wp-tutorials/',
'parent' => 'wpbeginner',
'meta' => array(
'class' => 'wpbeginner-tutorials',
'title' => 'Visit WPBeginner Tutorials'
)
);
$wp_admin_bar->add_node($args);
// Add a child link to the child link
$args = array(
'id' => 'wpbeginner-themes',
'title' => 'WPBeginner Themes',
'href' => 'https://www.wpbeginner.com/category/wp-themes/',
'parent' => 'wpbeginner-tutorials',
'meta' => array(
'class' => 'wpbeginner-themes',
'title' => 'Visit WordPress Themes Tutorials on WPBeginner'
)
);
$wp_admin_bar->add_node($args);
}
add_action('admin_bar_menu', 'custom_toolbar_link', 999);
Dans cet exemple de code, nous avons d’abord ajouté un lien de raccourci personnalisé. Nous avons ensuite ajouté un deuxième lien personnalisé et en avons fait un client/cliente du premier lien. Nous avons ajouté l’ID du lien parent en ajoutant l’argument 'parent' => 'wpbeginner'
.
Nous avons répété l’opération pour ajouter un autre lien sous le même parent. Nous avons également utilisé un lien enfant comme lien parent pour vous afficher comment ajouter des sous-éléments à un sous-élément dans votre menu de liens personnalisés.
Nous espérons que ce tutoriel vous a aidé à apprendre comment ajouter des liens de raccourci personnalisés à la barre d’outils d’administration de WordPress. Vous voudrez peut-être aussi apprendre à créer des flux de travail automatisés sur WordPress, ou consulter notre liste des meilleurs plugins et outils de référencement pour développer votre site.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Rick Rottman
Thanks for posting this!
I’ve always wanted a direct link in the admin bar to my Simple CSS screen. Thanks to this tutorial, I have one.
WPBeginner Support
Glad to hear our guide was helpful!
Administrateur
Edward Bonthrone
Hi all..
This is all working great for PC view – but the custom toolbar item icons/menus disappear when viewing on mobile with responsive theme.
I have seen this question asked many times but no examples of code I can insert as a test that works on both PC and mobile view?
Anyone give me a menu snippet that will stay visible on mobile phone?
Thanks
WPBeginner Support
Your CSS would be hiding it for your mobile view, if you would like this to appear on mobile you would need to add the following CSS for our examples.
#wpadminbar li#wp-admin-bar-wpbeginner {
display: block;
}
For your own shortcut links, you would change the -wpbeginner to the ID of your widget, as an example: -yourid
Administrateur
dan
Why this code is not work for mobile view?
WPBeginner Support
You may want to try disabling your other plugins to ensure there isn’t a plugin that is overriding the default bar on mobile.
Administrateur
Tayyab Roy
Thanks.
WPBeginner Support
You’re welcome
Administrateur
Mohammad Kashif
Hi
How can i add tool bar user menu in theme navigation?
And why i don’t receive email notification when i got reply? While i select (Replies to my comments).
Thanks
WPBeginner Support
Hi Kashif,
We are not sure which toolbar user menu you want to add. Please see our guide on how to add navigation menus in WordPress may be that would help.
Administrateur
Court
This works great, my question is, how do you add a second parent menu item to this code?
Small Details
I don’t know if this is recommended but I was looking for a ‘new window’ solution (see Yassin’s comment). It didn’t work by itself but works fine when combined with ‘meta’:
add_action( ‘admin_bar_menu’, ‘toolbar_link_to_mypage’, 999 );
function toolbar_link_to_mypage( $wp_admin_bar ) {
$args = array(
‘id’ => ‘my_page’,
‘title’ => ‘PRODUCT MANAGEMENT’,
‘href’ => ‘http://www.mexample.com’,
‘meta’ => array( ‘class’ => ‘my-toolbar-page’, ‘target’ => ‘_blank’ )
);
$wp_admin_bar->add_node( $args );
}
Mel
Thanks!! This helped me out a ton!
Frederic
Thanks! Very useful!
Yassin
Great tip
How can we make these custom links open in new tab ?
I try to add ‘target’ => ‘_blank’ but didn’t work
Henry E.
To add a ‘target’ => ‘_blank’ you have to add it to the ‘meta’ => array()
Gary Cook
This is awesome. Thanks. Although, I have added several custom menus and I want to center them all in a group using CSS, if possible? Please.
Marc
Is it possible to add a icon?
Rosendo Cuyasen
Cool! I think this is a cool feature for Wordpress if you’re going to use this toolbar above your web pages. Thanks for sharing.
adolf witzeling
I was looking for something like this. Thanks for sharing this awesome tip.