Deseja exibir imagens de taxonomia ou ícones de categoria no WordPress?

Por padrão, o WordPress não vem com a opção de fazer upload de uma imagem de taxonomia ou ícone de categoria. Ele simplesmente exibe uma categoria ou nome de taxonomia nas páginas de arquivo.

Neste artigo, mostraremos como adicionar facilmente imagens de taxonomia ou ícones de categoria no WordPress. Também mostraremos como exibir imagens de taxonomia em suas páginas de arquivo.

Por que adicionar imagens de taxonomia no WordPress?

Por padrão, seu site WordPress não vem com a opção de adicionar imagens para suas taxonomias, como categorias e tags (ou qualquer outra taxonomia personalizada).

Ele simplesmente usa nomes de taxonomia em todos os lugares, incluindo os arquivos de categoria ou páginas de arquivo de taxonomia.

Isso parece meio simples e chato.

Se você recebe muito tráfego de pesquisa para suas páginas de taxonomia, convém torná-las mais atraentes.

Descubra o segredo para Hospedagem WordPress definitiva!

Conheça a Hospedagem WordPress Napoleon e desfrute de um serviço excepcional, otimizado para usuários exigentes como você. Aproveite agora!

Saiba mais

A maneira mais fácil de tornar uma página mais interessante é adicionando imagens. Você pode adicionar imagens de taxonomia ou ícones de categoria para tornar essas páginas mais amigáveis ​​e envolventes.

Um bom exemplo disso é alguns sites que usam ícones de categoria em seu cabeçalho:

Você também pode usá-lo para criar belas seções de navegação em sua página inicial:

Dito isso, vamos dar uma olhada em como adicionar facilmente imagens de taxonomia no WordPress.

Adicione facilmente imagens de taxonomia no WordPress

A primeira coisa que você precisa fazer é instalar e ativar o plugin Categories Images. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin no WordPress.

Após a ativação, você pode simplesmente ir para a página Posts » Categorias . Você notará que o plugin mostrará uma imagem de espaço reservado para suas categorias existentes.

Para escolher seu próprio ícone de categoria, você precisa clicar no link “Editar” abaixo de uma categoria.

Na página Editar categoria, role para baixo e você encontrará um formulário para fazer upload de sua própria imagem de taxonomia.

Basta clicar no botão “Upload/Add image” para carregar a imagem que deseja usar para essa categoria específica.

Não se esqueça de clicar no botão “Atualizar” para salvar suas alterações.

Em seguida, você pode repetir o processo para fazer upload de imagens para outras imagens de categoria. Você também pode fazer upload de imagens para suas tags e quaisquer outras taxonomias.

Descubra o segredo para Hospedagem WordPress definitiva!

Conheça a Hospedagem WordPress Napoleon e desfrute de um serviço excepcional, otimizado para usuários exigentes como você. Aproveite agora!

Saiba mais

Agora, o problema é que, depois de adicionar as imagens, se você visitar uma página de categoria, não verá sua imagem de categoria lá.

Para exibi-lo, você precisará editar seu tema WordPress ou tema filho . Se esta é a primeira vez que você edita arquivos do WordPress, talvez queira ver nosso guia sobre como copiar e colar código no WordPress .

Primeiro, você precisará se conectar ao seu site WordPress usando um cliente FTP ou seu gerenciador de arquivos de hospedagem WordPress.

Uma vez conectado, você precisará encontrar o modelo responsável por exibir seus arquivos de taxonomia. Podem ser arquivos archives.php, category.php, tag.php ou taxonomy.php.

Para obter mais detalhes, consulte nosso guia sobre como encontrar e quais arquivos editar em um tema do WordPress.

Depois de encontrar o arquivo, você precisará baixá-lo para o seu computador e abri-lo em um editor de texto como o Bloco de Notas , TextEdit ou Notepad++.

Agora cole o código a seguir onde você deseja exibir sua imagem de taxonomia. Normalmente, você gostaria de adicioná-lo antes do título ou na tag the_archive_title()  de taxonomia.


<?php if( is_category() ) { ?>
<div class="taxonomy-image">
<img class="taxonomy-img" src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>" alt="" / >
</div>
<?php
} else {
//do nothing
}
?>

Depois de adicionar o código, você precisa salvar este arquivo e enviá-lo de volta ao seu site usando FTP.

Agora você pode visitar a página de arquivo de taxonomia para vê-la exibir sua imagem de taxonomia. Aqui está como ficou em nossa página de arquivo de demonstração.

Agora, ainda pode parecer um pouco estranho, mas não se preocupe. Você pode estilizar isso usando um pouco de CSS personalizado .

Aqui está o CSS personalizado que usamos para a imagem de taxonomia.


img.taxonomy-img {
float: left;
max-height: 100px;
max-width: 100px;
display: inline-block;
}

Dependendo do seu tema, você também pode precisar estilizar elementos ao redor, como título e descrição da taxonomia.

Simplesmente agrupamos o título e a descrição do nosso arquivo de taxonomia em um elemento <div> e adicionamos uma classe CSS personalizada. Em seguida, usamos o seguinte código CSS para ajustar o título e a descrição.


.taxonomy-title-description {
display: inline-block;
padding: 18px;
}

Aqui está como ficou depois em nosso site de teste.

Excluir taxonomias da exibição de imagens de taxonomia

Agora, alguns usuários podem querer usar imagens de taxonomia apenas para taxonomias específicas.

Por exemplo, se você administra uma loja online usando o WooCommerce, pode querer excluir categorias de produtos.

Basta voltar à página do plugin “Categories Images” na área de administração do WordPress e verificar as taxonomias que deseja excluir.

Não se esqueça de clicar no botão “Salvar alterações” para armazenar suas configurações.

Esperamos que este artigo tenha ajudado você a aprender como adicionar facilmente imagens de taxonomia no WordPress. Você também pode querer ver nossas dicas sobre como obter mais tráfego dos mecanismos de pesquisa.

Para usuários do Império WP, o Napoleon oferece CPU dedicados, cPanel, Contas de E-mails Ilimitadas, Temas Premium para WordPress, Licenças Pro do Elementor e Divi Builder, certificados SSL gratuitos, Backup gratuito, CDN grátis. Clique Aqui!

Deixe uma resposta

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.