Mejorando nuestro theme de WordPress: Creando columnas con todas nuestras categorías

Beware: This post was published 8 years ago and its content may be outdated.

Columnas en nuestro theme Default

Lo prometido es deuda, y ya dije que explicaría como mostrar todas las categorías en columnas, así que vamos allá.
En este tutorial partiremos del mismo código CSS que en el anterior, además de que usaremos las mismas clases para las columnas. Así que lo primero que haré es recordar un poco las cosas que tenemos que modificar de style.css y de index.php, para luego comenzar con las categorías y las columnas. Comenzaremos con index.php:

Vamos a la línea 11 y veremos:

<?php if (have_posts()) : ?>

Añadimos antes del ?>: if(is_home()):, dejando el código así:

<?php if (have_posts()) : if(is_home()): ?>

Ahora vamos a la línea 13 y veremos:

<?php while (have_posts()) : the_post(); ?>

Añadimos antes del while: else:, dejando el código así:

<?php else: while (have_posts()) : the_post(); ?>

Ahora pasamos a la línea 26, donde veremos:

<?php endwhile; ?>

Y añadimos antes del ?>: endif;, dejando el código así:

<?php endwhile; endif; ?>

Bien, a partir de ahora el código comprendido entre la línea 11 y la 13 se ejecutará sólo en el inicio del blog. Así que como ya podéis suponer, será aquí donde añadamos el código necesario para mostrar las columnas.

Ahora abrimos style.css y añadimos al final:

.columna-derecha { width:48%; float:right; clear:both; }
.columna-izquierda { width:48%; float:left; }

Bien, estos pasos son idénticos a los del tutorial anterior. Ahora ya pasamos a modificar de nuevo el archivo index.php y a mostrar todas las categorías en columnas. El código que añadamos deberá estar entre las líneas 11 y 13.

Lo primero que haremos será crear una variable que contenga todas las categorías. En realidad lo que haremos será crear una matriz que contenga un objeto por cada categoría, pero realmente las usaremos como si de variables se tratase. Así que añadimos la siguiente línea:

<?php $categorias=  get_categories(); $columna_derecha = true; ?>

Ahora $categorias almacena las categorías del blog. Esta función acepta parámetros, pero no voy a usar ninguno en el ejemplo. Si os interesa, tenéis más información acerca de la función aquí. También he creado la variable $columna_derecha, que nos indicará si estamos ante una columna del lado derecho o no.

Para mostrar todos los elementos de la matriz recurriremos a la función foreach, idónea para estos casos, así que añadimos:

<?php foreach($categorias as $key => $cat):?>
<?php endforeach; ?>

Como veis, he dejado una línea en blanco entre el inicio y el fin del bucle, ahí es donde situaremos el código a partir de ahora.

Lo próximo es hacer una consulta a la Base de Datos, esta vez buscamos artículos que estén en la categoría que se está mostrando en cada punto. Usaremos la misma función para mostrar los artículos y básicamente los mismos parámetros. Resumiendo, tenemos que añadir:

<?php $articulos[$key] = new WP_Query('cat='.$cat->cat_ID.'&showposts=1'); ?>
<div class="<?php if($columna_derecha) { echo 'columna-derecha'; $columna_derecha = false; } else { echo 'columna-izquierda'; $columna_derecha = true; } ?>">
<?php while ($articulos[$key]->have_posts()) : $articulos[$key]->the_post(); ?>
<?php endwhile; ?>
</div>

Creo que el código es bastante simple. $key almacena el índice de cada elemento de la matriz de las categorías, mientras que $cat almacena el valor. Ya he dicho que el valor era en realidad un objeto, así que tenemos que acceder a él como tal, es decir: $cat->variable/función.

A continuación, dependiendo del valor de $columna_derecha, le añadirá la clase correspondiente a la capa (div) que contendrá los artículos y alternará el valor de $columna_derecha.

Bien, después de esto hacemos una consulta a la Base de Datos. Para no repetir nombres de variables y evitar problemas, la variable que contendrá el artículo será una matriz, y el índice será el mismo que el de la categoría, así nos aseguramos de que sea único y no se repita.

El resto es idéntico al tutorial anterior a excepción de que cerraremos la capa (div) correspondiente a la columna. Como antes, he dejado una línea en blanco porque ahí es donde irá el código que mostrará el artículo.

Bien, a continuación ya sólo tenemos que mostrar el artículo, aprovechando la variable $columna_derecha para mostrarlo. Este paso es diferente en cada caso (si quieres mostrar la fecha usarás un código, si no quieres mostrar el título eliminarás una línea, etc), y en mi caso el código que usaré será el siguiente:

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
</div>

Y después de esto ya tenemos listo el theme y ya se mostrarán todas las categorías en columnas. Es muy recomendable leer el tutorial anterior para acabar de entender este tutorial.

Por último, podéis descargar el theme Default modificado aquí.