Muestra los artículos en dos columnas

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

Problamente habréis visto alguna web hecha en Joomla! o algún theme para WordPress que tenga algunos artículos en una única columna y otros dispuestos en dos columnas.

Esto no es muy complicado de hacer, y puede ser útil para hacer diseños para revistas con WordPress, así que voy a explicar cómo adaptar el theme default para mostrar artículos en dos columnas.

A lo largo del tutorial modificaremos el archivo index.php y style.css. Comenzaremos por este último:

style.css

Abrimos el archivo style.css y nos situamos al final del mismo. En este archivo añadiremos dos clases nuevas: col-left y col-right, que servirán para definir el aspecto de ambas columnas.

Las dos clases tendrá una anchura (width) de 49% y la columna derecha flotará hacia la derecha. En código quedaría así:

.col-left {
width:49%;
}
.col-right {
float:right;
width:49%;
}

Bien, con esto hemos acabado de modificar el archivo.

index.php

Ahora pasamos a modificar el archivo index.php. En este archivo haremos más modificaciones que en el anterior, pero antes, repasemos un poco lo que vamos a hacer:

Actualmente, este archivo hace lo siguiente:

  • Muestra la cabecera
  • Comprueba si hay artículos
    • Si hay artículos
      • Crea un bucle y los muestra
    • Si no hay artículos
      • Muestra un mensaje de error y el formulario de búsqueda
  • Muestra la sidebar
  • Muestra el pie de página

Nosotros vamos a modificar esta secuencia, y la vamos a dejar de la siguiente forma:

  • Muestra la cabecera
  • Comprueba si hay artículos
    • Si hay artículos
      • Crea la variable $articulos_mostrados, con valor 0.
      • Crea la variable $alternar, con valor true.
      • Crea un bucle que a cada repetición muestra un artículos
        • Comprueba si se han mostrado X artículos (por ejemplo, 2)
          • Si se han mostrado:
            • Comprueba si la variable $alternar es true
              • Si es true:
                • Cambia el valor de $alternar a false
                • Muestra el artículo en la columna derecha
              • Si no es true (es false):
                • Cambia el valor de $alternar a true
                • Muestra el artículo en la columna izquierda
                • Inserta una capa (div) que reajuste las columnas para evitar que el contenido se salga del sitio donde debería estar
          • Si no se han mostrado:
            • Los muestra e incrementa el valor de $articulos_mostrados en 1 por cada artículo que muestra
      • Finaliza el bucle
    • Si no hay artículos
      • Muestra un mensaje de error y el formulario de búsqueda
  • Muestra la sidebar
  • Muestra el pie de página

Dejemos la teoría de lado y pasemos a modificar el archivo.

Nos situamos en la línea 12, y creamos las variables que aparecían antes:

<?php $alternar = true; ?>
<?php $articulos_mostrados = 0;  ?>

Ahora vamos a añadir la condición que comprobará si se han mostrado los 2 artículos que queremos que ocupen toda la página. Añadimos en la línea 16 (después de while (have_posts(…) :

<?php if($articulos_mostrados < 2): ?>

Ahora tenemos que finalizar la condición. Añadiremos el código siguiente en la línea anterior al endwhile (sobre la línea 30):

<?php $articulos_mostrados++; ?>
<?php else : ?>
<?php endif; ?>

Bien, ahora ya mostrará sólo 2 artículos (puedes cambiar el dos que hemos añadido antes por el número que quieras, pero ten en cuenta que tiene que ser un número par para que las columnas estén equilibradas), pero tenemos que hacer que muestre los otros 8 artículos en dos columnas, a 4 artículos por columna.

Nos situamos entre el <?php else : ?> y el <?php endif; ?>, y añadimos el siguiente código:

<?php if ($alternar): ?><div class="col-right"><?php else : ?><div class="col-left"><?php endif; ?>
<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>
</div>
<?php if (!$alternar): ?><div class="clear"></div><?php endif; ?>
<?php $alternar = !$alternar; ?>

Este código dependiendo del valor de la variable $alternar mostrará el código de la columna derecha o de la izquierda, mostrará el contenido, cerrará la columna, mostrará el código de reajuste de las columnas cuando es necesario y por último cambiará el valor de $alternar.

Conclusión

Con esto ya hemos adaptado el theme para dos columnas. La verdad es que en el theme default no queda demasido bien, ya que las columnas acaban siendo algo pequeñas, pero sin duda es algo útil cuando se usa un theme con un ancho más grande.

Por último, os dejo el theme default modificado por si habéis tenido problemas durante el tutorial.