Comment ajouter ou modifier les icônes d’administration de WordPress (2 méthodes faciles)

La personnalisation de votre tableau de bord WordPress peut améliorer le compte des utilisateurs/utilisatrices. Un moyen facile d’y parvenir est d’ajouter ou de modifier les icônes d’administration.

Les icônes personnalisées peuvent améliorer votre flux de travail et faciliter la navigation des nouveaux utilisateurs dans la zone d’administration de votre site. De plus, un tableau de bord personnalisé est plus agréable à utiliser.

Dans cet article, nous allons vous afficher comment ajouter ou modifier les icônes d’administration de WordPress. Nous vous guiderons à travers le processus étape par étape. À la fin, votre Tableau de bord WordPress aura un aspect frais et unique.

Que sont les icônes d’administration dans WordPress ?

Les icônes d’administration sont les petites images que vous voyez dans le panneau de navigation de la zone d’administration de WordPress. Elles apparaissent à côté de chaque élément de menu.

Ces images utilisent les Dashicons, une police d’icônes conçue pour WordPress. Elle a été introduite pour la première fois en 2013 et n’a pas été modifiée depuis.

Vous pouvez donner un petit coup de jeune à votre zone d’administration WordPress en modifiant ces icônes. Vous pouvez remplacer les icônes existantes par quelque chose que vous préférez ou même les remplacer par vos propres icônes personnalisées.

Si vous réalisez un site pour des clients qui ne sont pas familiers avec WordPress, l’utilisation d’icônes personnalisées peut les aider à naviguer plus facilement dans le tableau de bord d’administration.

Maintenant, voyons comment vous pouvez facilement modifier les icônes d’administration. Nous allons vous afficher deux façons de le faire, et vous pourrez choisir celle qui vous convient le mieux :

Méthode 1 : Modifier les icônes de l’administration de WordPress à l’aide d’une extension

Pour cette méthode, nous allons utiliser l’extension éditeurs/éditrices Admin Menu Editor. Comme son nom l’indique, il vous permet de personnaliser facilement les menus d’administration de WordPress.

Tout d’abord, vous devez installer et activer l’extension éditeurs/éditrices du menu d’administration. Pour plus de détails, consultez notre tutoriel sur l ‘installation d’une extension WordPress.

Après avoir activé l’extension, accédez à la page Réglages  » Éditeurs/éditrices de menu. Ici, vous verrez votre menu d’administration WordPress au sein d’une interface utilisateur (IU) soignée où vous pourrez le personnaliser.

L’interface utilisateur comporte une barre d’outils en haut, qui vous permet d’ajouter ou de supprimer des éléments de menu, d’ajouter des séparateurs, de copier et de coller des articles, etc.

En dessous, vous pouvez cliquer sur un élément de menu pour le déplier et voir ses réglages. Ici, nous avons déplié l’élément de menu Publications.

Lorsque vous déplier un élément de menu, d’autres options s’affichent. S’il s’agit d’un menu parent, vous verrez également les éléments de menu enfant dans la colonne de droite.

Pour ajouter, remplacer ou supprimer une icône de menu, cliquez sur le lien « Afficher les options avancées » en bas de page.

Cliquez sur le bouton situé à côté du champ « Icône URL ».

Une fenêtre surgissante s’affiche alors, dans laquelle vous pouvez voir tous les Dashicons disponibles. Vous pouvez également cliquer sur le bouton « Bibliothèque » pour téléverser votre propre icône.

Si vous souhaitez téléverser votre propre icône, nous vous recommandons d’utiliser une image 32×32, de préférence au format PNG transparent.

Après avoir choisi votre icône, cliquez sur le bouton « Enregistrer les modifications » pour stocker vos Réglages.

Vous verrez maintenant votre icône de menu personnalisé utilisée dans le menu d’administration.

Méthode 2 : Modifier manuellement les icônes du menu administrateur à l’aide d’un extrait de code

