Tags & Hacks Tutoriais

Associar uma imagem a uma categoria

19 de May de 2011

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:

heart


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)