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 MiB • Date : 22 octobre 2011 • Hits : 624Il 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.
Podcast: Télécharger (Durée: 4:31 — 198.8MB)
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.
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 ?
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.
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;
}
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 ?
Il doit falloir ajouter / modifier une propriété CSS de plus. As-tu regardé avec Firebug ?
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é.
Super, merci du retour !
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.