Madly Luv - O mLuv é um blog pessoal no qual aborda vários assuntos como design, músicas, literatura, arte, televisão etc. Desenvolvido e mantido por Ana Flávia Cador.

WP: Atribuindo imagens às categorias

Tutorial Wordpress

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!

Blog <a href="http://faltouacucar.com/" target="blank" rel="nofollow">Faltou Açucar</a>.
Blog <a href="http://fluffy.com.br/" target="blank" rel="nofollow">Fluffy</a>.
Blog <a href="http://conversandocomalua.com/" target="blank" rel="nofollow">Conversando com a Lua</a>.

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 é:

http://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. ::cool::

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! ::love::

Veja também...

Resenha: Protetor Solar Perfect Bright Milk, da Bioré
Além da Henna: Como ter reflexos dourados com Cassia Obovata
As ilustrações de Pauline (a.k.a. Punziella)

1 Comentário(s)

(1 pelo blog e pelo facebook)
  • luciana silva
    23 . 05 . 2016

    Amei,nossa você tirou todas minhas duvidas nesse post,amo muito seu blog,espero um dia cursar design e fazer template assim como você, grande beijo.

    Responder