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]<?php if (have_posts()) : ?>[/php]

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

[php]<?php if (have_posts()) : if(is_home()): ?>[/php]

Ahora vamos a la línea 13 y veremos:

[php]<?php while (have_posts()) : the_post(); ?>[/php]

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

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

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

[php]<?php endwhile; ?>[/php]

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

[php]<?php endwhile; endif; ?>[/php]

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:

[css]
.columna-derecha { width:48%; float:right; clear:both; }

.columna-izquierda { width:48%; float:left; }
[/css]

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]
<?php $categorias= get_categories(); $columna_derecha = true; ?>
[/php]

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]
<?php foreach($categorias as $key => $cat):?>

<?php endforeach; ?>
[/php]

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]
<?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>
[/php]

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:

[php]
<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>
[/php]

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í.

En casi todos los periódicos y en muchísimos portales podemos ver que la página de inicio se compone de algunos artículos de cada sección de la página. Obviamente no se escriben el mismo número de artículos en cada categoría ni se escribe un artículo para cada categoría de forma diaria, así que no sería de extrañar ver que los últimos 10 artículos que se han escrito en una blog sean de dos o tres categorías, seguramente menos de las que tiene en total en blog.

Aún así seguimos viendo como estas páginas tienen una columna para cada categoría y vemos los mismos artículos en cada columna. ¿Cosa de magia? Ni por asomo, y hoy voy a explicar cómo hacer esto en nuestro WordPress.

Durante el tutorial modificaré el theme Default de WordPress, aunque el estilo a dos columnas no será muy legible, así que os aconsejo que a la hora de aplicar estas modificaciones, lo hagáis en otro theme, aunque siempre podéis modificar primero el Default para aprender y coger práctica.

Lo primero que haremos será modificar el archivo index.php del theme Default para mostrar la nueva estructura de la página de inicio sólo si estamos en la página de inicio. Hay que tener en cuenta que si no existen los archivos page.php y single.php, se usará index.php para mostrar el contenido correspondiente. Por eso es muy recomendable añadir esta pequeña condición siempre que queramos mostrar algo en la página de inicio.

Vamos a la línea 11 y veremos:

[php]<?php if (have_posts()) : ?>[/php]

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

[php]<?php if (have_posts()) : if(is_home()): ?>[/php]

Ahora vamos a la línea 13 y veremos:

[php]<?php while (have_posts()) : the_post(); ?>[/php]

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

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

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

[php]<?php endwhile; ?>[/php]

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

[php]<?php endwhile; endif; ?>[/php]

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.

En este tutorial mostraremos 4 categorías. En realidad podemos mostrar todas las que queramos, y probablemente mañana o dentro de un par de días publicaré la continuación de este tutorial explicando como mostrar todas las categorías del blog, pero de momento comenzaremos con algo más fácil.

Las 4 categorías que voy a mostrar yo son: Ati (ID: 13), Nvidia (ID: 10), PC (ID: 16), Mac (ID: 14).

El código que usaremos para hacer las consultas es el siguiente:

[php]
<?php $consulta = new WP_Query(‘parámetros’); ?>

<?php while ($consulta->have_posts()) : $consulta->the_post(); ?>
<!– Estructura de los artículos, la veremos más adelante –>
<?php endwhile; ?>
[/php]

Lo primero que haremos será añadir el código que tenemos arriba en la línea 12. Obviamente el código no funcionará, ya que los parámetros son incorrectos y no mostramos nada, así que tenemos que modificar los parámetros. Los parámetros se separan con &, como en casi todas las funciones de WordPress, en este tutorial vamos a usar dos parámetros.

Bien, el parámetro cat nos permite establecer la ID de la categoría a la cual deben pertenecer los artículos que vamos a mostrar, es decir, nos permite filtrar los artículos, así que usándola podremos mostrar sólo los artículos de cierta categoría.

El segundo parámetro que usaremos es el parámetro showposts, que nos permite establecer el número de artículos que vamos a mostrar, en este tutorial yo mostraré un único artículo por categoría, siendo éste el más reciente de todos los de la categoría.

Así que los parámetros tendrán el siguiente aspecto: cat=ID&showposts=1. Como vamos a usar el mismo código para cada categoría, tendremos que realizar algunos cambios únicos en cada código, y modificar el primer parámetro. Donde pone ID en los parámetros, tenéis que poner la ID de la primera categoría que queréis mostrar, así que en mi caso, y para mostrar la categoría Ati, el código quedaría así:

[php]
<?php $articulos_ati = new WP_Query(‘cat=13&showposts=1’); ?>

<?php while ($articulos_ati->have_posts()) : $articulos_ati->the_post(); ?>

<?php endwhile; ?>
[/php]

