Créateur de thèmes WordPress :: Formateur :: Web Designer

WordPress :: Utiliser les icônes Dashicon pour vos contenus personnalisés

Publié le : 

Modifié le : 

Par : 

Depuis la version 3.8 de WordPress, un gros changement est intervenu sur la gestion des icônes. Il n’est plus nécessaire d’ajouter une image. Une bibliothèque nous est proposée nativement pour vos contenus personnalisés (Custom Post Type).

Ancien code d’intégration

Au moment de la création des Custom Post Type (contenus personnalisés) sous la forme de plug-in maison, il s’agissait d’ajouter un argument pour ne pas pas afficher l’icône par défaut qui était le même que les articles.

Voici une capture de l’ancien code:

Argument pour l'icone du back-office de WordPress

Avec la mise à jour de WordPress 3.8, les anciennes icônes ne s’intègrent pas à la nouvelle interface. Voici la preuve en image.

Nouvel argument pour l'icone du back-office de WordPress

Chercher un Icône dans la nouvelle bibliothèque

Les nouvelles icônes sont gérées par la bibliothèque Dashicons. Celle-ci a été créée par Mel Choyce qui travaille à Automattic.

Choix de l'icone dans la bibliothèque Dashicon

Une fois l’icône trouvée, vous cliquez dessus et des informations vous sont proposées.

  • nom de l’icône
  • Copy CSS
  • Copy HTML
  • Copy Glyph

Intégrer l’icône dans les nouveaux paramètres

Pour utiliser les nouvelles icônes, il s’agit juste de récupérer le nom de l’objet et de l’ajouter en nouvelle valeur pour l’argument `menu_icon’

Nouvel argument pour l'icone du back-office de WordPress

Et le résultat final, de bien meilleure facture

Nouvel icone dans le back-office de WordPress

 

Note: Pour aller plus loin, je vous recommande vivement les commentaires de Greg qui furent généreux dans cet article. Merci à lui.

Quelques liens

17 réponses

  1. […] Depuis la version 3.8 de WordPress, un gros changement est intervenu sur la gestion des icônes. Il n’est plus nécessaire d’ajouter une image. Une bibliothèque nous est proposée nativement.  […]

  2. […] Dans ce tutoriel nous verrons comment utiliser les nouvelles icônes Dashicons dans le back-office de WordPress 3.8.  […]

  3. Salut.

    J’avais en effet vu passer l’info lors des betas de la 3.8, c’est cool qu’ils y aient pensé.
    Merci pour le rappel 🙂

    A+

    1. Je t’en prie. Comme toi, je trouvais l’implementation en version bêta un peu lourde pour ammener l’image. Tant mieux 🙂

    2. Et si on veut faire les choses encore mieux (et si on est pointilleux), on peut aussi ajouter une ligne de css :
      .icon16.icon-module:before, #dashboard_right_now li a.module-count:before { content: '\f313'; }
      Pour le premier sélecteur :
      – Si on créé une span avec les deux classes icon16 icon-page par exemple, on aura une icône « page », alors pourquoi pas faire de même avec nos CPT, ça pourrait servir.
      Pour le second sélecteur :
      – Il s’agit du nouveau widget « At a glance » sur le tableau de bord, qui remplace le « Right now ». Si l’utilisateur ajoute notre CPT dans ce widget, il aura la bonne surprise d’avoir la bonne icône. 🙂

      Bon ok, le premier ne servira probablement pas, à moins d’en avoir besoin dans son propre plugin, le second a déjà + de chances d’être utile.
      My 50 cents.

      1. Merci!
        Je vais tester.
        En tout cas, je suis vraiment fan de la nouvelle interface, à part la taille des typos.

    3. La taille de la typo pose en effet quelques soucis d’agencement (principalement des retours à la ligne non désirés), mais avec un peu de CSS supplémentaire, ça passe bien.
      Perso, je trouve le nouveau thème pas mal, rafraichissant, malgré le côté flat. Mais bon, une texture en fond et ça passe déjà mieux.

      1. Oui, je n’ai pas encore le temps de me faire mes css maison.
        Sinon le Plugin pour les couleurs dépanne bien

    4. Au fait, je viens de me rappeler d’un truc, on peut aussi passer une image svg :
      // Special handling for data:image/svg+xml and Dashicons.
      if ( 0 === strpos( $ptype_obj->menu_icon, 'data:image/svg+xml;base64,' ) || 0 === strpos( $ptype_obj->menu_icon, 'dashicons-' ) ) {
      $menu_icon = $ptype_obj->menu_icon;
      }

      1. Merci encore je ne connaissais pas.
        Je vais préciser dans l’article que le tuto continue dans les commentaires 🙂

  4. depuis peu, lorsque je veux modifier un article de mon blog, la page est blanche avec des petits soulignements rouges sur toute la surface. Chaque article a le même problème, il n’y a plus de visuel.

    1. Rapport avec l’article?

  5. Cette font est vraiment complète et c’est un très bonne chose quelle soit dispo dans l’admin.

    Je préfère passer par le HTML avec <i class="dashicons dashicons-machin" ></i> personnellement que le CSS2 before. Pour info, j’ai sorti un plugin sur Dashicons pour l’utiliser en Shortcode dans les posts, les menus et dans les widgets : http://wordpress.org/plugins/jm-dashicons-shortcode/

    1. Je les utilise pour l’instant que dans les paramètres du Custom Post Type.
      Super ton plugin, je l’ajoute à ma collection de plugins WordPress, comme ceux que tu as faits pour Twitter d’ailleurs.

Laisser un commentaire

Votre adresse e-mail 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.