La méthode suivante nécessite l’ajout d’un code personnalisé pour modifier les icônes.

Si vous ne l’avez pas encore fait, nous vous recommandons de jeter un coup d’œil rapide à notre tutoriel sur l’ajout de code personnalisé dans WordPress.

Le moyen le plus simple et le plus sûr d’ajouter du code personnalisé dans WordPress est d’utiliser WPCode. C’est la meilleure extension d’extraits de code de WordPress. Il vous permet d’ajouter en toute sécurité du code personnalisé, CSS et HTML à votre site WordPress sans rien casser accidentellement.

Note : L’extension dispose également d’une version gratuite appelée WPCode Lite, qui fera l’affaire. Cependant, la version pro vous offre des fonctionnalités supplémentaires qui pourraient être utiles.

Exemple 1. Remplacement d’une icône à l’aide des Dashicons par défaut

Pour cet exemple, nous utiliserons les Réglages par défaut pour remplacer une icône du jeu d’icônes existant.

Il est important de noter que WordPress charge déjà les Dashicons, qui sont hautement optimisés pour la performance. Leur utilisation n’aura donc pas d’impact sur la vitesse de chargement des pages.

Cela dit, avant d’exécuter le code, vous devez noter ce qui suit :

1. L’URL de l’élément de menu à modifier
2. Le nom de l’icône que vous souhaitez utiliser

Tout d’abord, vous devez trouver l’URL de la page correspondant à l’élément de menu que vous souhaitez personnaliser. Par exemple, imaginons que vous souhaitiez modifier l’icône du menu « Publications ».

Déplacez votre souris sur le menu Publications, et vous verrez l’URL vers laquelle il renvoie dans la barre d’état de votre navigateur, en bas de la page. Vous n’avez besoin que de la dernière partie de l’URL, qui dans ce cas serait edit.php.

Ensuite, rendez-vous sur le site Dashicons et cliquez sur l’icône que vous souhaitez utiliser.

En cliquant sur une icône, son nom et son slug s’affichent en haut de la page. À ce stade, vous devez copier le slug car vous en aurez besoin à l’étape suivante.

Une fois que vous l’avez fait, allez sur la page  » + Extraits de code  » + Ajouter un extrait et survolez avec votre souris la case  » Ajouter votre code personnalisé (nouvel extrait) « .

Ensuite, il suffit de cliquer sur le bouton  » + Ajouter un extrait personnalisé  » qui apparaît.

Dans l’écran suivant, donnez un titre à votre extrait et sélectionnez PHP Snippet dans l’option Code Type.

Ensuite, vous pouvez copier et coller le code suivant dans la boîte de l’éditeur/éditrices de code :

function change_post_menu_icon() {
    global $menu;
    
    // Loop through the menu items
    foreach ($menu as $key => $menu_item) {
        // Find the "Posts" menu item (default URL is 'edit.php')
        if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {
            // Change the icon to a different Dashicon class
            $menu[$key][6] = 'dashicons-format-aside'; // Change this to your preferred Dashicon slug
        }
    }
}
add_action('admin_menu', 'change_post_menu_icon');

N’oubliez pas de modifier le format dashicons-format-aside pour qu’il corresponde au slug que vous avez copié plus tôt.

Votre code apparaîtra comme suit dans l’éditeur :

Ensuite, vous devez indiquer à WordPress où exécuter ce code.

Les icônes du menu d’administration apparaissent dans la zone d’administration de WordPress. Sur la même page, défilez jusqu’à la section Insertion et sélectionnez « Admin uniquement » sous l’option Emplacement.

Dernier point, passez votre extrait en mode Actif et cliquez sur le bouton « Enregistrer l’extrait » pour enregistrer vos modifications.

WordPress va maintenant commencer à utiliser l’icône que vous avez sélectionné pour la page des publications.

Exemple 2. Utiliser l’Icône Font Awesome pour un élément de menu dans la zone d’administration de WordPress