Como podéis ver, he cambiado el nombre de la variable $consulta. Como ya he dicho, cada código tiene que ser único, y aunque en realidad deberíamos poder usar el mismo nombre para la variable de cada consulta, es más recomendable usar nombres diferentes, así que yo usaré siempre un nombre formado de la siguiente forma: artículo_nombrecortodelacategoria. Así que usaré: articulos_ati, articulos_nvidia, articulos_pc y articulos_mac.

Sigamos. Veréis que he dejado una línea en blanco entre el while y el endwhile. En esta línea mostraremos el contenido que queremos de nuestro artículo de forma similar a como lo haríamos de normal, es decir, mediante las funciones: <?php the_title(); ?>, <?php the_content(); ?>, etc.

Para darle el aspecto de columnas y poder maquetar de forma más fácil, crearé una capa (div) que contenga el artículo y dentro de ella mostraré el título y el contenido. Esto es opcional y este paso podéis hacerlo como queráis. Al final en mi caso el código queda así:

[php]
<?php $articulos_ati = new WP_Query(‘cat=13&showposts=1’); ?>

<?php while ($articulos_ati->have_posts()) : $articulos_ati->the_post(); ?>
<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>
<?php endwhile; ?>
[/php]

Ya tenemos una de las categorías listas, nos quedan 3. Para mostrarlas repetimos los pasos anteriores, o copiamos y pegamos el código 3 veces, modificando en cada caso el nombre de la variable $consulta y la ID de la categoría. Al final en mi caso el código queda así:

[php]
<?php $articulos_ati = new WP_Query(‘cat=13&showposts=1’); ?>

<?php while ($articulos_ati->have_posts()) : $articulos_ati->the_post(); ?>
<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>
<?php endwhile; ?>

<?php $articulos_nvidia = new WP_Query(‘cat=10&showposts=1’); ?>

<?php while ($articulos_nvidia->have_posts()) : $articulos_nvidia->the_post(); ?>
<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>
<?php endwhile; ?>

<?php $articulos_pc = new WP_Query(‘cat=16&showposts=1’); ?>

<?php while ($articulos_pc->have_posts()) : $articulos_pc->the_post(); ?>
<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>
<?php endwhile; ?>

<?php $articulos_mac = new WP_Query(‘cat=14&showposts=1’); ?>

<?php while ($articulos_mac->have_posts()) : $articulos_mac->the_post(); ?>
<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>
<?php endwhile; ?>
[/php]

Ahora sólo nos queda el código HTML/CSS para crear las columnas. Vamos a modificar el CSS del theme, hay que tener en cuenta que el código CSS es único en cada theme, por lo que puede que el que pongo aquí no os valga a vosotros en vuestro theme, eso sí, funcionará a la perfección en el theme Default, así que vamos allá.

Después de cada <?php endwhile; ?> que hemos añadido, podremos un </div>, para cerrar las capas que vamos a abrir a continuación.

Además, antes de cada <?php $consulta = new WP_Query… ?> añadiremos <div class=”columna-izquierda”> y <div class=”columna-derecha”>, alternando cada vez una de ellas y comenzando por la columna derecha, de forma que nuestro código quedará así:

[php]
<div class="columna-derecha">
<?php $articulos_ati = new WP_Query(‘cat=13&showposts=1’); ?>

<?php while ($articulos_ati->have_posts()) : $articulos_ati->the_post(); ?>
<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>
<?php endwhile; ?>
</div>
<div class="columna-izquierda">
<?php $articulos_nvidia = new WP_Query(‘cat=10&showposts=1’); ?>

<?php while ($articulos_nvidia->have_posts()) : $articulos_nvidia->the_post(); ?>
<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>
<?php endwhile; ?>
</div>
<div class="columna-derecha">
<?php $articulos_pc = new WP_Query(‘cat=16&showposts=1’); ?>

<?php while ($articulos_pc->have_posts()) : $articulos_pc->the_post(); ?>
<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>
<?php endwhile; ?>
</div>
<div class="columna-izquierda">
<?php $articulos_mac = new WP_Query(‘cat=14&showposts=1’); ?>

<?php while ($articulos_mac->have_posts()) : $articulos_mac->the_post(); ?>
<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>
<?php endwhile; ?>
</div>
[/php]

Ahora tenemos que modificar el código CSS del theme, que está en el archivo style.css (de nuevo, esto depende del theme). Vamos a la última línea y añadimos el estilo necesario para crear las columnas:

[css]
.columna-derecha { width:48%; float:right; clear:both; }

.columna-izquierda { width:48%; float:left; }
[/css]

¡Y listo! Ya tenemos los artículos en dos columnas una para cada categoría. Hace unos cuantos meses publiqué un tutorial similar pero mostrando sólo artículos en dos columnas, es decir, sin el añadido de las categorías. Podéis verlo aquí.

Por último, podéis descargar la versión modificada del theme Default desde aquí.