Nota inicial: Este artículo es una traducción de The Loop in Action del codex de WordPress que he hecho para obligarme a mi misma a leérmelo entero y asegurarme de que he entendido algo

Introdución

“El Bucle” es un término que se refiere al proceso principal de WordPress. Usamos el bucle en las plantillas de wordpress ( template files) para mostrar las entradas a los usuarios. Podríamos hacer plantillas ein El Bucle, pero sólo podríamos mostrar los datos de 1 post.

Lo primero que hace WordPress es comprobar que están todos los archivos que necesita. Luego, recopila de la base de datos las opciones establecidas por el administrador del blog. Esto incluye cosas cómo el número de entradas que hay que mostrar en cada página, si los comentarios están abiertos, etc. Una vez establecidas estas opciones, WordPress comprueba qué es lo que el usuario ha pedido y lo utiliza para coger esa información de la base de datos.

Si es usuario no ha pedido una entrada, categoría, página o fecha específicas, WordPress utiliza la información por defecto que ha recogido antes para determinar qué posts va a enseñar al usuario. Por ejemplo, si el administrador del blog ha establecido mostrar 5 posts por página en  Administración > Opciones > Lectura, WordPress cogerá los 5 posts más recientes de la base de datos. Si el usuario ha pedido un post, categoría, página o fecha específicos,  WordPress usará esa información para recoger esas entradas de la base de datos.

Una vez hecho todo esto,  WordPress conecta con la base de datos, extrae la información necesaria y guarda los resultados en una variable. El Bucle accede a esta variable y utiliza los valores para mostrarlos en las plantillas.

Por defecto, si el visitante no ha seleccionado un post, categoría, página o fecha específicos, WordPress usa index.php para mostrar cualquier cosa. En la primera parte de este artículo sobre el bucle, nos vamos a centrar únicamente en index.php, y la vista por defecto del blog. Después, una vez que entendamos como funcionan las cosas, investigaremos cómo funciona el bucle en otros archivos.

El index más simple del mundo

El código siguiente es un index perfectamente funiconal que mostrará los contenidos (y sólo los contenidos) de cada post, de acuerdo con las condiciones utilizadas para preparar El Bucle. El único propósito de mostrar esto es demostrar lo poquísimo que es necesario para que el Bucle  funcione. La mayor parte del index.php es CSS, HTML y declaraciones en PHP que hace que el bucle tenga una bonita apariencia

<?php
get_header();
if (have_posts()) :
   while (have_posts()) :
      the_post();
      the_content();
   endwhile;
endif;
get_sidebar();
get_footer();
?>

Ahora vamos a echar un vistazo a las cosas que logran que El Bucle tenga una bonita apariencia.

El Bucle por defecto

Vamos a ver paso a paso el uso por defecto del Bucle, el que viene con las plantillas default y classic in the en la instlación standar de  v1.5.

Principio del Bucle

Al principio de la plantilla index.php encontramos el código que da comienzo al Bucle.

<?php if (have_posts()) : ?><br />
<?php while (have_posts()) : the_post(); ?>

1. Primero comprueba si se recogió alguna entrada con la función have_posts() .
2. Si hay alguna entrada, se da comienzo a un bucle while de PHP, que se continuará ejecutando mientras la condición establecida entre paréntesis siga siendo verdadera (ver estructuras de control en el manual de PHP) En tanto que la función have_posts() siga devolviendo un valor  true value, El Bucle seguirá ejecutándose.
3. La función have_posts() simplemente comprueba el siguiente item en la colección de entradas: si hay otro item, devuelve true, si no lo hay, devuelve false.

Generando el Post

La función the_post() coge el contenido del item actual dentro de la colección de posts y lo hace disponible para su utilización dentro  del Bucle. Sin  the_post(), muchas de las etiquetas de plantilla (Template Tags) usadas en un Tema, no funcionarían.

Una vez que los datos del post están disponibles, la plantilla puede empezar a mostrárselos a los visitantes.

Título, Fecha y Autor

Las siguientes etiquetas de plantilla  (template tags) muestran el título del post en cuestión, así como la fecha y el autor del mismo.

<h2 id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

El Contenido del post

La etiqueta de plantilla the_content() muestra el contenido del post. Esto tag displays the content of the post. Esto es el plato principal de cada pasada por El Bucle:

<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

Si incluyes el botón  Quicktag llamado more, que se muestra cómo  <!--more-->, en el cuerpo del post, sólo se mostrará la porción del post que esté antes de esa línea. Así que si sólo quieres mostrar en la página principal una o dos frases de cada post, lo único que hay que hacer es insertar <!--more--> después de la primera frase de cada post.

