Icone personnalisé dans le menu admin de WordPress

Icone SVG personnalisé dans le menu d'administration de WordPress

Pour ajouter un menu dans la barre d’administration de WordPress, on utilise add_menu_page() :

Le paramètre $icon_url est l’icone affiché dans le menu d’administration. Ce paramètre peut être une classe dashicons, dans ce cas on va sur la page de ressources worpress dashicons pour retrouver le nom de la classe.

On peut vouloir également personnaliser cette icone avec un fichier svg. Dans ce cas, on spécifie le paramètre $icon_url avec une image svg encodée en base64.

Chercher l’icone SVG

On repère une balise svg sur un site, par exemple sur le site d’icones personnalisé Fontastic, et l’on ouvre l’inspecteur de code (F12).

Fontastic SVG et Developer Tools

On copie le code SVG et on l’encode en base64. On peut enlever l’attribut transform dans la balise path et l’on ajoute les attributs :

  • xmlns : xmlns="http://www.w3.org/2000/svg"
  • fill : fill="#AAAAAA"

L’attribut fill permet à WordPress de changer la couleur de l’icone. l’attribut xmlns permet la compatibilité de l’icone SVG encodé en base64. Il ne suffit plus qu’à écrire le code correspondant en utilisant la fonction PHP base64encode() pour encoder la balise SVG en base64 pour insérer le menu.

Code pour ajouter un menu

Et hop, un joli icone personnalisé dans la barre de 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.