Ajouter des icônes aux Custom Post Types de WordPress

Tutoriels WordPress > WordPress Auteur Aurélien Denis

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 :

  1. 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 ;
  2. 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é.

Capture d'écran - Back office de WordPress avec icône personnalisé pour le custom post type
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  • Hits : 1 437

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.

14 commentaires
  1. Regnareb

    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.

    Répondre
    1. Aurélien Denis auteur de l’article

      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 ?

      Répondre
      1. Regnareb

        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.

        Répondre
  2. Emmanuel

    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;
    }

    Répondre
  3. Isabelle

    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 ?

    Répondre
    1. Aurélien Denis auteur de l’article

      Il doit falloir ajouter / modifier une propriété CSS de plus. As-tu regardé avec Firebug ?

      Répondre
      1. Isabelle

        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é.

        Répondre
  4. trouille2

    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.

    Répondre
  5. Arsouille

    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 ?

    Répondre
  6. masterofcoetivy

    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.

    Répondre
  7. GOULI

    salut je voudrais un construire un site immobilier pouvez-vous m’indiquer un theme gratuit parfait ?

    Répondre
Laisser un commentaire