Ajouter des icônes aux custom post types de WordPress

Les custom post types de WordPress peuvent facilement être personnalisés en ajoutant un icône correspondant au contenu. Vos utilisateurs y gagneront en ergonomie et votre back office aura une allure des plus professionnelles.

2 méthodes existent pour ajouter un icône :

La première reste la plus simple bien qu’elle ne permette pas d’appliquer un état de survol. L’image restera identique quel que soit l’état. Le seul préalable est de créer une image de 16 pixels par 16 pixels ;
La seconde, légèrement plus complexe, prend en charge l’état survolé mais nécessite l’ajout de lignes de code supplémentaires. Des packs d’icônes sont disponibles au téléchargement de façon gratuite ;

Nous allons voir ensemble les 2 méthodes dans ce tutoriel, accompagné d’un podcast vidéo HD.

Méthode n°1 – Modification du custom post types

La plupart du temps les custom post types sont initialisés dans le fichier functions.php mais peuvent l’être dans un fichier dédié. A vous d’effectuer une recherche de la fonction register_post_type.

Ajoutez ensuite la ligne de code suivante dans les paramètres :

'menu_icon' => get_bloginfo('template_directory') . '/images/podcast-icon.png',  // URL de l'image

Pour vous donner un aperçu complet, voici le code complet pour créer un custom post types intitulé Podcasts :

add_action( 'init', 'register_cpt_podcast' );

function register_cpt_podcast() {

    $labels = array(
        'name' => _x( 'Podcasts', 'podcast' ),
        'singular_name' => _x( 'Podcast', 'podcast' ),
        'add_new' => _x( 'Add New', 'podcast' ),
        'add_new_item' => _x( 'Add New Podcast', 'podcast' ),
        'edit_item' => _x( 'Edit Podcast', 'podcast' ),
        'new_item' => _x( 'New Podcast', 'podcast' ),
        'view_item' => _x( 'View Podcast', 'podcast' ),
        'search_items' => _x( 'Search Podcasts', 'podcast' ),
        'not_found' => _x( 'No podcasts found', 'podcast' ),
        'not_found_in_trash' => _x( 'No podcasts found in Trash', 'podcast' ),
        'parent_item_colon' => _x( 'Parent Podcast:', 'podcast' ),
        'menu_name' => _x( 'Podcasts', 'podcast' ),
    );

    $args = array(
        'labels' => $labels,
        'hierarchical' => true,

        'supports' => array( 'title', 'editor', 'thumbnail', 'custom-fields', 'comments', 'revisions' ),
        'taxonomies' => array( 'genre' ),
        'public' => true,
        'show_ui' => true,
        'show_in_menu' => true,

        'menu_icon' => get_bloginfo('template_directory') . '/images/podcast-icon.png',
        'show_in_nav_menus' => true,
        'publicly_queryable' => true,
        'exclude_from_search' => false,
        'has_archive' => true,
        'query_var' => true,
        'can_export' => true,
        'rewrite' => true,
        'capability_type' => 'post'
    );

    register_post_type( 'podcast', $args );
}

Il vous suffit de modifier l’URL du fichier image comme dans cet exemple.

Retournez à présent dans le back office de WordPress puis remarquez l’apparition de votre icône pour le custom post type concerné.

Icônes symbolisant les podcasts de 16×16

Méthode n°2 – Ajout d’un style CSS via le functions.php

Cette seconde nous permet d’ajouter un icône via le CSS de l’administration de WordPress. Elle est incompatible avec la première : retirez donc la ligne de code ajoutée si tel est le cas.

Ouvrez donc le fichier functions.php puis ajoutez les lignes suivantes en fin de fichier :

add_action( 'admin_head', 'wpc_cpt_icon' );

function wpc_cpt_icon() {
    ?>
    <style type="text/css" media="screen">
        #menu-posts-podcast .wp-menu-image {
            background: url("<?php bloginfo('template_url') ?>/images/clapperboard.png") no-repeat 6px 6px !important;
        }
       #menu-posts-podcast:hover .wp-menu-image, #menu-posts-podcast.wp-has-current-submenu .wp-menu-image {
            background-position:6px -18px !important;
        }
        #icon-edit.icon32-posts-podcast {background: url(<?php bloginfo('template_url') ?>/images/clapperboard.png) no-repeat;}
    </style>
<?php }

Mon custom post type s’intitule podcast au singulier. Il vous suffit de modifier ce terme dans les lignes ci-dessous. Pour vous aider, utilisez Firebug puis analyser l’icône d’un ou plusieurs éléments.

Modifiez également l’URL de l’icône associé aux différents états. Dans mon cas, le lien est identique car j’utilise cet excellent pack d’icônes prêts-à-l’emploi :

Custom Post Type Icons - Fugue Edition

Pack d'icônes pour les custom post types de WordPress, prêts-à-l'emploi.

Taille : 4,7 Mo • Date : 22 octobre 2011 • Hits : 1 421

Il ne vous reste plus qu’à piocher dans ce pack de qualité puis de les envoyer dans un dossier images de votre thème – par exemple.

Ce tutoriel vous montre une fois de plus la capacité de personnalisation du back office de WordPress pour une utilisation en marque blanche du CMS.

12 commentaires

Regnareb

24 octobre 2011 à 14 h 37

