Loop: mostrar imágenes por cada categoría

Siempre me he preguntado si en WP se podría conseguir lo que ciertos sites hacen: mostrar una imagen representando a una cierta categoría al lado del nombre, o bien simplemente sustituyéndolo.

Hoy veremos un sencillo código que nos permitirá recuperar una imagen por categoría a la que el artículo haya sido asignado, y ello ya sea en el índice de nuestro site o en la página single.php de la entrada.

Antes de nada debemos contar las categorías de nuestro site y hacernos con una imagen para cada una de ellas, preferiblemente en formato .png, aunque podremos usar cualquier otro formato (en el código que os propongo se usarán PNGs).

Una vez tengamos esas imágenes, hay que nombrarlas coherentemente a las categorías que representarán y emplazarlas en un directorio dentro de las imágenes de nuestro tema en uso. Por ejemplo, para la ocasión, “cat-icons” dentro de “images“.

Cuando estén allí, abriremos el archivo con el loop en el que queramos que cada artículo muestre las categorías a las que pertenece y pegaremos el siguiente código, sustituyendo a the_category:

<h3>Artículo categorizado en :</h3>
<ul>
	<?php foreach((get_the_category()) as $cat)
	{
	$catname =$cat->category_nicename;
	echo '<li><a href="' . bloginfo('url');
	echo '/category/';
	echo $catname;
	echo '">';
	echo '<img src="' . bloginfo('template_directory');
	echo '/images/cat-icons/';
	echo $catname;
	echo ".png" alt="$catname" border="0" />";
	echo $catname;
	echo "</a></li>n";
	}
	?>
</ul>

Guardaremos y cerraremos, y nos aseguraremos entonces de que nuestra estructura de “permalinks” o enlaces permanentes es cualquier otra distinta a la que viene por defecto. Podemos escoger, por ejemplo, la segunda opción que se nos presenta.

Con esto ya tendremos iconos específicos para nuestras categorías. Esperamos vuestros comentarios.

Comentarios
  1. Hola, justo estaba pensando en hacer esto, ahora bien, tengo una pregunta, como haría por ejemplo si necesito que un post este asignado a varias categorías pero tenga solo una imagen genérica que no es la de alguna de las categorías?

    Por ejemplo, Categoria 1: imagen1.png Categoria 2: imagen2.png si selecciono que el post va en la categoria 1 y 2 salga la imagen3.png ?

    Escrito el09/02/2010
  2. Hola @Dicinox, para ello puedes usar un conditional tag del tipo :

    <?php

    if(in_category(‘CategoriaEspecial’)){

    ?>

    <!–aquí algo de html linkado–>

    <?php

    }else{

    ?>

    <!–el código que te propongo–>

    <?php } ?>

    Y en CategoriaEspecial poner tu categoría.
    Traducido sería : “si éste post pertenece a la categoría especial (que tendrías que marcar cuando pertenezca a las otras dos a la vez), tráeme esta imagen linkada a tal url, sinó, usa el código”.

    Más info sobre the_category : http://codex.wordpress.org/Function_Reference/in_category

    Escrito el09/02/2010
  3. Hola, pues puse en practica tu consejo, sin embargo se me hizo mas facil utilizar el plugin Category Icons, tiene bastantes opciones para usarlas en posts, pages, sidebar, y un sin fin de cosas… Hechale un ojo:

    http://wordpress.org/extend/plugins/category-icons/

    Escrito el10/02/2010
  4. Gracias! Es justo lo que buscaba.
    Se podria hacer que la portada del blog fueran esas imagenes de la categoria?
    Es decir, al entrar salieran las imagenes de la categoria tipo catalogo y una descripcion, y al pinchar sobre ellas ya aparecieran los articulos referenciados en esas categorias..

    Ayss no se si me explico…
    De todas formas. Gracias.

    Escrito el11/02/2010
  5. Baduy

    Buenas! genial el codigo. Con las ctegorias me va genial. Pero estoy usando ahora una taxonomía, y me gustaria hacer lo mismo con sus categorias.

    ¿Como lo adapto?

    Gracias!

    Escrito el21/06/2010
  6. fefa

    que pasa si tengo una entrada asociada a dos categorias pero quiero que muestre la imagen de una de ellas?

    Escrito el24/08/2010

DEJA TU COMENTARIO