Cómo crear un loop WordPress perfecto

WordPress-loop

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

El loop de WordPress

1. Abriendo el Loop

Antes de mostrar las entradas tienes que abrir el Loop. Sería así:

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.

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.

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

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

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

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

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:

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

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.

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

Valora este artículo para mejorar la calidad del blog ...

FlojitoNo está malEstá bienMe ha servidoFantástico (7 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad