Cómo crear un loop WordPress perfecto
El Loop es la madre del cordero de WordPress, lo que hace que todo funcione y la magia ocurra, es lo más. Todo lo demás es opcional, sin Loop da igual que escribas, que subas fotos o instales veinte mil plugins, no se mostrará nada.
Porque el Loop es lo que hace que tus publicaciones existan y se muestren en tu web.
Así que más vale que tomes nota de cómo debería ser un Loop, o al menos aprendas cuales son sus partes fundamentales y para qué sirven, lo que es el objetivo de este artículo, que tampoco estarías leyendo si no fuera gracias al Loop.
Toma nota, vamos a ver de qué se compone el Loop …
1. Abriendo el Loop
Antes de mostrar las entradas tienes que abrir el Loop. Sería así:
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
Observa que antes de que empiece el Loop primero revisamos a ver si hay entradas. El if(have_posts()) comprueba si hay entradas disponibles. Y si las hay entonces giramos a través de ellas (utilizo el término “girar” porque en realidad el término “loop” se refiere a eso, a girar, circular, dar vueltas en torno a algo).
Donde empieza de verdad el Loop es en while(have_posts()). Ahí comienza un ciclo continuo, orbitando a través de cada entrada disponible para mostrarse en la web.
Luego tenemos the_post(), que reclama información acerca de la entrada que tengamos, y establece la variable global $post.
Y todo esto en solo la primera línea de código ¿te das cuenta de que esto es la leche?
2. Mostrando la entrada
El siguiente paso es una sola línea de código, a la que normalmente nos referiremos cómo “el div de la entrada”. Lo que hace es envolver el contenido de nuestra entrada en un “div” para tenerlo todo junto y ordenado.
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
El ID de la entrada lo obtenemos con the_ID() ya que es una variable constante pues no hay dos entradas con el mismo ID.
post_class() es una función que ofrece clases específicas para las entradas que podemos usar en la hoja de estilos. Es genial pues nos permite mostrar entradas con tags y categorías específicas, para diferenciarlas de otras entradas.
3. El título de la entrada
Hay varias maneras de generar el código para el título de la entrada, pero este es muy popular además de efectivo.
<?php the_title('<h2 class="entry-title"><a href="' . get_permalink() . '" title="' . the_title_attribute('echo=0') . '" rel="bookmark">', '</a></h2>'); ?>
Para empezar, the_title() es la tag de plantilla WordPress para mostrar el título de la entrada, así de simple. Tiene tres parámetros opcionales: before (antes del título), after (después del título) y display (para mostrarlo o recuperarlo para usarlo en una función).
La tag de plantilla get_permalink() es la que obtiene la URL de la entrada, o sea, el enlace permanente a la entrada.
Y the_title_attribute() es una tag de plantilla que no se usa mucho, pero que tiene su miga. Y es que cuando pongas un título de entrada en el atributo “title” de un enlace, en vez de usar the_title() es mejor que uses the_title_attribute(). Con ello evitas errores de entradas con elementos problemáticos, cómo comillas y cosas así, ofreciendo un XHTML válido.
También puedes usar single_post_title() para mostrar el título de una entrada en las plantillas single.php y page.php.
4. El “byline“
El “byline” es un término utilizado en periodismo, para describir y mostrar el escritor de un artículo. Y cómo los blogs son, en esencia, periódicos o revistas, pues de ahí han adquirido ese término y adaptado a esta especie de periodismo ciudadano.
También puedes añadir una “dateline“, o línea con la fecha, pero siempre es interesante mostrar quien es el autor de una entrada, la fecha de publicación, e incluso un enlace para editarla, todo dentro del párrafo “byline“, antes del texto de la misma entrada.
Se haría así:
<p class="byline">
<span class="author vcard"><?php the_author_posts_link(); ?></span> <span class="separador">|</span>
<abbr class="published" title="<?php the_time(__('l, j F, Y, G:i', 'ejemplo')); ?>"><?php the_time(__('j F, Y', 'ejemplo')); ?></abbr>
<?php edit_post_link(__('Editar', 'ejemplo'), ' <span class="sep">|</span> <span class="edit">', '</span> '); ?>
</p>
La primera tag de plantilla de este código es the_author_posts_link(). Su función es mostrar un enlace a la página de archivo del autor. También puedes usar the_author, que solo mostrará el nombre del autor, sin enlace.
the_time() muestra cuando se publicó la entrada. Hay varios formatos posibles a la hora de mostrarlo. Un detalle, si te fijas, en el ejemplo se usa dos veces the_time(). Y es que el primero está colocado en un atributo de título abbr. Esto se hace así para que cuando el lector pase el cursor sobre la fecha vea una versión extendida, con más detalles, un efecto chulo.
edit_post_link() muestra un enlace para editar la entrada, que solo ve los usuarios conectados que tengan capacidad de editar entradas. Si se hace clic en el enlace se abre la entrada en el editor de WordPress.
5. Mostrando el contenido de la entrada
Hay dos maneras posibles para mostrar el contenido de la entrada: toda la entrada o el extracto (bueno, en realidad podrías pensar que son 3, pues también podrías mostrar solo el título, pero entonces ya no sería contenido ¿no?).
Siempre hay que mostrar el contenido completo en single.php y page.php, aunque hay un montón de temas que también usan este método en la portada, en index.php.
Sería así:
<div class="entry-content">
<?php the_content(__('Sigue leyendo', 'ejemplo')); ?>
<?php wp_link_pages('before=<p class="pages">' . __('Páginas:','ejemplo') . '&after=</p>'); ?>
</div>
Esta parte del Loop lleva su propio “div”. Esto es para dar una separación más clara y así permitir aplicar estilos de manera más sencilla y clara.
the_content() es lo que muestra toda la entrada, y poco más hay que decir a este respecto. Lo siguiente es el texto “Sigue leyendo”, que se mostrará en el enlace cuando el autor de una entrada corte el contenido con la tag < !- - more - - > en el editor de WordPress.
De igual modo, wp_link_pages() es la parte del código que, cuando el autor de una entrada use la tag < !- - nextpage- - > partirá las entradas en más de una página, mostrando los enlaces a cada página. Lamentablemente esta es una técnica, y código, cada vez menos utilizada, pero muy recomendable.
Para terminar, si solo quieres mostrar el extracto de la entrada, solo hay que hacer un pequeño cambio. Esto es muy útil para las plantillas de los archivos, cómo category.php, archives.php y search.php, y cada vez se usa más en todo tipo de temas WordPress, especialmente en los que imitan a diarios digitales, o aquellos que quieren mostrar muchas entradas en portada.
El código sería así:
<div class="entry-summary">
<?php the_excerpt(); ?>
</div>
Por defecto mostrará las 55 primeras palabras de una entrada, o el texto que introduzcas en el caja denominada “Extracto” del editor de WordPress.
6. Mostrando los metadatos de la entrada
Una vez hemos mostrado el contenido de la entrada es bastante habitual mostrar los metadatos de la misma, o sea, información adicional relativa a la entrada, cómo en qué categorías y tags está archivada, o el enlace a los comentarios. También puedes, si quieres, poner aquí el “byline”, combinado con los metadatos, antes o después, cómo quieras.
Un código muy típico para esta parte sería así:
<p class="entry-meta">
<span class="categories"><?php _e('Publicado en', 'ejemplo'); ?> <?php the_category(', '); ?></span>
<?php the_tags('<span class="tags"> <span class="sep">|</span> ' . __('Tags:', 'ejemplo') . ' ', ', ', '</span>'); ?>
<span class="separador">|</span> <?php comments_popup_link(__('Deja una respuesta', 'ejemplo'), __('1 respuesta', 'ejemplo'), __('% respuestas', 'ejemplo'), 'comments-link', __('Comentarios cerrados', 'ejemplo')); ?>
</p>
Cómo puedes imaginar, the_category() muestra las categorías de la entrada.
A continuación, the_tags() muestra las tags, y si te fijas el modo de codificarlo es algo distinto a las categorías. Esto se hace así para asegurarnos que las tags – o lo que sea – solo se muestre si la entrada las usa. De este modo se evita que si no usas tags aparezca un texto vacío “Tags:“. No hace falta para las categorías porque siempre hay, aunque sea solo la categoría por defecto.
La última parte de los metadatos que mostramos es un enlace a los comentarios de la entrada. La tag de plantilla utilizada en el ejemplo es comments_popup_link(). Es importante usarla así ya que sirve para dos propósitos: enlaza a una ventana emergente para los usuarios que usen comentarios emergentes o enlaza a los comentarios de la entrada para los que no usen comentarios emergentes.
Nota: esto no funciona en single.php o page.php ya que ya estás en la página con la lista de comentarios.
7. Cerrando el Loop
El trabajo duro ya está hecho. Ahora solo quedan los cierres para que todo funcione correctamente. También debemos mostrar un mensaje cuando no haya entradas, aunque solo sea cómo medida de cortesía.
Conseguimos todo de este modo:
</div>
<?php endwhile; ?>
<?php else : ?>
<p class="no-posts"><?php _e('Lo siento, no hay entradas que se ajusten a lo que busca', 'ejemplo'); ?></p>
<?php endif; ?>
(Extra) Internacionalización
Si eres observador te habrás dado cuenta de que en varios momentos del código he puesto la palabra “ejemplo”, por ejemplo:
__('Páginas:','ejemplo')
_e('Lo siento, no hay entradas que se ajusten a lo que busca', 'ejemplo')
Esto es lo que se conoce cómo “localización” o “internacionalización, que es lo que permite que un tema esté listo para su traducción. Pero esto ya lo hemos visto en un artículo anterior donde expliqué cómo preparar un tema para traducción, así que damos por terminada la lección.
Espero hayas aprendido un poco, o al menos recordado conceptos.
