Autres tutoriels sur le sujet
- Soumettre des contenus WordPress sur mesure avec Gravity Forms et ACF
- Concevoir les sites de demain avec Grid Layout et WordPress
- WordPress :: Ajout d’une image d’en-tête retina (HiDPI) pour votre site
- WordPress :: Créer un widget Text Rotator avec ACF Pro et ACF Widgets
- WordPress :: Créer un widget Slick Slider avec ACF Pro et ACF Widgets
- WordPress :: Créer un widget avec ACF Pro et ACF Widgets
- WordPress :: Utiliser les champs Repeater ACF
- WordPress :: Utilisez le glissé-déposé pour afficher vos contenus personnalisés
- WordPress :: Comment forcer l’activation d’Advanced Custom Fields (ACF)
- WordPress :: Gestion optimisée de l’organisation des médias
- WordPress :: Utiliser le glisser-déposer pour afficher vos articles
- WordPress :: Sauvegarder son site WordPress avec BackWPup
- WordPress :: Page Builder par SiteOrigin
- ACF Pro :: Ajouter des pages d’options WordPress
- WordPress :: Masquer les sous-menus de votre back-office
- WordPress :: Tester votre back-office selon les rôles
- WordPress :: Personnaliser le menu TinyMCE 4
- WordPress :: Accorder le style de l’éditeur WYSIWYG avec votre thème
- WordPress :: Créer des contenus personnalisés avec Custom Type UI
- WordPress :: insérer des médias vidéos ou Google Maps
- WordPress :: Gestion complète des Menus
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:
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.
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.
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’
Et le résultat final, de bien meilleure facture
Note: Pour aller plus loin, je vous recommande vivement les commentaires de Greg qui furent généreux dans cet article. Merci à lui.
17 réponses
[…] 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. […]
[…] Dans ce tutoriel nous verrons comment utiliser les nouvelles icônes Dashicons dans le back-office de WordPress 3.8. […]
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+
Je t’en prie. Comme toi, je trouvais l’implementation en version bêta un peu lourde pour ammener l’image. Tant mieux 🙂
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-pagepar 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.
Merci!
Je vais tester.
En tout cas, je suis vraiment fan de la nouvelle interface, à part la taille des typos.
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.
Oui, je n’ai pas encore le temps de me faire mes css maison.
Sinon le Plugin pour les couleurs dépanne bien
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;
}
Merci encore je ne connaissais pas.
Je vais préciser dans l’article que le tuto continue dans les commentaires 🙂
Hahaha 😀
C’est fait
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.
Rapport avec l’article?
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/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.
Hey génial ! Merci ^^