Lorsque l’on crée un plugin dans wordPress, on crée souvent une page de réglages pour gérer les options.
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().
|
1 |
add_menu_page( string $page_title, string $menu_title, string $capability, string $menu_slug, callable $function = '', string $icon_url = '', int $position = null ) |
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 :
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) :
|
1 |
<svg width="512" height="512" viewBox="0 0 512 512"><path d="m236 7c-63 6-114 30-157 72-38 39-62 87-71 142-2 16-2 54 0 70 9 56 33 103 71 142 39 38 87 62 142 71 16 2 54 2 70 0 56-9 103-33 142-71 38-39 62-86 71-142 2-16 2-54 0-70-9-55-33-103-71-142-39-38-87-62-141-70-10-2-48-3-56-2z m-62 129c18 3 32 9 37 16 1 1 10 31 20 65 10 34 19 67 21 71l3 9 16-33c22-45 46-96 58-123 3-7 5-7 20-7 20 0 41 4 51 11 8 5 9 8 9 28 0 14 3 110 5 168 0 17 0 20-1 23-3 4-8 5-20 5-24-2-43-9-48-20-1-2-1-15-1-69 0-36 0-69-1-74l0-9-8 15c-4 9-14 31-23 49-21 45-28 60-37 83-11 25-10 25-26 24-20 0-38-5-46-14-4-3-4-5-12-33-18-66-34-123-35-121-1 3-12 87-18 139-2 13-3 25-3 26-1 2-5 4-9 4-1 0-6-1-9-2-8-2-15-8-18-14-2-6-2-13 15-113 5-36 11-73 13-83 1-10 3-18 4-20 0-1 3-2 5-2 2-1 4-1 5-2 1 0 25 1 33 3z" transform="scale(0.046875 0.046875)"></path></svg> |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
class MIB_Utils { /** * Returns a base64 URL for the svg for use in the menu * @param bool $base64 Whether or not to return base64'd output. * @return string */ public static function get_icon_svg( $base64 = true ) { $svg = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="fill:#82878c" viewBox="0 0 512 512"><path d="m236 7c-63 6-114 30-157 72-38 39-62 87-71 142-2 16-2 54 0 70 9 56 33 103 71 142 39 38 87 62 142 71 16 2 54 2 70 0 56-9 103-33 142-71 38-39 62-86 71-142 2-16 2-54 0-70-9-55-33-103-71-142-39-38-87-62-141-70-10-2-48-3-56-2z m-62 129c18 3 32 9 37 16 1 1 10 31 20 65 10 34 19 67 21 71l3 9 16-33c22-45 46-96 58-123 3-7 5-7 20-7 20 0 41 4 51 11 8 5 9 8 9 28 0 14 3 110 5 168 0 17 0 20-1 23-3 4-8 5-20 5-24-2-43-9-48-20-1-2-1-15-1-69 0-36 0-69-1-74l0-9-8 15c-4 9-14 31-23 49-21 45-28 60-37 83-11 25-10 25-26 24-20 0-38-5-46-14-4-3-4-5-12-33-18-66-34-123-35-121-1 3-12 87-18 139-2 13-3 25-3 26-1 2-5 4-9 4-1 0-6-1-9-2-8-2-15-8-18-14-2-6-2-13 15-113 5-36 11-73 13-83 1-10 3-18 4-20 0-1 3-2 5-2 2-1 4-1 5-2 1 0 25 1 33 3z"></path></svg>'; if( $base64 ) { return 'data:image/svg+xml;base64,' . base64_encode( $svg ); } return $svg; } } |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
public function __construct() { add_action( 'admin_menu', array( $this, 'admin_menu' ) ); } /** * Admin Menu */ public function admin_menu() { add_menu_page( $this->page_title, $this->menu_title, 'administrator', $this->menu_slug, array( $this, 'admin_page' ), MIB_Utils::get_icon_svg(), 39 // position ); } |
Et hop, un joli icone devant le titre de son menu.
