Ulzurrun de Asanza i Sàez

Muestra los artículos en dos columnas

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

[css].col-left {
width:49%;
}

.col-right {
float:right;
width:49%;
}[/css]

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:

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

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]<?php $alternar = true; ?>
<?php $articulos_mostrados = 0;  ?>[/php]

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

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]<?php $articulos_mostrados++; ?>
<?php else : ?>
<?php endif; ?>
[/php]

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

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 replies on “Muestra los artículos en dos columnas

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

    1. 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:

      [php]

      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;);
      }

      [/php]

      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.

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

      1. Ok. Muchas gracias por tu ayuda.

Leave a Reply to Sumolari Cancel reply

Your email address will not be published.

Required fields are marked *

Your avatar