Como Adicionar Ícones para Tipos de Postagem Personalizados no WordPress

Por padrão, todos os tipos de postagem personalizados se parecem, o que pode ser confuso. Ícones exclusivos podem ajudá-lo a identificar rapidamente diferentes tipos de conteúdo.

Além disso, obter os ícones certos para seus tipos de postagem personalizados pode fazer uma grande diferença na navegação do seu painel de administração do WordPress. Ao fazer login, você verá entradas para posts, páginas e tipos de postagem personalizados na barra lateral.

Neste artigo, mostraremos como adicionar ícones diferentes para seus tipos de postagem personalizados.

Por que Adicionar Ícones para Tipos de Postagem Personalizados no WordPress?

Geralmente, você usa um post ou uma página ao trabalhar com seu site WordPress. No entanto, você pode criar outros tipos de conteúdo usando tipos de postagem personalizados.

Por exemplo, WooCommerce usa um tipo de postagem personalizado chamado 'Produto' para gerenciar seu estoque.

Tipos de postagem personalizados são listados na área de administração do WordPress ao lado de posts e páginas no menu esquerdo. Cada item de menu no WordPress tem um ícone ao lado, que vem de uma fonte de ícones chamada Dashicons.

O problema é que todos os tipos de postagem personalizados usarão o mesmo ícone que os posts. Portanto, se você tiver vários tipos de postagem personalizados, será mais fácil encontrar o correto se todos tiverem ícones diferentes.

Com isso em mente, mostraremos como adicionar ícones para tipos de postagem personalizados no WordPress. Veja o que abordaremos neste tutorial:

• Adicionando Ícones para Tipos de Postagem Personalizados com um Plugin
• Adicionando Ícones para Tipos de Postagem Personalizados Manualmente

Pronto? Vamos começar.

Adicionando Ícones para Tipos de Postagem Personalizados com um Plugin

Se você é novo no registro de tipos de postagem personalizados ou não está familiarizado com código, recomendamos o uso do Custom Post Type UI plugin para criar tipos de postagem e taxonomias.

Criando um Tipo de Postagem Personalizado com um Plugin

Primeiro, você precisará criar um tipo de postagem personalizado. Se você já fez isso, pode pular para a seção ‘Adicionando um Ícone a um Tipo de Postagem Personalizado com um Plugin’ abaixo.

Assim que instalar e ativar o plugin, navegue até CPT UI » Adicionar/Editar Tipos de Postagem para criar um novo tipo de postagem personalizado. Em seguida, certifique-se de estar na aba ‘Adicionar Novo Tipo de Postagem’.

Em seguida, você precisará fornecer um slug para o seu tipo de postagem personalizado, como ‘filmes’. Abaixo disso, insira os nomes plural e singular, como ‘livros’ e ‘livro’.

Depois disso, você vai querer clicar no link que diz, ‘Popular rótulos adicionais com base nos rótulos escolhidos’. Isso preencherá automaticamente os campos de rótulos adicionais abaixo e geralmente economizará seu tempo.

Alternativamente, você pode adicionar manualmente os rótulos à seção ‘Rótulos Adicionais’.

Em seguida, vamos rolar para baixo até a seção ‘Configurações’ e configurar diferentes atributos para o seu tipo de postagem. Cada opção tem uma breve descrição explicando sua função.

Por exemplo, você pode escolher como classificar o tipo de postagem e se deve torná-lo hierárquico.

Abaixo das configurações gerais, você verá opções para selecionar quais recursos de edição este tipo de postagem suportaria. Simplesmente marque as opções que você deseja que sejam incluídas.

Finalmente, prossiga e clique no botão ‘Adicionar Tipo de Postagem’ para salvar e criar seu tipo de postagem personalizado.

Para obter instruções mais detalhadas sobre como criar um tipo de postagem personalizado usando o Custom Post Type UI, você pode consultar o primeiro método em nosso guia sobre como criar um tipo de postagem personalizado no WordPress.

Adicionando um Ícone a um Tipo de Postagem Personalizado com um Plugin

Depois de criar seu tipo de postagem personalizado, é hora de escolher um ícone. Esta etapa é fácil porque o plugin Custom Post Type UI suporta Dashicons por padrão.

Primeiro, você precisará acessar CPT UI » Adicionar/Editar Tipos de Postagem e clicar na aba ‘Editar Tipos de Postagem’ no topo da página. A partir daqui, certifique-se de que o tipo de postagem correto está selecionado no menu suspenso.

Depois de fazer isso, basta rolar para baixo até Configurações, perto da parte inferior da mesma página, e localizar a seção ‘Ícone do Menu’.

Você agora deve ver duas opções para adicionar um ícone ao tipo de postagem personalizado.

O botão ‘Escolher dashicon’ permite que você escolha qualquer Dashicon, e ‘Escolher ícone de imagem’ permite que você carregue ou escolha um ícone de imagem de sua biblioteca de mídia.

Para este tutorial, clicaremos no botão ‘Escolher dashicon’.

Agora você pode navegar por centenas de ícones usando as setas na parte superior do pop-up. Além disso, você pode pesquisar por um Dashicon.

Para este tutorial, pesquisaremos por ‘book’.

Em seguida, encontramos 4 ícones correspondentes, 2 ícones de ‘Facebook’ e 2 ícones de ‘book’. Você pode simplesmente clicar naquele que deseja usar.