La bibliothèque Dashicon par défaut ne définit qu’un nombre limité d’icônes. La bonne nouvelle est que vous pouvez utiliser une bibliothèque de polices et d’icônes comme Font Awesome, qui définit un ensemble d’icônes beaucoup plus large.

Cependant, cela signifie que vous devrez charger Font Awesome, ce qui peut ralentir légèrement votre zone d’administration WordPress (uniquement quelques millisecondes).

Avant d’ajouter un quelconque code, vous devez d’abord trouver l’icône que vous souhaitez utiliser. Rendez-vous sur le site de Font Awesome et passez à la Bibliothèque gratuite.

Vous verrez toutes les icônes disponibles gratuitement.

Cliquez sur l’icône que vous souhaitez utiliser, et elle s’ouvrira dans une fenêtre surgissante. À partir de là, vous devez copier la valeur Unicode de l’icône.

Après cela, accédez à la page  » Code Snippets  » + Add Snippet dans votre tableau de bord WordPress.

Cliquez sur le bouton « + Ajouter un extrait personnalisé » dans la boîte « Ajouter votre code personnalisé (nouvel extrait) ».

Dans l’écran suivant, donnez un titre à votre extrait et sélectionnez PHP Snippet comme option de type de code.

Ensuite, vous pouvez copier et coller le code suivant dans la boîte de l’éditeur/éditrices de code :

// Enqueue Font Awesome in the admin area
function enqueue_font_awesome() {
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
}
add_action('admin_enqueue_scripts', 'enqueue_font_awesome');

// Add custom class to the Posts menu item
function add_custom_post_menu_class() {
    global $menu;

    foreach ($menu as $key => $menu_item) {
        if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {
            $menu[$key][4] .= ' custom-post-menu-class';
        }
    }
}
add_action('admin_menu', 'add_custom_post_menu_class');

// Add custom CSS to change the icon to a Font Awesome icon
function custom_admin_menu_icon() {
    echo '<style>
        .custom-post-menu-class .wp-menu-image:before {
            font-family: "Font Awesome 5 Free" !important;
            content: "\f015"; /* Unicode for the Font Awesome icon */
            font-weight: 900; /* Needed for solid icons */
        }
    </style>';
}
add_action('admin_head', 'custom_admin_menu_icon');

N’oubliez pas de remplacer \f015 par la valeur Unicode que vous avez copiée précédemment.

Votre code apparaîtra comme suit dans l’éditeur :

Ensuite, vous devez indiquer à WordPress où exécuter ce code.

Les icônes du menu d’administration apparaissent dans la zone d’administration de WordPress, vous pouvez donc défiler jusqu’à la section Apparence et sélectionner « Admin uniquement » comme option d’Emplacement.

Dernier point, passez votre extrait en mode Actif et cliquez sur le bouton « Enregistrer l’extrait » pour enregistrer vos modifications.

WordPress va maintenant commencer à utiliser l’icône que vous avez sélectionné pour la page des publications.

Bonus : Ajouter des Icônes pour les types de publication personnalisés dans WordPress

Les types de publication personnalisés vous permettent de créer des types de contenu uniques pour votre site WordPress. Il ne s’agit pas de publications ou de pages par défaut, mais de quelque chose de totalement original pour votre site.

Si vous utilisez un type de publication personnalisé sur votre site WordPress, vous souhaiterez peut-être modifier son icône afin de pouvoir l’identifier facilement.

Dans ce cas, consultez notre tutoriel détaillé sur l’objet, qui affiche de multiples façons de modifier ou d’ajouter des icônes pour vos types de publications personnalisés.

Nous espérons que cet article vous a aidé à modifier ou à ajouter des icônes d’administration sur WordPress. Vous pouvez également consulter comment mettre en marque blanche le tableau de bord d’administration de WordPress ou voir ces astuces d’ experts sur la personnalisation de la zone d’administration de WordPress pour de meilleurs flux de travail.

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.