Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment ajouter des liens de raccourci personnalisés à votre barre d’outils WordPress

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.

How to Add Custom Shortcut Links to WordPress Admin Toolbar

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 :

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.

Visit Custom Admin Interface » Admin Toolbar to Configure the Plugin

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.

A New Item Is Added to the Top of the List

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 ».

Add a Title to the New Custom Menu Item

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.

Add a Link to the New Custom Menu Item

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 ».

Drag and Drop the New Item to the Desired Location

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.

Implement the Menu Item for Everyone

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 ».

Implement the New Menu Item for Everyone Except Subscribers and Contributors

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 ».

Implement the New Menu Item Just for Yourself

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é.

Preview of Custom Shortcut Link Added By Plugin

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é.

Preview of a Single Custom Shortcut Link Added With Code

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.

Click 'Add New Snippet' in WPCode

Ensuite, accédez à l’option « Ajouter votre code personnalisé (nouvel extrait) » et cliquez sur le bouton « Utiliser l’extrait » situé en dessous.

Add custom code in WPCode with new snippet

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.

Paste code snippet into WPCode plugin

Ensuite, permutez le commutateur de « Inactif » à « Actif » et cliquez sur le bouton « Enregistrer l’extrait ».

Activate and save code snippet WPCode

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.

Preview of a Group of Custom Shortcut Links Added With Code

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.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

20 commentairesLaisser une réponse

  1. 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

  2. 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

  3. 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

    • WPBeginner Support

      You’re welcome :)

      Administrateur

  4. 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

  5. Court

    This works great, my question is, how do you add a second parent menu item to this code?

  6. 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 );
    }

  7. Mel

    Thanks!! This helped me out a ton!

  8. 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()

  9. 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.

  10. 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.

  11. adolf witzeling

    I was looking for something like this. Thanks for sharing this awesome tip.

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.