Styler votre administration

J’ai trouvé hier sur HereWithMe un article avec deux très bons trucs pour gérer l’administration.

Je vous laisse le lire pour découvrir “le deuxième”, le premier est un énorme pack d’icones pour identifier les custom post types dans le menu de gauche. C’est vrai qu’au bout de deux ou trois, avoir systématiquement l’icône par défaut des articles ne rend pas la lecture vraiment facile.

Aussitôt lu, aussitôt téléchargé, aussitôt mis en place.

Oui mais, il y a aussi la “grosse” icône qui se trouve au dessus de la liste d’articles, du titre, bref, l’icone principale de la page d’administration, et celle là, qui fait 32 pixels, n’est pas modifiée avec le pack d’icônes créé spécialement par Randy Jensen. Et ça, je connais déjà des clients que ça va perturber.

La solution ? Aller directement chercher sur le site de Yusuke Kamiyamane le pack d’icônes originales, et télécharger le zip qui comprend les sources. Car dans les sources se trouvent les fichiers psd … au format 32×32 !

Randy Jensen a fait un boulot monstrueux en préparent au “format wordpress” les plus de 3.000 icones disponibles. Vous, une fois que vous avez choisi celles que vous voulez utiliser pour votre site, il ne vous reste qu’à aller dans le fichier psd (il n’y en a pas 3.000, les icones sont regroupées par thèmes), et faire un petit crop sur celle qui vous intéresse.

Randy Jensen donne le code php à rajouter dans le fichier functions.php du thème (pour moi ce sera un autre fichier, celui où je gère les customs post type, mais le principe reste le même)

add_action( 'admin_head', 'cpt_icons' );
function cpt_icons() {
    ?>
    <style type="text/css" media="screen">
        #menu-posts-POSTTYPE .wp-menu-image {
            background: url(<?php bloginfo('template_url') ?>/images/YOURIMAGE.png) no-repeat 6px -17px !important;
        }
	#menu-posts-POSTTYPE:hover .wp-menu-image, #menu-posts-POSTTYPE.wp-has-current-submenu .wp-menu-image {
            background-position:6px 7px!important;
        }
    </style>
<?php }

Il suffit de rajouter une troisième ligne :

.icon32-posts-POSTTYPE.wp-has-current-submenu .wp-menu-image { background: url(<?php bloginfo('template_url') ?>/images/YOURIMAGE.png) no-repeat 0px 0px !important; }

Et voilà, votre “grande icone” s’affiche.

(La vignette de cet article est un montage réalisé à partir de la photo sous licence CC BY NC SA de Jeroen Elferich)