Vous savez qu'il existe de nombreuses façons d' améliorer l'expérience utilisateur d'un site web , etl'une d'elles consiste à ajouter ou modifier les icônes d'administration WordPress. Personnaliser votre tableau de bord WordPress ne se limite pas à l'esthétique : il s'agit de rendre votre site plus facile et plus agréable à utiliser ! Pour commencer rapidement, vous pouvez ajouter ou modifier vos icônes d'administration.
Des icônes personnalisées peuvent simplifier votre flux de travail et rendre la navigation très intuitive, surtout pour les nouveaux utilisateurs. De plus, un tableau de bord personnalisé est tout simplement plus convivial et agréable à utiliser !
Aujourd'hui, nous allons explorer le fonctionnement des icônes d'administration WordPress, vous montrer comment en ajouter facilement grâce à une extension et découvrir comment utiliser une police d'icônes WordPress. Prêt à améliorer l'expérience utilisateur de votre site ? Alors, c'est parti !
Comprendre les icônes d'administration WordPress
Les icônes d'administration WordPress sont ces petites images qui apparaissent à côté de chaque élément de menu dans le tableau de bord WordPress. Elles contribuent à rendre le panneau de navigation plus intuitif et visuellement organisé. Par défaut, WordPress utilise Dashicons , une police d'icônes qui existe depuis 2013 et qui a peu évolué depuis.
Si vous souhaitez moderniser l'interface d'administration de votre WordPress, changer ces icônes est un excellent point de départ ! Vous pouvez remplacer les icônes par défaut par d'autres qui correspondent mieux à votre style, ou même ajouter vos propres icônes personnalisées pour un rendu vraiment unique.
Les icônes sont un outil puissant car elles sont universellement reconnaissables et permettent aux utilisateurs de trouver facilement ce dont ils ont besoin, qu'il s'agisse d'une page de connexion, d'un article particulier ou d'autres sections importantes du site. Cela peut s'avérer particulièrement utile pour un site multilingue ou destiné à un public international.
Pour les clients en conception web qui ne connaissent pas WordPress, les icônes personnalisées peuvent simplifier la navigation dans le tableau de bord d'administration et leur offrir une expérience adaptée à leurs besoins.
Apprenez comment résoudre le problème d'affichage des icônes Elementor.
Les icônes d'administration WordPress sont des éléments de conception web essentiels pour votre site web
Contactez nos concepteurs web pour ajouter ou modifier facilement les icônes d'administration WordPress et améliorer l'expérience utilisateur de votre site web.
Comment ajouter ou modifier les icônes d'administration WordPress : deux méthodes
Maintenant que vous connaissez la fonction des icônes d'administration WordPress, il est temps de comprendre comment les ajouter ou les modifier. Il existe deux méthodes simples pour les personnaliser. La première consiste à utiliser une extension (plugin) pour une modification rapide et facile. La seconde consiste à modifier les icônes d'administration à l'aide d'un extrait de code.
Nous allons examiner les deux méthodes pour vous aider à choisir celle qui vous convient le mieux. Entrons dans le vif du sujet :
Comment ajouter ou modifier les icônes d'administration WordPress à l'aide d'un plugin
Si vous débutez avec l'ajout d'icônes dans WordPress, l'utilisation d'une extension est la solution la plus simple. Ce guide vous montrera comment ajouter des icônes à l'aide de l' Font Awesome .
Pour intégrer des icônes à votre site WordPress avec Font Awesome, suivez ces étapes simples :
Installez et activez le plugin.
Commencez par vous connecter à votre tableau de bord WordPress, puis allez dans Extensions et installez et activez l'extension Font Awesome.
Ajustez les paramètres du plugin selon vos besoins.
Après l'activation, vous serez redirigé vers la des extensions installées . Trouvez Font Awesome et cliquez sur « Paramètres ». L'extension est configurée par défaut pour utiliser des icônes web gratuites via le CDN . Si cela vous convient, tout est prêt.
Savoir : Comment supprimer les utilisateurs administrateurs WordPress invisibles ?
Si vous souhaitez utiliser les icônes gratuites et payantes, vous devrez créer un kit Font Awesome, obtenir un jeton API et l'ajouter aux paramètres du plugin. (Si vous recherchez uniquement des icônes basiques, vous pouvez ignorer cette étape !) Une fois terminé, n'oubliez pas de cliquer sur « Enregistrer les modifications ».
Ajoutez l'icône à l'endroit où vous souhaitez qu'elle apparaisse.
Passons maintenant à la partie amusante ! Vous pouvez ajouter des icônes Font Awesome à l’aide d’un shortcode ou d’un HTML . Le format du shortcode est : [icon name="valeur"]. Remplacez simplement « valeur » par le nom de l’icône souhaitée. Par exemple, pour ajouter une icône de récompense, utilisez : [icon name="récompense"].
Si vous êtes plus à l'aise avec le HTML, vous pouvez utiliser la syntaxe standard de Font Awesome. Font Awesome fournit des extraits de code HTML pour chaque icône ; il vous suffit donc de les copier-coller à l'endroit où vous souhaitez que l'icône apparaisse.
Prévisualisez vos modifications.
Avant de publier, prévisualisez l'article ou la page pour vérifier que votre icône s'affiche correctement. Si elle n'apparaît pas, assurez-vous d'utiliser une icône gratuite et non une icône payante.
À savoir également : Comment modifier et personnaliser facilement les en-têtes dans WordPress ?
Méthode 2 : Comment ajouter ou modifier manuellement les icônes du menu d’administration à l’aide d’un extrait de code
Si vous êtes prêt à mettre la main à la pâte, vous pouvez personnaliser vos icônes d'administration en ajoutant un peu de code.
Avant de vous lancer, nous vous recommandons de consulter un guide rapide sur l'ajout sécurisé de code personnalisé dans WordPress si vous ne l'avez jamais fait auparavant.
La méthode la plus simple et la plus sûre consiste à utiliser l' WPCode , idéale pour ajouter du code personnalisé, du CSSet du HTML sans risque de dysfonctionnement. De plus, une version gratuite (WPCode Lite) suffit amplement, tandis que la version Pro propose des fonctionnalités supplémentaires très pratiques.
Exemple : Remplacement d’une icône par les icônes Dashicons par défaut
Dans cet exemple, nous utiliserons Dashicons (le jeu d'icônes intégré à WordPress) pour remplacer une icône existante. Comme Dashicons est optimisé pour WordPress, il n'aura aucun impact sur les performances de votre site.
Voici ce dont vous aurez besoin avant de commencer :
- L'URL de l'élément de menu que vous souhaitez mettre à jour
- Le nom de l'icône que vous souhaitez utiliser
Supposons que vous souhaitiez modifier l'icône du menu « Articles ». Il vous suffit de survoler l'élément de menu « Articles » dans votre tableau de bord pour afficher l'URL dans la barre d'état en bas de votre navigateur. Seule la dernière partie est nécessaire : edit.php.
Ensuite, rendez-vous sur le site web de Dashicons, trouvez l'icône que vous souhaitez et copiez son « slug » (comme dash icons-format-aside).
Ajoutons maintenant le code :
- Accédez à Extraits de code » Ajouter un extrait à votre tableau de bord.
- Cliquez sur + Ajouter un extrait personnalisé et donnez un titre à votre extrait.
- Choisissez « Extrait PHP » sous « Type de code », puis collez le code suivant dans l'éditeur :
function change_post_menu_icon() {global $menu;// Parcourir les éléments du menuforeach ($menu as $key => $menu_item) {// Trouver l'élément de menu « Articles » (l'URL par défaut est 'edit.php')if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {// Changer l'icône pour une autre classe Dashicon$menu[$key][6] = 'dashicons-format-aside'; // Remplacez ceci par le slug Dashicon de votre choix}}}add_action('admin_menu', 'change_post_menu_icon');
Il suffit de remplacer dashicons-format-aside par le slug de l'icône que vous avez copiée précédemment.
Une fois le code inséré, faites défiler vers le bas jusqu'à la section Insertion , définissez l' emplacement sur « Administrateur uniquement » et activez l'extrait de code . Cliquez ensuite sur Enregistrer l'extrait de code .
WordPress utilisera désormais l'icône que vous avez choisie pour la page Articles, tout simplement !
À lire aussi : Comment configurer les shortcodes Elementor pour une utilisation simplifiée des modèles
Conclusion
Vous voyez, ajouter ou modifier les icônes de votre interface d'administration WordPress est très simple. Une fois que vous aurez compris leur fonctionnement, elles vous permettront d'améliorer le design de votre site web et l'expérience utilisateur.
Que vous optiez pour une extension pour changer rapidement les icônes ou pour ajouter du code personnalisé pour une approche plus manuelle, le processus est simple et peut faire toute la différence, surtout pour les clients ou les utilisateurs qui ne connaissent pas WordPress. Alors n'hésitez plus : relookez votre interface d'administration et personnalisez-la à votre image !
