Mejorando nuestro theme de WordPress: Creando columnas con diversas categorías
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 »’); ?>
</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 »’, ‘1 Comment »’, ‘% Comments »’); ?></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 »’); ?>
</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 »’, ‘1 Comment »’, ‘% Comments »’); ?></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 »’); ?>
</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 »’, ‘1 Comment »’, ‘% Comments »’); ?></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 »’); ?>
</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 »’, ‘1 Comment »’, ‘% Comments »’); ?></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 »’); ?>
</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 »’, ‘1 Comment »’, ‘% Comments »’); ?></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 »’); ?>
</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 »’, ‘1 Comment »’, ‘% Comments »’); ?></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 »’); ?>
</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 »’, ‘1 Comment »’, ‘% Comments »’); ?></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 »’); ?>
</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 »’, ‘1 Comment »’, ‘% Comments »’); ?></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 »’); ?>
</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 »’, ‘1 Comment »’, ‘% Comments »’); ?></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í.
One reply on “Mejorando nuestro theme de WordPress: Creando columnas con diversas categorías”