Hmmmm, il est tout à fait possible de faire un effet de rollover avec la première technique également : en utilisant des sprites.

Ça aurait été pas mal d’ailleurs de montrer à l’utilisateur ce fonctionnement des sprites, qui est vraiment très très utile dans ce genre de cas, que ce soit le premier ou le deuxième.

Aurélien Denis auteur de l’article
24 octobre 2011 à 14 h 39
Tu peux nous détailler ta méthode pour la première technique ? Sans CSS, comment comptes-tu créer le déplacement d’image ?
1. Regnareb
  24 octobre 2011 à 14 h 55
  Il faut obligatoirement du CSS bien sûr.
  En utilisant cette technique par exemple :
  http://css-tricks.com/3427-css-sprites-with-inline-images/
  http://www.sohtanaka.com/web-design/css-sprites-wout-background-images/
  Il est d’ailleurs possible d’utiliser les transitions CSS3 pour rendre tout ça un peu plus « fancy ».
  Ou encore il est possible d’afficher une partie transparente du sprite en html et d’afficher la partie icone avec un background CSS.

Emmanuel

25 octobre 2011 à 11 h 31

Une petite remarque tout de même, si tu utilises les icônes de « Fuge Edition » il faut faire une petite modification du CSS, car la position des deux états dans le png ne correspond pas avec les CSS qui est indiqué.

C’est à dire que l’icône est colorée à l’état normal et grisé lors du survol, ce qui est l’inverse de toutes les autres icônes.

Pour modifier il faut donc modifier les background position des deux états css :

#menu-posts-custom_post_slug .wp-menu-image {
background: url(« /images/mon_icone_perso.png ») no-repeat 6px -17px !important;
}
#menu-posts-custom_post_slug:hover .wp-menu-image, #menu-posts-custom_post_slug.wp-has-current-submenu .wp-menu-image {
background-position:6px 7px !important;
}

Isabelle

6 août 2012 à 19 h 18

Effectivement il faut inverser les positions des deux icônes pour les utiliser correctement. Mais il reste un petit problème : comment faire pour que l’icône s’affiche en grand sur la page de saisie des post custom et non les deux ?

Aurélien Denis auteur de l’article
6 août 2012 à 20 h 57
Il doit falloir ajouter / modifier une propriété CSS de plus. As-tu regardé avec Firebug ?
1. Isabelle
  7 août 2012 à 11 h 15
  Merci pour ta réponse, mais j’ai trouvé une autre solution :
  il faut créer une icône 32×32 et lui donner un autre nom (« monicon32.png » par exemple) et mettre ce nom dans la ligne de code « #icon-edit.icon32_post-…. »
  Voilà, ce n’est pas très compliqué.
  1. Aurélien Denis auteur de l’article
    7 août 2012 à 11 h 44
    Super, merci du retour !

trouille2

17 janvier 2013 à 11 h 15

pour la première solution, j’ai eu un problème en utilisant get_bloginfo(‘template_directory’). En utilisant get_stylesheet_directory_uri() à la place, ça marche.

Arsouille

13 mars 2014 à 18 h 58

Je souhaite initialiser mes CPT dans un fichier dédié (et non dans le fichier functions.php), j’ai fait quelques recherches, comme indiqué au début de ce post, mais rien…
En créant un fichier register-post-type.php ça ne fonctionne pas… Une piste ?

masterofcoetivy

13 octobre 2014 à 17 h 28

Bonjour,
je fais la méthode 2..;et j’obtiens ma nouvelle icône mais au dessus en surimpression reste l’épingle…et je ne vois pas où la retirer..Merci de votre aide.

Aurélien Denis auteur de l’article
17 octobre 2014 à 18 h 36
La méthode 1 est conseillée depuis WordPress 3.8 qui intègre les dashicons.

Les commentaires sont fermés.

Ajouter des icônes aux custom post types de WordPress

Méthode n°1 – Modification du custom post types

Méthode n°2 – Ajout d’un style CSS via le functions.php

Custom Post Type Icons - Fugue Edition

12 commentaires

Regnareb

Aurélien Denis auteur de l’article

Regnareb

Emmanuel

Isabelle

Aurélien Denis auteur de l’article

Isabelle

Aurélien Denis auteur de l’article

trouille2

Arsouille

masterofcoetivy

Aurélien Denis auteur de l’article

Thèmes & Plugins
Premium By WP Channel

Rejoignez la communauté WordPress !

À propos

Communauté

Aide & Support

Sphère sociale

Méthode n°1 – Modification du custom post types

Méthode n°2 – Ajout d’un style CSS via le functions.php

Custom Post Type Icons - Fugue Edition

Articles similaires

30 hacks PHP pour WordPress 3

Intégrer un forum bbPress dans votre blog WordPress 3.0

Afficher un compteur d’articles sous WordPress

12 commentaires

Regnareb

Aurélien Denis auteur de l’article

Regnareb

Emmanuel

Isabelle

Aurélien Denis auteur de l’article

Isabelle

Aurélien Denis auteur de l’article

trouille2

Arsouille

masterofcoetivy

Aurélien Denis auteur de l’article

Thèmes & Plugins Premium By WP Channel

Rejoignez la communauté WordPress !

Thèmes & Plugins
Premium By WP Channel