Cuando estamos viendo un post en particular, se ignora el delimitador <!--more--> . Así que poniendo este delimitador <!--more--> forzamos a los usuairos a pulsar sobre cada post para verlo entero.

Detalles adicionales

En el archivo index. php, debajo del contenido de cada post hay un sitio para mostrar más información sobre el post, como la categoría, la fecha e información sobre los comentarios, se conoce como post meta data section, si eres un usuario registrado con suficientes privilegios (el autor del post) también puedes ver un enlace para “editar el artículo” gracias a la función de la etiqueta edit_post_link() .

<p class="postmetadata">
Posted in <?php the_category(', ') ?>
<strong>|</strong>
<?php edit_post_link('Edit','','<strong>|</strong>'); ?>
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>

Si los comentarios están activados, o el post tiene comentarios, la etiqueta de plantilla comments_popup_link() mostrará a los usuarios un enlace a los comentarios. Si estás utilizando la ventana ‘popup’ de los comentarios, este enlace abrirá una ventana para los comentarios (comments popup window), en caso contrario saltará a los comentarios del post en la misma ventana .

Si el visitante está viendo un índice de posts (más de un post en El Bucle) la etiqueta  comments_popup_link() llevará al usuario al la página individual del post.

Autodescubrimiento de Trackback

La función de la etiqueta trackback_rdf es mostrar un código legíble para máquinas para autodescubrir trackbacks .

<!--
<?php trackback_rdf(); ?>
-->

Nota: La etiqueta trackback_rdf() se supone que debe usarse con las etiquetas de comentario (<!––>) alrededor (no es que esté desactivada).

Finalizando El Bucle

El bucle se finaliza bucle con:

<?php endwhile; ?>

Si se introducen etiquetas de plantilla relativas al post después de este punto, no funcionarán tal y como se espera de ellas (y si lo hacen, usaran el último post del Bucle). Esto significa que si necesitas usar una etiqueta de plantilla que tenga que ser usada dentro del bucle.

La sección inmediatamente después del bucle, muestra los controles para navegar, para moverse adelante y atrás por cada página.

<div class="navigation">
<div class="alignleft"><?php posts_nav_link('','','&laquo; Previous Entries') ?></div>
<div class="alignright"><?php posts_nav_link('','Next Entries &raquo;','') ?></div>
</div>

Si el blog está configurado para mostrar 10 entradas por cada página, y las condiciones que ha utilizado el Bucle, recogen 25 posts, habrá 3 páginas en las que navegar: dos páginas con 10 entradas cada una y una página con 5. Los enlaces de navegación permitirán al visitante moverse adelante y atrás por la colección de posts.

Los controles de navegación se incluyes fuera del Bucle pero dentro de la condición if, de forma que sólo se muestran si hay algún post.  Las funciones de navegación también comprueban si hay o no algo a lo que puedan enlazar, basándose en el bucle actual y sólo se muestran los enlaces si efectivamente hay algo que enlazar.

<?php else : ?>
 <h2 class="center">Not Found</h2>
 <p class="center">
<?php _e("Sorry, but you are looking for something that isn't here."); ?></p>

La cláusula  else : determina qué hay que hacer si  have_posts() (que vismos al principio) esfalse. Es decurm lo que pongas después de else sólo se ejecutará/mostrará si el Bucle no contenía post alguno. No se muestra ningún post cuando, por ejemplo, el visitante solicita un día en concreto en el que no se publicó ninguna entrada; o cuando se realiza una búsqueda que no obtiene ningún resultado.

  <?php endif; ?>

Esto termina termina la condición de ” Si hay post para hacer esto, si no hay posts, haz esto otro” Una vez que se termina la condición, el index.php por defecto incluye la barra lateral y finalmente el pie de página.

Así que nuestro bucle completito en elindex.php, tal y cómo aparece en la plantilla “default” sería:

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    <?php endwhile; ?>
<?php else : ?>
<?php endif; ?>

El Bucle en otros archivos de plantilla

WordPress puede usar diferentes archivos de plantilla para mostar el blog de formas diferentes. En la plantilla por defecto (default) hay archivos de plantilla para la vísta del índice, la vísta de categoría, la vista de archivo, así cómo un archivo de plantilla para ver post individuales. Cada uno de estos archivos usa El Bucle, pero cada uno de ellos con un formato ligeramente distinto, así como una utilización distinta de las etiquetas de plantilla (template tags).