A classe CSS do ícone selecionado será automaticamente inserida no campo ‘Ícone do Menu’.

Em seguida, vamos garantir que você role para baixo e clique no botão ‘Salvar Tipo de Postagem’ para armazenar suas configurações.

A partir daqui, você pode voltar ao seu painel de administração e localizar o tipo de postagem personalizado na barra lateral esquerda.

Você deve ver o novo ícone ao lado dos tipos de postagem no menu.

Adicionando Ícones para Tipos de Postagem Personalizados Manualmente

Se você criou seus tipos de postagem personalizados manualmente com código, então você também terá que adicionar os ícones manualmente.

Primeiro, vamos visitar o site Dashicons para encontrar o ícone que você deseja usar para o seu tipo de postagem.

Para este tutorial, rolaremos para baixo até a seção ‘Miscellaneous’ e clicaremos no ícone ‘book’.

Em seguida, você chegará a uma página com mais informações sobre o ícone, como o nome da categoria e a classe CSS do ícone.

Por exemplo, na captura de tela a seguir, a categoria é ‘Miscellaneous’ e a classe CSS é ‘dashicons-book’.

Vamos copiar a classe CSS para a área de transferência.

Agora, você precisará adicionar algum código ao local onde você criou o tipo de postagem personalizado. Esse pode ser o arquivo functions.php do seu tema, ou você pode ter usado um plugin de trecho de código como o WPCode.

Para ver isso em ação, o trecho de código abaixo cria um tipo de postagem personalizado chamado 'Livros' e também adiciona um ícone de menu adicionando uma classe CSS Dashicons na Linha 45.

/*
* Creating a function to create our CPT
*/
  
function custom_post_type() {
  
// Set UI labels for Custom Post Type
    $labels = array(
        'name'                => _x( 'Books', 'Post Type General Name', 'twentytwentyone' ),
        'singular_name'       => _x( 'Book', 'Post Type Singular Name', 'twentytwentyone' ),
        'menu_name'           => __( 'Books', 'twentytwentyone' ),
        'parent_item_colon'   => __( 'Parent Book', 'twentytwentyone' ),
        'all_items'           => __( 'All Books', 'twentytwentyone' ),
        'view_item'           => __( 'View Book', 'twentytwentyone' ),
        'add_new_item'        => __( 'Add New Book', 'twentytwentyone' ),
        'add_new'             => __( 'Add New', 'twentytwentyone' ),
        'edit_item'           => __( 'Edit Book', 'twentytwentyone' ),
        'update_item'         => __( 'Update Book', 'twentytwentyone' ),
        'search_items'        => __( 'Search Book', 'twentytwentyone' ),
        'not_found'           => __( 'Not Found', 'twentytwentyone' ),
        'not_found_in_trash'  => __( 'Not found in Trash', 'twentytwentyone' ),
    );
      
// Set other options for Custom Post Type
      
    $args = array(
        'label'               => __( 'books', 'twentytwentyone' ),
        'description'         => __( 'Book reviews', 'twentytwentyone' ),
        'labels'              => $labels,
        // Features this CPT supports in Post Editor
        'supports'            => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'comments', 'revisions', 'custom-fields', ),
        // You can associate this CPT with a taxonomy or custom taxonomy. 
        'taxonomies'          => array( 'genres' ),
        /* A hierarchical CPT is like Pages and can have
        * Parent and child items. A non-hierarchical CPT
        * is like Posts.
        */
        'hierarchical'        => false,
        'public'              => true,
        'show_ui'             => true,
        'show_in_menu'        => true,
        'show_in_nav_menus'   => true,
        'show_in_admin_bar'   => true,
        'menu_position'       => 5,
        'menu_icon'           => 'dashicons-book',
        'can_export'          => true,
        'has_archive'         => true,
        'exclude_from_search' => false,
        'publicly_queryable'  => true,
        'capability_type'     => 'post',
        'show_in_rest' => true,
  
    );
      
    // Registering your Custom Post Type
    register_post_type( 'books', $args );
  
}
  
/* Hook into the 'init' action so that the function
* Containing our post type registration is not 
* unnecessarily executed. 
*/
  
add_action( 'init', 'custom_post_type', 0 );

Para personalizar o ícone ao registrar um tipo de postagem personalizado usando o código acima, basta adicionar um dos seguintes trechos na Linha 45.

'menu_icon'           => 'dashicons-book',

Alternativamente, você pode adicionar um ícone de imagem à sua 'Biblioteca de Mídia' e usar o URL do ícone em vez da classe CSS:

'menu_icon'           => 'http://www.example.com/wp-content/uploads/2022/08/your-cpt-icon.png',

Os espaços extras nesses trechos são intencionais e garantirão que o código se alinhe perfeitamente quando você o colar no bloco de código maior acima.

Lembre-se de que, ao usar este código, você deve alterá-lo para sua própria classe CSS Dashicon ou URL de ícone de imagem.

Aí está!

Esperamos que este tutorial tenha ajudado você a aprender como adicionar ícones para tipos de postagem personalizados no WordPress. Em seguida, você também pode querer conferir nossos guias sobre como incluir tipos de postagem personalizados nos resultados de pesquisa do WordPress e como alterar/converter tipos de postagem personalizados no WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.