Pour ajouter un menu dans la barre d’administration de WordPress, on utilise add_menu_page() :
|
1 2 3 4 5 6 7 8 9 |
add_menu_page( string $page_title, string $menu_title, string $capability, string $menu_slug, callable $function = '', string $icon_url = '', int $position = null ); |
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).
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
|
1 2 3 4 5 6 7 8 9 |
add_menu_page( __( 'Clio Ads', 'cliomanager' ), __( 'Clio Ads', 'cliomanager' ), 'activate_plugins', 'clio-settings-ads', [$this, 'admin_ads_page'], 'data:image/svg+xml;base64,' . base64_encode('<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" fill="#AAAAAA"><path d="m389 373l10 46c0 2 0 4-1 6-1 2-3 4-5 4l-2 1c0 0-1 0-3 1-1 0-2 0-4 1-2 1-4 1-6 2-3 0-5 1-8 1-2 0-5 1-8 1-3 1-6 1-10 2-3 0-6 0-10 1-4 0-8 0-11 0-45 0-84-13-117-37-33-25-56-59-68-101l-27 0c-3 0-5-1-7-3-1-1-2-4-2-6l0-32c0-3 1-5 2-7 2-2 4-2 7-2l19 0c-1-11-1-21 0-30l-19 0c-3 0-5-1-7-3-1-2-2-4-2-7l0-32c0-3 1-5 2-7 2-1 4-2 7-2l28 0c13-40 36-72 69-97 34-24 72-36 115-36 19 0 38 2 55 6 2 1 4 2 6 4 1 3 1 5 1 7l-12 46c-1 2-2 4-4 5-3 2-5 2-7 1l-1 0c-1 0-2-1-4-1l-5-1-6-1-8-1-8-1-8 0c-24 0-46 6-65 18-19 13-33 29-43 51l134 0c3 0 5 1 7 3 2 2 3 5 2 8l-7 32c-1 5-4 8-9 8l-139 0c-1 7-1 17 0 30l131 0c3 0 5 1 7 3 2 2 2 5 2 8l-7 32c-1 2-2 4-3 5-2 1-4 2-6 2l-111 0c10 22 24 40 43 53 19 13 41 20 65 20 4 0 7 0 11-1 3 0 6 0 9-1 3 0 6-1 9-1 2 0 5-1 7-1 2-1 3-1 5-2l3-1 2 0c2-1 5-1 7 0 3 2 4 4 5 6z"></path></svg>'), 73 ); |
Et hop, un joli icone personnalisé dans la barre de menu