Para cualquier vista que no tenga un archivo de plantilla específico, , WordPress will utilizará index.php por defecto.  Si un visitantes solicita ver un post individual, , WordPress primero buscará un archivo llamado single.php. Si existe ese archivo, lo usará para presentar el post al usuario, pero si no existe, WordPress usará  index.php para mostrar el post al visitante. Esto es lo que se llama la Jearquía de las plantillas (Template Hierarchy).

Si estás haciendo tu propio Tema, suele ser útil echarle un vistazo a los archivos de plantilla del tema “default” para tener una referencia. También ayuda utilizar el archivo index.php de tu Tema como punto de partida para los demás archivos de plantilla. Hacerlo, te dará un archivo conocido y que funciona a partir del cual puedes empezar a hacer cambios a medida que vas creando más archivos de plantilla.

Formato del archivo cronológico

Un archivo cronológico es una colección de posts pasados. En el uso por defecto, los posts que se muestran en la página principal son posts recientes ordenados cronológicamente . Cuando un visitante pulsa en alguno de los enlaces del archivo cronológico, o si manualmente solicitan una fecha específica (http://www.example.com/blog/index.php?m=200504 o http://www.example.com/blog/2005/04 para seleccionar todos los posts de Abril de 2005), WordPress mostrará la vista de archivo cronológico. Por defecto, este archivo utilizará la plantilla index.php, y por lo tanto su apariencia será la misma que la de la página principal, sólo que mostrando los posts de abril de 2005.

Cuando WordPress prepara una vista cronológica para el visitante, buscará un archivo llamado archive.php en el directorio del Tema. Si queremos diferenciar nuestra vista cronológica de la página principal, lo único que tenemos que hacer es  copiar index.php guardarlo como  archive.php, y editarlo cómo queramos!

Por ejemplo, si en nuestra vista cronológica queremos mostrar sólo los títulos y no el contenido de los posts podríamos usar algo como esto:

<?php get_header(); ?>
 <div id="content" class="narrowcolumn">

  <?php if (have_posts()) : ?>
   <?php while (have_posts()) : the_post(); ?>
     <div class="post">
     <h2 id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to
<?php the_title(); ?>"><?php the_title(); ?></a></h2>
     <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
      </div>
    <?php endwhile; ?>
<div class="navigation">
<div class="alignleft">
<?php posts_nav_link('','','&laquo; Previous Entries') ?>
</div>
<div class="alignright">
<?php posts_nav_link('','Next Entries &raquo;','') ?>
</div>
  </div>
<?php else : ?>
  <h2 class="center">Not Found</h2>
 <p class="center"><?php _e("Sorry, but you are looking for something that isn't here."); ?></p>
  <?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

El formato del archivo de categorías

Al igual que en el caso de la vista cronológica,  WordPress buscará un archivo de plantilla específico para la  vista por categorías. Si un visitante pulsa sobre un enlace de categoría en el blog, verá una página con una vita por categorías. WordPress prepara El Bucle con posts provenientes sólo de esta categoría, limitándo el número de posts que muestra al que se haya establecido en las opciones del blog.

Para que nuestra vista por categorías sea diferente de la página anterior, hay que copiar index.php y  renombrarlo como category.php. Para una vista de categoría lo normal es que no sea necesario listar las categorías a las que el post está asignado, por lo que, en el ejemplo, vamos a quitar esa sección y a poner el nombre de la categoría al principio de la página

<?php get_header(); ?>
 <div id="content" class="narrowcolumn">
 <p>
 <strong>
  <?php single_cat_title('Currently browsing '); ?>
  </strong><br />
 <?php echo category_description(); ?>
 </p>
 <?php if (have_posts()) : ?>
   <?php while (have_posts()) : the_post(); ?>
     <div class="post">
      <h2 id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to
<?php the_title(); ?>">
<?php the_title(); ?></a></h2>
   <small>
     <?php the_time('F jS, Y') ?>
        <!-- by <?php the_author() ?> -->
   </small>
 </div>
<?php endwhile; ?>
 <div class="navigation">
   <div class="alignleft">
    <?php posts_nav_link('','','&laquo; Previous Entries') ?>
   </div>
   <div class="alignright">
    <?php posts_nav_link('','Next Entries &raquo;','') ?>
   </div>
 </div>
<?php else : ?>
  <h2 class="center">Not Found</h2>
<p class="center"><?php _e("Sorry, but you are looking for something that isn't here."); ?></p>
 <?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Un formato diferente para cada categoría

Tal y cómo se explica en la  Jerarquía de plantillas, es posible crear archivos de plantilla específicos para cada categoría. Sólo hay que nombrar el archivo como category-X.php, siendo X el ID de la cateogría. Hay que evaluar cuidadosamente la necesidad de crear toda una plantilla nueva para una categoría específica.

Vamos a ver 2 categrías: “Plantas” y “flores”, cuyos ID de categoría son 3 y 4 respectivamente. Al lado de cada título de un post quieres tener una imagen bien de una planta, bien de una flor, dependiendo de la categoría en la que estemos. Podríamos:

• Utilizar dos archivos separados, category-3.php y category-4.php, cada uno con una etiqueta de imagen distinta para cada dítulo.
• Utilizar una condición dentro de nuestra plantilla de archivo category.php que comprobase si la categoría que se está visiualizando es “Plantas” o “flores” y mostrar la imagen que corresponda.

<?php if (is_category('3') ):
 // Estamos en la categoría plantas, muestra una planta ?>
 <img src='/images/plant.png' alt='a plant' />
<?php } elseif (is_category('4') ):
 // Estamos en la categoría Flores, muestra una Flor ?>
 <img src='/images/flower.png' alt='a pretty flower' />
