Icon SVG personnalisé dans l’Admin Menu | WP

Lorsque l’on crée un plugin dans wordPress, on crée souvent une page de réglages pour gérer les options.

Icone SVG personnalisé dans le menu d’administration de wordPress

On est amené, si l’on veut faire apparaître la page du plugin dans le menu de l’administration, de créer un lien avec la fonction add_menu_page().

Le 5ième argument de la fonction est l’url vers l’icone devant le titre du plugin dans le menu. Par défaut, si l’on ne renseigne rien ou une chaine vide, l’icone utilisé est dashicons-admin-generic de la police d’icones dashicons. Si l’on veut changer pour un autre icone de cette police, on utilise le nom de sa classe (ex : dashicons-welcome-learn-more ).

Par contre, si l’on veut utiliser un autre icon SVG non présent dans la police dashicons, il est nécessaire d’importer la balise <svg> de la police d’icone personnalisée, encodée en Base64.

J’utilise le site de création de police d’icones personnalisée Fontastic. Lorsque j’utilise (ou importe) un icone dans la police, celui-ci est affiché sur une page telle que :

Police d’icones personnalisée Fontastic

Pour trouver le code <svg> de l’icone, on ouvre la fenêtre d’inspection de la page web (DevTools), et l’on sélectionne l’icone à importer.

On obtient alors le code suivant (pour mon icone) :

On ajoute la version svg, l’attribut xmlns spécifiant le namespace. Il est nécessaire d’ajouter également l’attribut fill ou de l’intégrer au style en ligne de la balise. On change width et height en 100%.

Si l’on doit réutiliser cet icone, il est mieux de coder l’icone dans une fonction qui renvoie la chaine voulue. On ajoute le codage base64 pour définir une url.

Méthode statique dans une classe Utils :

Il ne reste plus alors qu’à appeler l’icone dans la définition de la page d’options :

Méthode dans une class-admin.php :

L’icone <svg> dans le menu administration

Et hop, un joli icone devant le titre de son menu.

 

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.