Muestra los artículos en dos columnas

This post was published 9 years ago. It may be exremely 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.

5 Responses to Muestra los artículos en dos columnas

Hola Sumolari, exelente tutorial, es justo lo que andaba buscando, estoy implementando un blog en wordpress y he modificado bastante una plantilla, conociendo de paso el mundo de php y wordpress.
Mi duda es la siguien, como se puede hacer para que, al ser la cantidad de post mostrados impar, aparezca el ultimo en la columna derecha, o centrado y evitar así el espacio en la columna izquierda??.
Saludos y muchas gracias por tu sitio, y por tu trabajo.

Pues la verdad es que no estoy seguro al 100%, pero he buscado en Google y he encontrado algo interesante:

El objeto $wp_query tiene una variable llamada current_post y otra llamada post_count. La primera creo que almacena la iteración actual del bucle, mientras que la segunda almacena el total de artículos que se mostrarán en el bucle. Por ejemplo, si estás mostrando el quinto artículo de nueve, la variable current_post valdrá 5, mientras que la variable post_count valdrá 9.

Entonces es bastante fácil saber cuándo está ejecutándose la última iteración del bucle: cuando ambas variables valen lo mismo:

if( ($wp_query-&gt;current_post + 1) &lt; ($wp_query-&gt;post_count) )
{
  echo(&quot;Este no es el &uacute;ltimo art&iacute;culo&quot;);
}

if( ($wp_query-&gt;current_post + 1) &gt; ($wp_query-&gt;post_count) )
{
  echo(&quot;Este es el &uacute;ltimo art&iacute;culo&quot;);
}

if( $wp_query-&gt;current_post == $wp_query-&gt;post_count )
{
  echo(&quot;Este es el &uacute;ltimo art&iacute;culo (otra vez)&quot;);
}

Aplica esta condición al script del artículo y podrás cambia el modo en el que se muestra el último artículo. También puedes usarlo para destacar el primer artículo o cosas así.

Dentro de un rato publicaré un artículo sobre esto mismo.

Acabo de publicar el artículo que te he comentado antes. Revísalo porque ahí explico cómo detectar el último artículo correctamente (el código que he puesto antes no funciona, la fuente de donde saqué el código era errónea).

Puedes verlo aquí.

Ok. Muchas gracias por tu ayuda.

Leave a Reply