<?php endif; // end the if, no images for other other categories ?>

Si quisieras mostrar otra categoría , “Coches”, que quisieras mostrar de una forma completamente distinta, si que te vendría bien un archivo específico category-X.php .

Un CSS diferente para categorías diferentes

Muchos usuarios quieren crear un CSS específico para una categoría concreta. Es fácil de hacer. Es importante recordar que las hojas de estilo se definen y carcan en el encabezamiento de un documento HTML (<head>). WordPress lo hace en header.php. En elheader.php, Busca esta línea:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Y cámbialo por algo como esto:

<?php if ( is_category('5') ) { // Carga un específico CSS para la categoría "coches" ?>
  <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/category-5.css" type="text/css" media="screen" />;
<?php } else { ?>
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php } ?>

Nota: La plantilla coches, utiliza el archivo  category-5.css para pasar por encima del ‘layout’ por defecto. En este ejemplo el archivo css se ha llamado cómo la plantilla de la categoría a la que se va a aplicar. Así sabemos que category-5.css va con  category-5.php.

Un formato diferente para la plantilla indivisual

Cuando estamos viendo una entrada individual (o permalink), WordPress utilizará, si existe el archivo  single.php.

Esta parte, que viene del archivo single.php de la plantilla ‘default’ de WordPress, nos da la información del post (post meta data information) que estamos viendo:

<p class="postmetadata alt">
<small>
This entry was posted on <?php the_time('l, F jS, Y') ?> at <?php the_time() ?>
and is filed under <?php the_category(', ') ?>.
You can follow any responses to this entry through
the <?php comments_rss_link('RSS 2.0'); ?> feed.
<?php
if (('open' == $post->comment_status) && ('open' == $post->ping_status)) {
// Both Comments and Pings are open
?>
  You can <a href="#respond">leave a response</a>, or
  <a href="<?php trackback_url(display); ?>">trackback</a>
from your own site.
<?php
} elseif (!('open' == $post->comment_status) && ('open' == $post->ping_status)) {
// Only Pings are Open
?>
  Responses are currently closed, but you can
  <a href="<?php trackback_url(display); ?> ">trackback</a>
from your own site.
<?php
} elseif (('open' == $post->comment_status) && !('open' == $post->ping_status)) {
// Comments are open, Pings are not
?>
  You can skip to the end and leave a response. Pinging is currently not allowed.
<?php
} elseif (!('open' == $post->comment_status) && !('open' == $post->ping_status)) {
// Neither Comments, nor Pings are open
?>
  Both comments and pings are currently closed.
<?php
}
edit_post_link('Edit this entry.','',''); ?>
</small>
</p>

Este tipo de información (estén abiertos o no los comentarios) no tiene sentido en las vistas de la página principal, el archivo cronológico o las páginas de categoría y por eso se incluye sólo en el archivo de plantilla para posts indidividuales single.php.

Otros trucos que se pueden hacer con El Bucle

Ahora que ya tenemos una buena introducción a los usos básicos del Bucle, vamos a ver otros efectos y trucos que se pueden conseguir.

Página principal estática

Mostrar  algo específico sólo para la página princpal del blog que sólo se vea en la home y en ninguna otra parte del blog es fácil de hacer, se llama página principal estática. La página principal no es estática, simplemente utiliza el bucle para parecerlo.

