Um recurso muito bacana e fácil de ser usado em um tema WordPress é atribuir uma imagem ou ícone à cada categoria usada no blog. Veja abaixo exemplos de blogs que utilizam este recurso de imagem nas categorias para ter uma ideia de como é e simbora começar!
1) Entendendo a lógica de associação das imagens
A lógica é bem simples: basta a imagem possuir o mesmo slug da categoria. Ana, o que é slug? Slug é a parte de uma url que representa de forma fiel ou aproximada ao titulo da qual aquela página ou item é representado. É uma forma legível e de fácil assimilação tanto por nós que vamos ler o link, quanto uma máquina, como os mecanismos de busca do Google. Por exemplo, eu possuo uma categoria no blog chamada Moda & Beleza, portanto, o seu slug é moda-beleza, que foi criado automaticamente pelo wordpress (que ignorou o caractere especial " & ", o ampersand, para não ter conflito na url) assim que criei a categoria. Desta forma, a minha url da categoria é:
https://madlyluv.com/category/moda-beleza
Um slug também pode ser modificado quando quiser ou no momento em que uma categoria, tag ou post é criado. Portanto, antes de utilizar o recurso de associação de imagem, dê uma olhada em todas as suas categorias utilizadas e anote todos os slugs. Desta forma, quando as imagens forem criadas, cada uma terá o mesmo nome que o slug da sua respectiva categoria. Por exemplo, a minha imagem para o slug moda-beleza precisará ser moda-beleza.png.
2) O código
Em seu tema wordpress, procure o arquivo do qual contém o código de post (loop) de seu wordpress. Normalmente é o index.php, single.php ou em arquivos que contém nome loop ou content. Após encontrar, procure esta tag:
<?php the_category(); ?>
E substitua por:
<?php foreach((get_the_category()) as $category) {
echo '
<a href="'.get_category_link( $category->term_id ).'" title="'.$category->cat_name.'">
<img src="'.get_template_directory_uri().'/categorias/'.$category->category_nicename.'.png" />
</a>
';
}?>Entendendo o código
Já deu para notar minimamente que o código acima destrincha a chamada da categoria no post, no qual há o link da categoria, o get_category_link($category->term_id), onde usa o cat_name como nome de fato da categoria (seria no caso o "Moda & Beleza"). Dentro do link é chamado a pasta de nome categorias dentro da pasta do tema através da tag get_template_directory_uri(). Dentro da pasta das imagens é chamado o nome da imagem através de category_nicename, que é o slug, para em seguida vir a extensão da imagem (pode ser .png, .jpg, .svg etc, desde que todas as imagens tenham a mesma extensão).
Imagens apenas às categorias principais (opcional)
Este item é interessante para quando o blog possui várias subcategorias dentro de uma categoria só. A sacada é mais para o quesito de organização e também de simplificação, além de não ficar aquela samba louco de imagens para cada subcategoria específica (haja imaginação pra criar ícone pra cada uma). O código abaixo vai atribuir uma imagem apenas à categoria mãe, mas ainda sim vai continuando a direcionar para a categoria filha selecionada.
<?php foreach((get_the_category()) as $category) {
$parent = get_category($category->category_parent);
$parent_name = $parent->slug;
if ($parent->slug) {
echo '
<a href="'.get_category_link($category->term_id).'" title="'.$category->cat_name.'">
<img src="'.get_template_directory_uri().'/categorias/'.$parent->slug.'.png">
</a>
';
}
else {
echo '
<a href="'.get_category_link($category->term_id).'" title="'.$category->cat_name.'">
<img src="'.get_template_directory_uri().'/categorias/'.$category->slug.'.png">
</a>
';
}
}?>É só usar o código acima ao invés do primeiro código ensinado. O princípio é o mesmo, só manterá as imagens para as categorias principais. 😎
3) Listando as categorias (opcional)
É bem comum usar na sidebar uma área que mostra as categorias usadas no blog. O código abaixo mostra todas as categorias mães em atividade no blog. Pode inserir em sua sidebar ou em qualquer lugar no layout:
<?php $cats = get_categories('orderby=name&&order=asc&parent=0'); foreach ((array)$cats as $cat) { $catdesc = $cat->category_description;
echo '
<a href="'. get_category_link($cat).'">
<img src="'.get_template_directory_uri().'/categorias/'.$cat->slug.'.png" alt="'.$cat->cat_name.'" />
</a>
';
}?>Prontinho, agora é só ser feliz com suas categorias em forma de imagens. Agora é só estilizar através do CSS para que estas imagens fiquem em harmonia com o título do post! 😍
