La personnalisation de votre tableau de bord WordPress peut améliorer l'expérience utilisateur. Un moyen simple de procéder consiste à ajouter ou à modifier les icônes d’administrateur.
Les icônes personnalisées peuvent améliorer votre flux de travail et permettre aux nouveaux utilisateurs de naviguer plus facilement 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 montrer comment ajouter ou modifier les icônes d’administration WordPress. Nous vous guiderons étape par étape tout au long du processus. À la fin, votre tableau de bord WordPress aura l’air 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. Ils apparaissent à côté de chaque élément de menu.
Ces images utilisent Dashicons, une police d'icônes conçue pour WordPress. Il a été introduit pour la première fois en 2013 et n’a pas changé depuis.
Vous souhaiterez peut-être donner une légère cure de jouvence à 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 créez un site Web 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.
Voyons maintenant comment modifier facilement les icônes d’administration. Nous allons vous montrer deux façons de procéder, et vous pourrez choisir celle qui vous convient le mieux :
Méthode 1 : modifier les icônes d'administration dans l'administrateur WordPress à l'aide d'un plugin
Pour cette méthode, nous utiliserons le Éditeur de menu d'administration plugin. 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 le Éditeur de menu d'administration plugin. Pour plus de détails, consultez notre tutoriel sur la façon d'installer un plugin WordPress.
Après avoir activé le plugin, allez dans le Paramètres »Éditeur de menu page. Ici, vous verrez votre menu d’administration WordPress dans une interface utilisateur (UI) 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 coller des éléments, etc.
En dessous, vous pouvez cliquer sur un élément de menu pour développer et afficher ses paramètres. Ici, nous avons développé l'élément de menu Messages.
Lorsque vous développez un élément de menu, vous verrez plus d'options. S'il s'agit d'un menu parent, vous verrez également tous les éléments du 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.
Maintenant, cliquez sur le bouton à côté du champ « URL de l'icône ».
Cela révélera une fenêtre contextuelle où vous pourrez voir tous les Dashicons disponibles. Alternativement, vous pouvez cliquer sur le bouton « Médiathèque » pour télécharger votre propre icône d'image.
Si vous souhaitez télécharger votre propre icône d'image, 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 enregistrer vos paramètres.
Vous verrez maintenant votre icône de menu personnalisé utilisée dans le menu administrateur.
Cette méthode suivante nécessite que vous ajoutiez du code personnalisé pour modifier les icônes.
Si vous ne l'avez jamais fait auparavant, 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 consiste à utiliser Code WP. C’est le meilleur plugin d’extraits de code WordPress. Il vous permet d’ajouter en toute sécurité du code personnalisé, du CSS et du HTML à votre site WordPress sans rien casser accidentellement.
Note: Le plugin dispose également d'une version gratuite appelée WPCode Litece qui fera le travail. Cependant, la version pro vous offre des fonctionnalités supplémentaires qui peuvent être utiles.
Exemple 1. Remplacement d'une icône à l'aide des tirets par défaut
Pour cet exemple, nous utiliserons les Dashicons par défaut pour remplacer une icône du jeu d'icônes existant.
Il est important de noter que WordPress charge déjà des Dashicons, qui sont hautement optimisés pour les performances. Ainsi, leur utilisation n’aura pas d’impact sur la vitesse de chargement des pages.
Cela dit, avant d'exécuter le code, vous devez noter les éléments suivants :
- L'URL de l'élément de menu que vous souhaitez modifier
- 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, disons que vous souhaitez modifier l'icône du menu « Messages ».
Déplacez votre souris sur le menu Publications et vous verrez l'URL vers laquelle elle renvoie dans la barre d'état de votre navigateur en bas de la page. Vous avez juste besoin de la dernière partie de l’URL, qui dans ce cas serait edit.php.
Ensuite, allez au Site Web des Dashicons et cliquez sur l'icône que vous souhaitez utiliser.
Cliquer sur n’importe quelle icône affichera son nom et son slug en haut. À ce stade, vous devez copier le slug car vous en aurez besoin à l'étape suivante.
Une fois que vous avez fait cela, allez dans Extraits de code »+ Ajouter un extrait et passez votre souris sur la case « Ajouter votre code personnalisé (nouvel extrait) ».
Ensuite, cliquez simplement sur le bouton « + Ajouter un extrait personnalisé » qui apparaît.
Sur l'écran suivant, fournissez un titre pour votre extrait et sélectionnez Extrait PHP sous l'option Type de code.
Après cela, vous pouvez copier et coller le code suivant dans la zone de l'éditeur 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 changer le dashicons-format-aside au slug que vous avez copié plus tôt.
Votre code apparaîtra ainsi 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, faites défiler jusqu'à la section Insertion et sélectionnez « Administrateur uniquement » sous l'option Emplacement.
Enfin, passez votre extrait de code sur 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ée pour la page Publications.
Exemple 2. Utilisez l'icône Font Awesome pour un élément de menu dans la zone d'administration WordPress
La bibliothèque Dashicon par défaut possède un ensemble 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 possède 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 (seulement quelques millisecondes).
Avant d'ajouter du code, vous devez d'abord trouver l'icône que vous souhaitez utiliser. Accédez au site Web 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 contextuelle. À partir de là, vous devez copier la valeur Unicode de l'icône.
Après cela, allez au Extraits de code »+ Ajouter un extrait page dans votre tableau de bord WordPress.
Allez-y et cliquez sur le bouton « + Ajouter un extrait personnalisé » dans la zone « Ajouter votre code personnalisé (nouvel extrait) ».
Sur l'écran suivant, fournissez un titre pour votre extrait et sélectionnez PHP Snippet comme option Type de code.
Après cela, vous pouvez copier et coller le code suivant dans la zone de l'éditeur 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 '';
}
add_action('admin_head', 'custom_admin_menu_icon');
N'oubliez pas de remplacer \f015 avec la valeur Unicode que vous avez copiée précédemment.
Votre code apparaîtra ainsi 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 faire défiler jusqu'à la section Insertion et sélectionner « Administrateur uniquement » comme option d'emplacement.
Enfin, passez votre extrait de code sur 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ée pour la page Publications.
Bonus : ajoutez 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 Web WordPress. Ce ne sont pas des articles ou des pages par défaut mais quelque chose de totalement original pour votre site.
Si vous utilisez un type de publication personnalisé sur votre site Web WordPress, vous souhaiterez peut-être modifier son icône afin de pouvoir l'identifier facilement.
Dans ce cas, consultez notre didacticiel détaillé sur le sujet, qui montre plusieurs façons de modifier ou d'ajouter des icônes pour vos types de publication personnalisés.
Nous espérons que cet article vous a aidé à modifier ou à ajouter des icônes d’administration dans WordPress. Vous pouvez également découvrir comment créer une marque blanche sur le tableau de bord d’administration WordPress ou consulter ces conseils d’experts sur la personnalisation de la zone d’administration WordPress pour de meilleurs flux de travail.
Si vous avez aimé cet article, alors abonnez-vous à notre Chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Gazouillement et Facebook.
