Como adicionar ícones para tipos de post personalizados no WordPress

Gostaria de escolher novos ícones para tipos de post personalizados em seu painel de administração?

Ao fazer login no seu site WordPress, você vê entradas para posts, páginas e todos os tipos de posts personalizados na barra lateral. Por padrão, os tipos de post personalizados usarão o mesmo ícone que os posts, e isso pode ser difícil de classificar rapidamente.

Neste artigo, mostraremos como adicionar diferentes ícones para tipos de post personalizados no WordPress.

Por que adicionar ícones para tipos de post personalizados no WordPress?

Na maioria das vezes, você usa um post ou uma página ao trabalhar com seu site WordPress. No entanto, você pode usar tipos de post personalizados para criar outros tipos de conteúdo. Por exemplo, o WooCommerce usa um tipo de post personalizado chamado “Produto” para estocar sua loja.

Os tipos de post personalizados são listados na área de administração do WordPress ao lado de posts e páginas no menu do lado esquerdo. Cada item de menu no WordPress tem um ícone ao lado e eles vêm de uma fonte de ícones chamada Dashicons.

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

Dito isso, vamos dar uma olhada em como adicionar ícones para tipos de post personalizados no WordPress. Veja o que abordaremos neste tutorial:

• Adição de ícones para tipos de post personalizados com um plug-in
• Adição manual de ícones para tipos de post personalizados

Adição de ícones para tipos de post personalizados com um plug-in

Se você não tem experiência com o registro de tipos de post personalizados ou não está familiarizado com o código, recomendamos que use o plug-in Custom Post Type UI para criar tipos de post e taxonomias.

Criação de um Custom Post Type com um plug-in

Primeiro, você precisa criar um tipo de post personalizado. Se já tiver feito isso, pule para a seção “Como adicionar um ícone a um tipo de post personalizado com um plug-in” abaixo.

Depois de instalar e ativar o plug-in, você precisa ir para CPT UI ” Add/Edit Post Types para criar um novo tipo de postagem personalizado. Verifique se você está na guia “Add New Post Type” (Adicionar novo tipo de postagem).

Você precisa fornecer um slug para seu tipo de post personalizado, como “movies”. Em seguida, insira nomes no plural e no singular, como ‘books’ e ‘book’.”

Depois disso, clique no link que diz “Populate additional labels based on chosen labels” (Preencher rótulos adicionais com base nos rótulos escolhidos). Isso preencherá automaticamente os campos de rótulos adicionais abaixo e geralmente economizará seu tempo.

Como alternativa, você pode adicionar os rótulos manualmente na seção “Additional Labels” (Rótulos adicionais).

Em seguida, você pode rolar para baixo até a seção Settings (Configurações) e configurar diferentes atributos para o seu tipo de postagem. Cada opção vem com uma breve descrição que explica o que ela faz.

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

Abaixo das configurações gerais, você verá a opção de selecionar os recursos de edição compatíveis com esse tipo de postagem. Basta marcar as opções que você deseja que sejam incluídas.

Por fim, clique no botão “Add Post Type” (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 a interface do usuário de tipos de postagem personalizados, consulte o primeiro método em nosso guia sobre como criar um tipo de postagem personalizado no WordPress.

Adição de um ícone a um tipo de post personalizado com um plug-in

Depois de criar seu tipo de postagem personalizada, você pode escolher um ícone. Isso é simples porque o plug-in Custom Post Type UI oferece suporte a Dashicons por padrão.

Primeiro, vá para CPT UI ” Add/Edit Post Types e clique na guia “Edit Post Types” na parte superior da página. Certifique-se de que o tipo de postagem correto esteja selecionado no menu suspenso.

Depois de fazer isso, basta rolar para baixo até Configurações, próximo à parte inferior da mesma página, e localizar a seção “Ícone do menu”.

Agora você deve ver duas opções para adicionar um ícone ao tipo de post personalizado. O botão “Choose dashicon” permite que você escolha qualquer Dashicon e “Choose image icon” permite que você carregue ou escolha um ícone de imagem da sua biblioteca de mídia.

Para este tutorial, clicaremos no botão “Choose dashicon”.

Agora você pode navegar por centenas de ícones usando as setas na parte superior da janela pop-up.

Você também pode pesquisar um Dashicon. Para este tutorial, procuraremos por “book” (livro).

Quatro ícones correspondentes são exibidos, dois ícones do “Facebook” e dois ícones do “livro”. Basta clicar no ícone que você deseja usar.

A classe CSS do ícone selecionado será inserida automaticamente no campo “Ícone do menu”.

Certifique-se de rolar a tela para baixo e clicar no botão “Save Post Type” (Salvar tipo de postagem) para armazenar suas configurações.

Agora, volte ao painel de administração e localize o tipo de post personalizado na barra lateral esquerda.

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

Adição manual de ícones para tipos de post personalizados

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

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

Para este tutorial, role para baixo até a seção “Diversos” e clique no ícone “livro”.

Você será levado 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 é “Diversos” e a classe CSS é “dashicons-book”.

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

Agora você precisará adicionar algum código no mesmo local em que criou o tipo de post personalizado. Pode ser o arquivo functions.php do seu tema ou você pode ter usado um plug-in de snippet 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 “Books” e também adiciona um ícone de menu acrescentando 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 post personalizado usando o código acima, basta adicionar um dos seguintes snippets à linha 45.

'menu_icon'           => 'dashicons-book',

Como alternativa, 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 esse código, você precisa alterar para sua própria classe CSS do Dashicon ou URL do ícone da imagem.

Esperamos que este tutorial tenha ajudado você a aprender como adicionar ícones para tipos de post personalizados no WordPress. Talvez você também queira saber como manter seu site seguro ou conferir nossa lista de erros comuns do WordPress e como corrigi-los.

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