Font Icons para Custom Post Types e Temas ~ WordPress 3.8

Se você conhece o WordPress há um bom tempo e tem acompanhado de perto sua evolução, ao instalar a versão 3.8, sem dúvida deve ter se surpreendido com a grande mudança feita na interface do painel administrativo. O design ficou muito mais limpo e moderno, coisa linda.

Entre as várias mudanças que ocorreram, uma delas é que agora foram adicionados Font Icons (chamados de Dashicons) no lugar das imagens que eram usadas anteriormente. Os ícones seguem um estilo flat, e combinam muito bem com o novo estilo dado à dashboard, e trazem vários benefícios, como por exemplo: são preparados para as poderosas telas de retina.

Bom, após conhecer os novos ícones, é claro que você vai querer utilizá-los ao desenvolver seus plugins e temas. Neste artigo, trago uma dica rápida para você que deseja fazer isso. Veja como é bem tranquilo.

Dashicons para Custom Post Types

Um dos parâmetros que você deve informar ao registrar um post type é o menu_icon. E para inserir o Font Icon (Dashicon) que você desejar, basta informar o nome de sua respectiva classe CSS.

Para descobrir qual é o nome da classe CSS que corresponde ao ícone desejado, você pode acessar o link: melchoyce.github.io/dashicons/. Nessa página você verá uma lista com todos os ícones disponíveis. Basta clicar no ícone para que ele seja selecionado e no topo do site você verá o nome da classe CSS, aí é só copiar esse nome e informá-lo ao parâmetro menu_icon.

<?php

register_post_type( 'lancamentos', array(
    // ...
    'menu_icon' => 'dashicons-list-view',
    // ...
) );

Dashicons para Temas no Front-End

Se você deseja utilizar os novos ícones no Front-End de um tema, poderá fazer isso também de forma muito simples. Basta passar o dashicons como uma dependência de sua folha de estilos na chamada da função wp_enqueue_style, como no exemplo abaixo:

<?php

function my_theme_enqueue_style() {
    wp_enqueue_style(
        'my-theme-style',
        get_stylesheet_uri(),
        array( 'dashicons' )
    );
}

add_Action( 'wp_enqueue_scripts', 'my_theme_enqueue_style' );

O código mostrado acima, irá se encarregar de chamar o CSS para os Dashicons sempre junto com o CSS do seu tema. Feito isso, basta voltar ao site do Dashicons, clicar no ícone que deseja utilizar, e depois clicar em "Copy CSS" para obter o código referente ao ícone selecionado, como mostrado na figura abaixo:

Com o código do ícone em mãos, agora basta utilizá-lo em um pseudo-elemento :before ou :after no CSS do seu tema, seguindo o exemplo:

.my-item:before {
    content: "\f163";
    font-family: "dashicons";
}

Conclusão

Não é de hoje que muitos encaram o WordPress como uma "espécie de framework" completo para desenvolver os mais diferentes tipos de aplicações Web. Neste artigo consideramos um recurso simples, mas que faz uma grande diferença na experiência do usuário, inclusive tornando seu tema ou plugin preparado para dispositivos com telas de alta definição. E vimos como o WordPress lida com isso, tornando o processo de desenvolvimento bem mais tranquilo, mesmo nesses "pequenos detalhes".

Espero que essas informações lhe sejam úteis. Qualquer dúvida, crítica ou sugestão, é só deixar um comentário abaixo.