Des icônes dans le menu sans plugin

Avec WordPress, il existe des plugins pour tout et n’importe quoi. Pourtant, il y a souvent aussi des méthodes pour faire la même chose sans installer quoi que ce soit, et parfois même sans toucher au code ! Par exemple, j’ai ajouté récemment une fonction qui permet de sélectionner un article au hasard et j’ai choisi d’ajouter un élément au menu pour y accéder. Au départ, j’avais nommé cet élément « Article au hasard », mais cela prenait trop de place à mon goût, surtout pour une fonction aussi anecdotique.

J’ai eu l’idée de remplacer ces mots par une icône. Ce n’est pas toujours facile de trouver une icône adaptée, mais par chance, l’aléatoire a une icône connue, puisqu’on la retrouve un peu partout et notamment dans les lecteurs audios, physiques ou virtuels. Restait à trouver un moyen d’insérer cette image dans le menu et j’ai commencé à chercher des méthodes assez complexes (modifier le fichier header.php, puis utiliser une image en fond grâce au CSS…). Mais j’ai fini par découvrir que WordPress intégrait quelques icônes que l’on pouvait utiliser très facilement. Deux minutes plus tard, voici le résultat :

icone-menu

Si vous voulez en faire autant, voici la marche à suivre. Commencez par regarder la liste d’icônes intégrées au moteur de blog depuis WordPress 3.9 et choisissez l’icône qui vous convient. Dans mon cas, c’est celle-ci, nommée « randomize« . Cliquez sur l’icône et vous aurez alors deux méthodes pour utiliser l’icône. Dans notre cas, le code HTML est simple et suffisant, donc cliquez sur « Copy HTML » et copiez le contenu qui apparaît dans un pop-up.

randomize

Dernière étape, le menu. Cette fois, tout se fait via l’admin WordPress de votre bug : dans le menu « Apparence » puis « Menus », ajoutez un nouvel élément au menu en choisissant le type « Lien » dans la barre de gauche (orange), puis placez le code HTML copié à l’étape précédente à la place du nom (violet). Ne vous inquiétez pas si vous avez du code HTML dans l’administration, l’icône apparaitra correctement sur le site.

reglages-menu-wp-icone

Une fois que vous avez modifié votre menu, il ne reste plus qu’à enregistrer les changements et à profiter. C’est aussi simple que cela, et si vous avez une icône qui correspond à vos besoins, c’est une bonne solution pour réduire la place occupée par le menu. Une méthode un petit peu plus complexe, mais qui serait intéressante, consisterait à n’utiliser les icônes qu’à partir d’une certaine taille. Il faudrait probablement le faire en CSS, avec des media queries qui masquent l’icône au-dessus d’une certaine taille et masque le texte à l’inverse en-dessous d’une autre.

Si les icônes intégrées à WordPress ne suffisent pas à un blog et avant d’envisager d’installer un plugin, j’essaierais plutôt le projet Font Awesome qui propose plus de 480 icônes vectorielles que l’on peut utiliser très simplement (elles prennent la forme d’une police). On peut même les utiliser pour remplacer la puce d’une liste : ça pourrait être pratique dans un menu.

Reste un point important : est-ce qu’il faut nécessairement utiliser des icônes à la place du texte ? Ce n’est pas forcément une bonne idée, car des icônes sont souvent moins faciles à comprendre que du texte. Pour pallier ce défaut, vous devriez au moins remplir le champ « Attribut du titre » et le visiteur aura ainsi une information supplémentaire sur le rôle de l’icône en passant la souris dessus. Au passage, c’est aussi essentiel pour améliorer l’accessibilité du site.

article-hasard-tooltip

[MàJ 16/05/2015 16h54] : point important que j’avais oublié, par défaut seuls les administrateurs du site verront l’icône. Pour que les lecteurs en profitent aussi, il faut ajouter ces quelques lignes dans le fichier functions.php de votre thème (via) :

add_action( 'wp_enqueue_scripts', 'jk_load_dashicons' );
function jk_load_dashicons() {
    wp_enqueue_style( 'dashicons' );
}
Publicités

2 commentaires sur “Des icônes dans le menu sans plugin

    1. Bonjour

      En effet, c’est une excellente remarque. Les icônes sont chargées pour les administrateurs seulement par défaut, il faut les charger manuellement pour les visiteurs.

      Heureusement, c’est très simple : ajoutez simplement wp_enqueue_style( 'dashicons' ); dans l’une des fonctions du fichier functions.php. Vous pouvez le faire, comme moi, en ajoutant cette ligne dans une autre fonction (vous pouvez voir ce que ça donne à cette adresse.

      Autre solution, probablement plus propre, ajouter une fonction dédiée aux fichiers. Par exemple, vous pouvez copier/coller ce code dans le fichier functions.php et cela devrait fonctionner parfaitement (/source :

      add_action( 'wp_enqueue_scripts', 'jk_load_dashicons' );
      function jk_load_dashicons() {
          wp_enqueue_style( 'dashicons' );
      }
      
      

      Merci beaucoup pour la remarque en tout cas, je n’avais même pas réalisé que j’étais le seul à voir cette icône !

      Aimé par 1 personne

Répondre

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l'aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s