Adicionar imagens de taxonomia ou ícones de categoria ao seu site WordPress pode ajudar a destacar as categorias.
No entanto, o WordPress não oferece uma opção para fazer upload dessas imagens por padrão. Ele apenas exibe os nomes das categorias ou taxonomias nas páginas de arquivo. Isso pode parecer simples e sem graça.
Em nosso tutorial, mostraremos como adicionar imagens de taxonomia ou ícones de categoria ao WordPress. Você também aprenderá a exibi-los em suas páginas de arquivo, tornando seu site mais envolvente e fácil de usar.
Por que adicionar imagens de taxonomia no WordPress?
Por padrão, seu site WordPress não inclui uma opção para adicionar imagens para suas taxonomias, como categorias e tags (ou qualquer outra taxonomia personalizada).
Ele usa nomes de taxonomia em todos os lugares, incluindo os arquivos de categoria ou páginas de arquivo de taxonomia.
Isso parece sem graça.
Se suas páginas de taxonomia recebem muito tráfego de pesquisa, você pode querer torná-las mais envolventes.
Vimos páginas sem graça e com muito texto se transformarem em páginas envolventes apenas adicionando imagens relevantes. Não é porque as imagens eram especiais, mas porque os humanos preferem pistas visuais em vez de texto.
Você pode adicionar imagens de taxonomia ou ícones de categoria para tornar essas páginas mais fáceis de usar e envolventes.
Um bom exemplo disso é um site como o NerdWallet, que usa í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.
Aqui está um exemplo do site do Bankrate:
Dito isso, vamos ver como adicionar imagens de taxonomia no WordPress facilmente.
Adicione Facilmente Imagens de Taxonomia no WordPress
A primeira coisa que você precisa fazer é instalar e ativar o plugin Categories Images. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, você pode simplesmente ir para a página Posts » Categorias. Você notará que o plugin exibirá 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 até o final e você encontrará um formulário para fazer o upload da sua própria imagem de taxonomia.
Simplesmente clique no botão ‘Upload/Adicionar Nova Imagem’ para fazer o upload da imagem que você deseja usar para aquela categoria específica.
Não se esqueça de clicar no botão ‘Adicionar Categoria’ ou ‘Atualizar’ para salvar suas alterações.
Em seguida, você pode repetir o processo para fazer o upload de imagens para outras categorias. Você também pode fazer o upload de imagens para suas tags e quaisquer outras taxonomias.
Agora, o problema é que, após adicionar as imagens, se você visitar uma página de categoria, não verá sua imagem de categoria lá.
Para exibi-la, você precisará editar seu tema do WordPress ou tema filho ou adicionar o código usando o plugin WPCode.
Mostraremos ambos os métodos, e você pode escolher um que pareça mais fácil para você.
Opção 1. Exibir Ícones de Imagem de Categoria Usando WPCode (Recomendado)
Este método é mais fácil porque você não precisará descobrir qual arquivo de tema modificar, e você pode adicionar o código com segurança sem quebrar seu site.
Também é recomendado para usuários que estão usando um tema de bloco com suporte ao editor de site.
Primeiro, você precisa instalar e ativar o plugin WPCode. Para mais detalhes, veja nosso tutorial sobre como instalar um plugin do WordPress.
Após a ativação, vá para a página WPCode » + Adicionar Snippet e clique no botão Usar Snippet na caixa ‘Adicionar seu código personalizado (Novo Snippet)’.
Na próxima tela, dê um título ao seu snippet que ajude você a identificá-lo.
Depois disso, selecione snippet PHP como seu tipo de código.
Na caixa Visualização do Código, copie e cole o seguinte trecho de código:
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
}
Em seguida, role para baixo até a seção Inserção e escolha Shortcode como o método de Inserção.
Você notará que o WPCode exibe automaticamente um shortcode. No entanto, você também pode criar um shortcode personalizado para facilitar a memorização.
Em seguida, clique no botão ‘Copiar’ para o shortcode personalizado.
Agora você pode usar este shortcode para exibir a imagem da categoria em suas páginas de arquivo.
Adicionando Shortcode no Editor do Site
Se você estiver usando um tema de bloco com suporte ao editor do site, vá para a página Aparência » Editor para iniciar o Editor do Site.
Aqui, você pode adicionar um bloco de shortcode logo antes do bloco Título do Arquivo.
Agora cole o shortcode que você copiou anteriormente no bloco de shortcode.
Não se esqueça de salvar suas alterações para aplicá-las. Agora você pode visitar sua página de arquivo de categoria para ver o shortcode em ação.
Não se preocupe se a imagem não parecer correta. Mostraremos como corrigi-la mais tarde usando CSS personalizado.
Opção 2. Exibir Ícones de Imagem de Categoria Manualmente
Para este método, você precisará adicionar o código personalizado aos arquivos do seu tema WordPress.
Se esta for 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 o gerenciador de arquivos do seu hospedagem WordPress.
Uma vez conectado, você precisará encontrar o template responsável por exibir seus arquivos de taxonomia. Estes podem ser os arquivos archives.php, category.php, tag.php ou taxonomy.php.
Para mais detalhes, veja nosso guia sobre como encontrar quais arquivos editar em um tema WordPress.
Assim que encontrar o arquivo, você precisará baixá-lo para o seu computador e abri-lo em um editor de texto como o Bloco de Notas ou o TextEdit.
Agora cole o seguinte código onde você deseja exibir a imagem da sua taxonomia. Geralmente, você vai querer adicioná-lo antes do título da taxonomia ou da tag the_archive_title().
<?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
}
?>
Após adicionar o código, você precisa salvar este arquivo e enviá-lo de volta para o seu site usando FTP.
Agora você pode visitar a página de arquivo da taxonomia para ver como ela exibe a imagem da sua taxonomia. Veja como ficou em nossa página de arquivo de demonstração.
Agora, pode parecer estranho, mas não se preocupe. Você pode estilizar usando um CSS personalizado.
Estilizando Ícones de Categoria com CSS Personalizado
Depois de adicionar o Ícone de Categoria ou as imagens de Taxonomia ao seu tema WordPress, sua imagem pode não ficar muito boa.
Para corrigir isso, você precisará adicionar código CSS para alinhá-la corretamente.
Se esta é a sua primeira vez adicionando código CSS no WordPress, então dê uma olhada em nosso guia para iniciantes sobre como adicionar CSS personalizado no WordPress.
Aqui está o CSS personalizado que usamos para a imagem da taxonomia.
img.taxonomy-img {
float: left;
max-height: 100px;
max-width: 100px;
display: inline-block;
padding: 20px;
}
Dependendo do seu tema, você também pode precisar estilizar elementos ao redor, como o título do arquivo, o título da taxonomia e a descrição.
Simplesmente envolvemos nosso título e descrição do 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;
}
Veja 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, então você pode querer excluir categorias de produtos.
Simplesmente volte para a página de Imagens de Categorias na área de administração do WordPress e marque 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 estes úteis hacks e plugins de categoria para WordPress ou nosso artigo sobre como alterar a ordem das categorias 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.
Ivan
Alguma sugestão para outro plugin atualizado. Parece que o sugerido aqui não foi atualizado recentemente.
shiv
como adicionar imagens de categoria na barra lateral do WordPress como a do site wpbeginner "preciso de ajuda com"
pamela
E se eu quiser percorrer todos os termos e exibi-los em uma página
Gabrielle
Oi, estou usando este plugin em localhost.
Eu acho um uso estranho/interessante para este plugin:
Estendendo o menu padrão do WP, para links de categorias,
para mostrar links com imagens de fundo.
Alguém sabe como integrar este filtro do plugin,
no menu do wp para retornar
para cada menu?
O caso é complicado, preciso usar a classe Walker?
Jess
Como faço para exibir as imagens usadas no front-end? Tenho uma página de listagem e quero exibir a imagem da taxonomia sempre que essa página tiver essa taxonomia exibida. Não consigo encontrar nada que realmente me mostre como exibir a imagem no front-end. Tudo o que vejo é o rótulo da Taxonomia exibido, mas não a imagem.
Obrigado pela sua ajuda,
Jess
Harsha
Oi,
A razão pela qual acabei neste post é que eu pesquisei – featured content in wordpress
Na verdade, estou procurando uma maneira de melhorar o conteúdo relacionado no WordPress.
Devido à seleção de várias categorias e várias tags para posts, vejo que o WordPress fica confuso e não mostra o conteúdo relacionado como presumo.
Então, as taxonomias são uma maneira de melhorar como mostramos posts relacionados aos leitores.
E este plugin Taxonomy Images não é atualizado há 2 anos
WPBeginner Support
Taxonomias podem ser uma maneira de melhorar seus posts relacionados. Mas existem outras ferramentas que você pode usar para mesclar e editar em massa categorias e tags.
Admin
JW
Ótimo tutorial! Obrigado!
Infelizmente, parece que este plugin não é mais suportado. Você sabe se existe uma alternativa?
Ou o código ainda é válido?
Dan Horvat
A parte mais importante está faltando – como exibir essas imagens no front-end.
WPBeginner Support
Por favor, consulte a página do plugin para instruções detalhadas.
Admin
patrick raobelina
Para exibir a imagem:
$url = apply_filters( ‘taxonomy-images-queried-term-image-url’, ” );
if ( ! empty( $url ) ) {
echo ”;
}
Shinkov
Eu estava procurando um artigo que mostrasse como codificar isso em vez de usar um plugin
Gonzalo
Como exibir imagens de taxonomias no tema?
Eu usei o código, mas não funciona
print apply_filters( ‘taxonomy-images-queried-term-image’, ” );
Por favor, ajude?
Nicholas Worth
Faria mais sentido se o título fosse: “Melhor Plugin para Adicionar Imagens à Taxonomia no WordPress”, porque este não é realmente um tutorial sobre como adicionar imagens à taxonomia. Não quero ser desanimador, mas odeio chegar a artigos que afirmam ter informações, mas na realidade eles estão dizendo que outro cara sabe o que você esperava ouvir.
WPBeginner Support
Lamentamos que você se sinta assim. Por favor, diga-nos o que você quer dizer com como adicionar imagens à taxonomia? Talvez possamos ajudá-lo a encontrar a resposta certa.
Admin
Jacob Perl
Imagino que o que Nicholas pensou foi a mesma coisa que eu pensei quando encontrei este artigo: que seria um tutorial sobre como adicionar um campo de imagem personalizado às taxonomias manualmente via codificação, em vez de com um plugin. Ainda assim, o plugin parece legal… talvez eu dê uma olhada.
Luís Felipe
A mesma coisa que eu pensei, eu estava procurando um artigo que mostrasse como codificar isso em vez de usar um plugin
Mas este é um bom artigo de qualquer maneira.
lemonthirst
Estou encantado por ter encontrado este ótimo plugin, ele funciona como um encanto, encontrei alguns pequenos problemas em meus posts/taxonomias personalizadas, mas tudo está bem agora.
Obrigado, pessoal!
Mattia
Oi, tenho uma pergunta relacionada sobre taxonomias personalizadas: como você cria uma taxonomia personalizada que existe apenas dentro de um tipo de post personalizado específico (como o seu tipo de post personalizado "trabalho"), sem um plugin?
Meu problema é que, quando crio uma taxonomia personalizada, ela parece estar também sob os artigos normais ou os outros tipos de post personalizados...
Equipe Editorial
Você teria que usar register_taxonomy assim:
1-click Use in WordPress
Gênero é a taxonomia e livro será o tipo de post.
Admin
Mattia
Grazie!
I’ll try and let you know…
Banna
Oi,
Estamos usando isso,
Mas não conseguimos fazer funcionar com o ID da categoria.
Temos um ID de categoria que queremos exibir sua miniatura, por favor, ajude-me a fazer isso.
como obter imagem em miniatura usando ID de taxonomia
Por favor, me avise.
Obrigado
Banna Daxxip
Ruben Boehler
Desculpe, mas não consigo fazer este plugin funcionar… nenhuma saída. Talvez eu esteja fazendo algo errado?!
eu uso o plugin + este código e o conectei:
print apply_filters( ‘taxonomy-images-list-the-terms’, ”, array( ‘image_size’ => ‘detail’, ‘taxonomy’ => ‘company’, ‘after’ => ”, ‘after_image’ => ”, ‘before’ => ”, ‘before_image’ => ”, ) );
não estou obtendo absolutamente nenhuma saída… você poderia me ajudar a descobrir isso?
_mfields
@devinsays Incrível! Obrigado pela dica!
DanielPeiser
Parece interessante! E se eu tiver alguns posts que não tenham uma imagem em miniatura (ou imagem no post), e sempre houver a mesma imagem padrão carregada como miniatura nas páginas de arquivo: O plugin carregaria uma associada à categoria/tag?
wpbeginner
@DanielPeiser Você certamente pode configurá-lo para que faça isso. Basicamente, os passos seriam: Primeiro, verifique se a miniatura da postagem existe… Se não existir, verifique a imagem da taxonomia… se nenhuma delas existir, retorne a miniatura padrão.