WP3.8 : Utiliser une icône personnalisée pour les Custom Post Types

Depuis la mise à jour 3.8 de WordPress, l’utilisation d’icônes personnalisées pour les Custom Post Types dans l’admin de WordPress à quelque peu changé.

L’ancienne méthode, le plus simple

Dans les précédentes versions, il suffisait d’indiquer lors de la création du custom post type (Dans le thème ou le plugin concerné), une url d’image à utiliser comme icône dans l’administration WordPress. L’élément à renseigner était l’attribut « menu_icon » dans le tableau des arguments à passer à la fonction « register_post_type » (Voir le Codex pour l’utilisation de cet argument) :

admin_wp3.7

L’inconvénient principal de cette méthode est  que cette modification n’est prise en compte que dans la barre de menu latérale et pas dans le titre de la page d’admin concernée :

admin_wp3.7_defaultIconTitre

Pour faire figurer à cet emplacement une icone personnalisée, cette solution n’est donc pas satisfaisante.

Remarque : On ne peut pas non plus gérer d’état :hover sur l’icône via cette méthode il me semble…

L’alternative, la modification des styles CSS de l’admin

La solution la plus connue pour appliquer ses icônes personnalisées à la fois dans la barre latérale et dans les pages d’administration consiste en une modification des styles CSS de l’admin WordPress.

Ainsi, la fonction suivante :

function mba_lieux_icon() {
    ?>

 

Les icônes sont en effet dorénavant gérées en CSS via l’utilisation d’une police de caractère pictographique appelée DashIcons

Notre code est donc sensiblement modifié de cette façon, pour utiliser une des icônes de la police DashIcons :

function mba_lieux_icon() {
    ?>

 

A noter que le code du caractère utilisé dans mon exemple (‘f230’) est personnalisé en fonction du choix du pictogramme voulu, parmi les différents choix proposés dans la police DashIcons.

Et pour la page d’admin me direz-vous ?

Eh bien dans la version 3.8 un peu plus épurée, on ne retrouve plus les icône au niveau des titres des pages d’édition. La manip’ précédente est donc la seule possible pour l’instant en ce qui concerne la personnalisation des icônes des CPT dans le back-office WordPress.

Sources de cet exemple

Vous pourrez trouver les sources réutilisables de mon exemple sur ce GIST :

Share:
Julien

Julien

Responsable de production