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
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.
Greg dit
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+
Grégoire Noyelle dit
Je t’en prie. Comme toi, je trouvais l’implementation en version bêta un peu lourde pour ammener l’image. Tant mieux 🙂
Greg dit
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.
Grégoire Noyelle dit
Merci!
Je vais tester.
En tout cas, je suis vraiment fan de la nouvelle interface, à part la taille des typos.
Greg dit
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.
Grégoire Noyelle dit
Oui, je n’ai pas encore le temps de me faire mes css maison.
Sinon le Plugin pour les couleurs dépanne bien
Greg dit
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;
}
Grégoire Noyelle dit
Merci encore je ne connaissais pas.
Je vais préciser dans l’article que le tuto continue dans les commentaires 🙂
Greg dit
Hahaha 😀
Grégoire Noyelle dit
C’est fait
Vadon Flore dit
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.
Grégoire Noyelle dit
Rapport avec l’article?
Julien Maury (@TweetPressFr) dit
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/Grégoire Noyelle dit
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.
Julien Maury (@TweetPressFr) dit
Hey génial ! Merci ^^