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:


19/05/2011 ・ 13:24

Tamara, vc é mara… ótimo tuto, como sempre!

19/05/2011 ・ 13:37

Ai que legal Tamara!! Vou tentar colocar no meu! 🙂 Muito obrigada por compartilhar! :13:

19/05/2011 ・ 16:20

Que legal! Ótimo o seu tutorial!!!
Bom final de semana!
Bjuxxxxx

19/05/2011 ・ 18:38

Nossa, muito legal!
Adorei, um dia vou fazer!
Beijos

20/05/2011 ・ 11:02

Acho fofo assim :26:
Quando tiver meu domínio acho que vou colocar isso.
Ótima dica!

27/05/2011 ・ 12:57

Sou programador WordPress e até o momento desconhecia essa forma de fazer as imagens aparecer.

Muito bom seu blog, continue com o seu belo trabalho!

Rute
12/09/2011 ・ 19:35

QUE OTIMOOO!
como você deixa a imagem bem no meio do circulo? minha imagem fica meio que desalinhada, sempre muito em cima e sai até um pouquinho de fora…
Está óptimo esse tutorial :D:D:D
:21:

Taiara
02/11/2011 ・ 01:31

Tamara como faço para deixa-lo do lado da data? um pouco fora do post?
Beijos, ótimo tuto! 😉

19/03/2012 ・ 21:30

Voce so faz para wordspress

29/04/2012 ・ 20:36

Tamara, tô usando seu layout 3.0 de base e consegui adicionar as imgs pra categoria! Obrigada!!! <333333