Para conseguirlo, utilizamos la etiqueta de plantilla condicional is_home().

En nuestro  index.php, utilizamos una condición if () para mostrar contenido adicional:

<?php get_header(); ?>
<?php if (is_home()) {
 // we're on the home page, so let's show a picture of our new kitten!
 echo "<img src='/images/new_kitty.jpg' alt='Our new cat, Rufus!' />";
 // and now back to our regularly scheduled home page
} ?> 

La función is_home() sólo dará un valor true si el visitante no está pidiendo una entrada, categoría, página o fecha específicos por lo que muestra sólo la página principal.

Para más información ver Creación de una página de inicio estática.

Sólo extractos

La manera más fácil de mostrar sólo estractos, en lugar del contenido entero de los posts, es sustuir todos los the_content() por the_excerpt(). Si no hemos creado los extractos explícitamente pra nuestros posts, esta función mostrará automáticamente las primeras 120 palabras del post.

<div class="entry">
<?php the_excerpt(); ?>
</div>

Mostrar extractos o todo el contenido dependiendo del número de posts

En algunas circunstancias, por ejemplo en páginas con vistas de archivo cronológico, podemos querrer mostrar el post completo si sólo hay uno y extractos si hay más de uno. Se puede personalizar el bucle para lograrlo.

<?php if (have_posts()) : ?>

  <?php if (($wp_query->post_count) > 1) : ?>
     <?php while (have_posts()) : the_post(); ?>
       <!-- Aquí poner encabezamiento del post en caso de extractos-->
          <?php the_excerpt() ?>
       <!-- Poner el pie del post en caso de extractos -->
     <?php endwhile; ?>

  <?php else : ?>

     <?php while (have_posts()) : the_post(); ?>
       <!-- Do your post header stuff here for single post-->
          <?php the_content() ?>
       <!-- Do your post footer stuff here for single post-->
     <?php endwhile; ?>

  <?php endif; ?>

<?php else : ?>
     <!-- Stuff to do if there are no posts-->

<?php endif; ?>

Encabezados/menús laterales y pies de página diferenciados

WordPress tiene las etiquetas para incluir ( Include Tags)  the get_header(), get_sidebar(), and get_footer() y usarlos en nuestros  archivos de plantilla. Estas funciones facilitan la definición de encabezados/menus laterales/pies de página estándar que son fáciles de editar. Cualquier cambio hecho en estos archivos será inmediatamente visible a los usuarios.

Pero a veces no quieres un menú lateral, en ese caso simplemente quitaríamos la llamada get_sidebar() de nuestra plantilla. Por eujemplo, la plantilla  the single.php del tema por defecto de WordPress no incluye un menú lateral.

Para crear un menú lateral personalizado tenemos 2 opciones:

1. Incluir los contenidos del sidebar directamente en la plantilla en la que estemos trabajando. Si queremos que la categoría 3 tenga un menú distinto, podemos editar category-3.php y añadirle el  HTML y PHP que sea necesario para incluir nuestro menú diferenciado.
2. Utilizar una función include de  PHP, pra incluir otro archivo.  La función  get_sidebar() de WordPress  sólo carga sidebar.php. Si creamos un archivo y lo llamamos sideleft.php (por ejemplo), lo incluiríamos así:

<?php include(TEMPLATEPATH . '/sideleft.php'); ?>

Utilizando la Jerarquía de plantillas de wordpress, si quieres utilizar los mismos elementos en diferentes plantillas, suele ser mejor poner esos elementos en diferentes archivos y luego utilizar la función include() de PHP. En cambio si el elemento que estamos añadiendo es específico para un sólo archivo, lo mejor es añadírselo directamente a ese archivo.

Resumen

Hemos visto solo MUY superficialmente cómo se utiliza el bucle de wordpress. Los siguientes recursos nos ayudarán a personalizar nuestro propio WordPress Loop.

• Template Files (Archivos de plantilla)
• Template Tags (Etiquetas de Plantilla)
• Template Hierarchy (jerarquía de plantillas)
• Conditional Tags (Etiquetas condicionales)

Otros recursos

• The Ultimate Guide to the WordPress Loop
• WordPress Triple Loop Tutorial
• Multiple Loops with Multiple Columns
• Super Loop: Exclude Categories and Limit Number of Posts
• Easily Adaptable WordPress Loop Templates: Basic Loops, Mullet Loops, and More
• Horizontally Sequenced Display Order for WordPress Posts in Two Columns