Tutoriais  19/05/2011 

Associar uma imagem a uma categoria

Mostra uma imagem no lugar do nome da categoria.

Mostrar imagens de todas as categorias de cada post

Vamos supor que você tenha mais de uma categoria associada a um post e queira mostrar uma imagem para cada uma delas. Para isso, adicione onde quer que as imagens da categoria apareçam (index.php, single.php...):

<?php foreach((get_the_category()) as $cat)
{
$catname =$cat->category_nicename;
echo "<a href=\"/category/";
echo $catname;
echo "/\">";
echo "<img src=\"/wp-content/cat-icons/";
echo $catname;
echo ".png\" alt=\"$catname category image\" /></a>\n";
}
?>

Crie uma pasta com o nome cat-icons dentro da pasta "wp-content".

As imagens que você dará para cada categoria deverão ter o nome da categoria. Por exemplo, a minha categoria "Photos", tem uma imagem com o nome "photos.png". Se quiser salvar as imagens em outro formato como jpeg por exemplo, basta substituir na linha 9 .png por .jpeg

Envie as imagens de cada categoria para /wp-content/cat-icons.

Tutorial original: http://www.jtpratt.com

Mostrar apenas uma imagem por post

Eu tenho várias categorias para cada post e queria mostrar a imagem apenas da categoria parent, ou seja a categoria mãe, então modifiquei o código anterior. Veja um exemplo, a categoria "Blog" é a parent, a mãe, as demais mostradas, são child, ou seja as categorias filhas:

Então para associar uma imagem para a categoria "Blog" na hora de fazer o post eu marco "Blog" e se desejar uma ou mais das categorias filhas.

Para mostrar a imagem, adicione onde quer que as imagens da categoria apareçam (index.php, single.php...):

<?php $parentscategory =""; foreach((get_the_category()) as $category){
if ($category->category_parent == 0) {
$catname =$category->category_nicename;
echo "<a title=\"Categoria $catname\" href=\"/category/";
echo $catname;
echo "/\">";
echo "<img src=\"/wp-content/cat-icons/";
echo $catname;
echo ".png\" alt=\"$catname category image\"/></a>\n";
}
}
echo substr($parentscategory,0,-2); ?>

Modifique da mesma forma que a primeira parte do tutorial e configure o CSS como desejar. O resultado será esse:


Leia Também

Deixe seu comentário

Sara
24/09/2014 ・ 15:19

<img src="/timthumb.php?src=&h=240&w=268″ class=”img-thumb”>

<a href="” class=”animated”>
category_parent == 0) {
$catname =$category->category_nicename;
echo ““;
echo “\n”;
}
}
echo substr($parentscategory,0,-2); ?>

Eu coloquei assim…

    26/09/2014 ・ 14:33

    Seu código está bem diferente do que o que coloquei no tutorial. Use o do tutorial que vai dar certo.

Sara
24/09/2014 ・ 15:20

Puts, ficou faltando código -.-

03/11/2014 ・ 13:17

Não consegui 🙁 Coloquei o segundo código… não aparece absolutamente nada. Nenhum erro de programação ou imagem quebrada… nadinha 🙁 O primeiro código funciona, mas eu queria deixar só as principais, como o seu. Não alterei nada no código :/

03/11/2014 ・ 14:28

Esquece o comentário anterior! Consegui! XD Eu não tinha entendido que eu precisava selecionar a categoria pai também para poder aparecer a imagem escolhida XD Agora esta resolvido 😉

Juliano
05/11/2014 ・ 00:53

Muito bom seu artigo!
Tenho uma dúvida… Tenho um site de notícias, onde criei algumas categorias para poder destacar as notícias na minha home. Tenho também posts relacionados a colunistas e muita das vezes quero associar um post a um destaque da página inicial e quero associar a um colunista. O que acontece é que com esse seu código fica com duas imagens. Tem como ficar apenas com a imagem do colunista? Tem uma solução?

Obrigado e Parabéns pelo compartilhamento de seu conhecimento.

    06/11/2014 ・ 06:03

    Para usar esse código você até pode colocar mais de uma categoria e aparecer apenas uma imagem, porém, só uma dessas categorias pode ser “mãe” as outras terão que ser “filhas”.

Manuelle
25/02/2015 ・ 15:01

Oi Tamara. Flor, as imagens não aparecem. Invés disso aparece a imagem quebrada. Mas ta tudo certo inclusive o nome da categoria esta igual ao da imagem…pode me ajudar?

    26/02/2015 ・ 13:12

    Se a imagem está quebrada é porque você colocou o diretório errado no código. Dá uma revisada nisso e olha se não apagou sem querer uma aspa ou outros detalhes. Esse código funciona corretamente e é o mesmo que tenho aqui no blog 😉

Rodrigo
22/03/2015 ・ 17:24

Não sei o q fiz errado, mas não funcionou pra mim.

Minhas categorias não estão atreladas a nenhum “pai” (não sei se isso pode ter a ver)