Com a introdução dos Custom Post Types no WordPress, muitos blogueiros passaram a criar zonas específicas para os seus tipos de conteúdos, as quais necessitam logicamente de ícones próprios, caso contrário todos os ícones do menu de navegação ficam idênticos, não existindo uma diferenciação entre esses vários tipos de conteúdo. Neste artigo vamos dar-lhe a conhecer um Template de ícones desenvolvido pelo Matthias Kretschmann, que tem como objetivo ajudá-lo na criação dos seus ícones para o painel administrativo do WordPress, incluindo também as formas mais acertadas de implementar esses ícones no código do seu WordPress, para que apareçam corretamente nas seções certas dos seus Custom Post Types.

icones template

O template .PSD (Formato Photoshop) inclui todas as medidas para os ícones de Custom Post Types, tanto para o menu como para as páginas. Poderá criar os seus próprios ícones, seguindo basicamente as grelhas de medição realizadas pelo Matthias. Para conseguir aplicar os ícones corretamente ao seu WordPress, existem pelo menos 3 medidas requeridas:

  • dois ícones de 16px para o menu de administração, um com cor e outro sem cor
  • um ícone de 32px para o ecrã atual

O download do template de ícones para o painel de administração do WordPress, por ser feito aqui!

IMPLEMENTADO NO SEU CÓDIGO

O WordPress coloca um ID automaticamente em torno do item do menu que contém o nome do seu custom post type (o parâmetro $post_type em register_post_type()). Altere apenas esse nome para o nome do seu Custom Post Type:

<?php
/**
 * Custom Post Type Icon for Admin Menu & Post Screen
 */
add_action( 'admin_head', 'custom_post_type_icon' );

function custom_post_type_icon() {
    ?>
    <style>
        /* Admin Menu - 16px */
        #menu-posts-YOUR_POSTTYPE_NAME .wp-menu-image {
            background: url(<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite.png) no-repeat 6px 6px !important;
        }
        #menu-posts-YOUR_POSTTYPE_NAME:hover .wp-menu-image, #menu-posts-YOUR_POSTTYPE_NAME.wp-has-current-submenu .wp-menu-image {
            background-position: 6px -26px !important;
        }
        /* Post Screen - 32px */
        .icon32-posts-YOUR_POSTTYPE_NAME {
            background: url(<?php bloginfo('template_url') ?>/images/icon-adminpage32.png) no-repeat left top !important;
        }
        @media
        only screen and (-webkit-min-device-pixel-ratio: 1.5),
        only screen and (   min--moz-device-pixel-ratio: 1.5),
        only screen and (     -o-min-device-pixel-ratio: 3/2),
        only screen and (        min-device-pixel-ratio: 1.5) {

            /* Admin Menu - 16px @2x */
            #menu-posts-YOUR_POSTTYPE_NAME .wp-menu-image {
                background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite@2x.png') !important;
                -webkit-background-size: 16px 48px;
                -moz-background-size: 16px 48px;
                background-size: 16px 48px;
            }
            /* Post Screen - 32px @2x */
            .icon32-posts-YOUR_POSTTYPE_NAME {
                background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminpage32@2x.png') !important;
                -webkit-background-size: 32px 32px;
                -moz-background-size: 32px 32px;
                background-size: 32px 32px;
            }
        }
    </style>
<?php } 

?>

Troque o código icon32-posts-YOUR_POSTTYPE_NAME pelo nome do seu custom post type. Simples assim. Este código é apenas uma recomendação, sendo que você poderá logicamente usá-lo de outras formas, caso pretenda.

Mais informações e códigos para uso em plugins, no post do Matthias Kretschmann.

Até Já!