Cómo listar categorías con sus descripciones

En WordPress, siempre que creamos una categoría en el Panel de Administración, tenemos la posibilidad de añadirle una descripción.

Si estamos creando o modificando nuestro tema, puede ser interesante jugar con esta posibilidad y listar no sólo las categorías en forma de links, sino también, a su lado, la descripción de las mismas para dar una orientación extra al lector.

Así, podemos pensar en una página especial dedicada a ello, creando varias columnas donde estará la categoría (enlazada a su archivo de artículos correspondiente) y una descripción más o menos larga a continuación. O, simplemente, en un apartado en nuestra barra lateral, una lista más sencilla.

Veamos un ejemplo de cada:

El código general (para añadir a sidebar.php por ejemplo)

Este código lo podemos usar donde queramos. Por ejemplo, en sidebar.php, que deberemos abrir con un editor de texto, escoger las “div” donde queremos que aparezca nuestra lista y pegar el siguiente código.

<ul class="listando-categorias">
<?php $categories = get_categories('number=10');
foreach ($categories as $cat) {
echo "<li><a href="" . get_category_link( $cat->term_id ) . "">" . $cat->cat_name . "<div class="descripcion">". $cat->description ."</div></a></li>";
} ?>
</ul>

Hemos decidido llamar a 10 categorías, pero podemos por supuesto cambiar el número, así como especificar otros parámetros que modificarán qué categorías traemos y cómo (orden, creación de subcategorías, etc). En el Códex encontraremos todas las variables a usar al lado de number=10 de nuestro ejemplo.

Luego, en style.css, podremos darle un poco de color a la lista:

ul.listando-categorias{
	width:100%;
	background:#F0F7F7;
	padding:12px;
	list-style-type:none;
	border:1px solid #AEBFBE;
}
li.descripcion{
	font-style:italic;
	line-height:1em;
	color:#999;
}

Los estilos que hemos creado aquí son por supuesto provisionales, y los tendréis que modificar según vuestro tema.

Maquetar categorías con descripción en una página especial

Crearemos un nuevo archivo, vacío, y titulado categorias.php. Lo emplazaremos junto al resto de archivos de nuestro tema.

Pegaremos después el siguiente código en su interior:


<?php
/*
Template Name : Categorías en Columnas
*/
get_header(); ?>

<div class="contenido">

	<ul class="listando-categorias">
		<?php $categories = get_categories('number=10');
		foreach ($categories as $cat) {
		echo "<li><a href="" . get_category_link( $cat->term_id ) . "">" . $cat->cat_name . "<div class="descripcion">". $cat->description ."</div></a></li>";
		} ?>
	</ul>

</div>

<?php get_footer(); ?>

Ahora crearemos una página de WordPress, titulada por ejemplo “Las Categorías”, y escogeremos como template el llamado “Categorías en Columnas” que acabamos de adjuntar.

Salvaremos directamente la página, y nos quedaremos con su URL para añadirla a nuestro menú principal como un link rápido al que acceder junto al resto del menú:

<a href="http://nuestrosite.com/url-que-hemos-creado" title="todas nuestras categorías">Todas Nuestras Categorías</a>

Después, antes de visitar la página, iremos a style.css como antes y, hacia el final, para maquetar el resultado, podemos usar por ejemplo:

.contenido{
	width:100%;
	float:left;
}
.contenido ul{
	padding:1em
}
.contenido ul li{
	width:20%;
	height:150px;
	margin-right:5%;

}
.contenido ul li a{
	font-weight:bold;
	display:block;
	margin-bottom:1.5em;
}
li.descripcion{
	font-style:italic;
	line-height:1em;
	color:#999;
}

Lo tendremos por supuesto que acomodar al resto de nuestro diseño. Guardaremos y ya deberíamos poder disfrutar de una pagina exclusiva listando categorías.

DEJA TU COMENTARIO