Veja como adicionar uma imagem para cada categoria e exibi-la quando mostrar uma postagem por exemplo.
Alguns sites podem querem mostrar um ícone ou imagem para ilustrar cada categoria e você pode fazer isso facilmente sem plugins, apenas se utilizando de um pouco de PHP.
Antes de começar
Temos que definir a pasta onde as imagens ou ícones vão ficar, esta pasta deve estar dentro da pasta do seu tema atual. Crie algo como ‘cat-img’.
Crie as imagens, cada uma para cada categoria e atenção para o nome: deve ser o nome simplificado ou nicename da categoria
Nicename ou slug é o nome simplificado sem acentuação e unindo as palavras com hífen. Por exemplo, uma categoria chamada ‘Músicas alemãs’ fica ‘musicas-alemas’.
Mostrar imagem da categoria na barra lateral ou Sidebar
No arquivo sidebar.php , podemos mostrar o nome da categoria atual da postagem sem link e a imagem da categoria:
<h2><?php the_category(', ') ?> </h2> <img src="<?php bloginfo('template_url'); ?>/cat-img/</code>?php foreach((get_the_category()) as $category) { echo $category->slug . '';} ;?><code>.jpg" alt="imagem" title="<?php echo $category->cat_name . ' '; ?>" "/>
O título da imagem é o nome da categoria e o texto alternativo ‘imagem’.
Mostrar imagem da categoria em Arquivos
No arquivo archive.php você pode inserir o mesmo código só que imediatamente acima da linha:
<?php while (have_posts()) : the_post(); ?>
Mostrar imagem da categoria em postagens
Como em single.php:
<img src="<?php bloginfo('template_url'); ?>/cat-img/<?php foreach((get_the_category()) as $category) { echo $category->slug . '';} ;?>.jpg" alt="." title="<?php echo $category->cat_name . ' '; ?>" "/>
Link da categoria com imagem
Podemos usar algo parecido com o código acima para criar uma classe ou identificador CSS nomeada com o nicename da categoria.
No arquivo single.php procure por:
<?php the_category(', ') ?>
E substitua por esse ecódigo:
<span class="estilo-<?php foreach((get_the_category()) as $category) { echo $category->slug . ' ';} ;?>"><?php the_category(', ') ?></span>
No arquivo style.css do tema temos que criar classes nomeadas de acordo com cada categoria. Neste exemplo, algo como:
.estilo-flores{ background: url(imagens/flores.jpg) no-repeat left top; }
No exemplo, usei um prefixo estilo– para melhor organizar as classes.
Conclusão
Estes recursos são muito usados para personalizar postagens dentro de categorias, a única desvantagem é ter que gerar as imagens, criar o código CSS etc. Mesmo que exista plugins para isso, ainda prefiro ver de perto como tudo funciona.
É isso!
2 comentários sobre "Imagem da categoria"
16.06.2015
Diana
24.06.2015