Si has intentado toquetear el tema que usas en tu web en WordPress y no has sabido por dónde empezar, te diré que es normal. Respira y tómatelo con calma, ya que si no conoces cómo funciona el Loop de WordPress te va a costar horrores saber qué tienes que hacer.
El Loop de WordPress determina qué contenido (entradas, páginas o contenido personalizado) se va a mostrar cuando navegas a una página de tu web. El Loop puede mostrar un contenido concreto o un grupo de entradas o páginas que se seleccionan y se recorren de forma secuencial, una detrás de la otra, y por esto se le llama Loop (lo podríamos traducir como «bucle», pero prefiero mantener el término en inglés, ya que me parece más apropiado).
Simplificando al máximo, WordPress funciona del siguiente modo: el Loop hace una consulta a la base de datos de WordPress para obtener una serie de entradas (o páginas, ya me entiendes) teniendo en cuenta ciertos parámetros. WordPress obtiene estos parámetros de la URL a la que estemos accediendo y los convierte en condiciones que el Loop incluye en la consulta a la base de datos. Por eso no ves lo mismo cuando accedes a una URL de una entrada concreta o a la URL de una categoría de tu web en WordPress.
Tranquilo, vamos a ir detallando esto poco a poco para que no se te atragante. Si estás listo, sigue leyendo con atención.
Entendiendo el Loop de WordPress
Entender cómo funciona el Loop de WordPress te ayudará a saber controlarlo. Y controlar el Loop para mostrar exactamente los contenidos que tú quieras va a ser una de las habilidades que más uses en el desarrollo de webs en WordPress.
De tu URL a la base de datos
Antes de entrar en materia, permíteme profundizar un poco más en el funcionamiento interno de WordPress. Para ello, vamos a ver los pasos que sigue WordPress para generar el contenido de una página web una vez que introducimos una URL en el navegador:
- El servidor web que recibe la petición de tu URL ha de ver si esa URL hace referencia a un archivo concreto dentro de tu instalación. Si ese es el caso, WordPress no entra en juego, ya que es el propio servidor web quien se encarga de devolver el archivo indicado.
- Si la URL no hace referencia a un archivo concreto, esta se tiene que procesar para determinar cual es el contenido que se tiene que mostrar. El servidor web empieza a cargar el core de WordPress a través del archivo
index.php, que iniciará la configuración del Loop. Por ejemplo, si visitas la página de una categoría comohttp://miwordpress.com/categoria/musica, WordPress determina que estás visitando una categoría y carga la plantilla de tu tema adecuada para categorías, selecciona las entradas que pertenecen a la categoríamusica, y genera el contenido HTML para la página de esta categoría. - La magia que convierte una URL a una selección de contenidos concretos ocurre dentro de la función
parse_query()dentro del objetoWP_Queryque WordPress crea al iniciarse. WordPress procesa la URL y la convierte primero en un conjunto de parámetros de consulta (query strings, en inglés). Todos estos parámetros extraídos a partir de la URL se pasan a WordPress para que decida cuál es el contenido a mostrar. Si tu WordPress utiliza URLs personalizadas, los valores entre barras/se convierten en estos parámetros de consulta. Por ejemplo,http://miwordpress.com/categoria/musicaes lo mismo quehttp://miwordpress.com/?category_name=musica, que incluye el parámetro de consultacategory_namecuyo valor esmusica. - Una vez WordPress extrae los parámetros, los convierte en una consulta MySQL a la base de datos para recuperar el contenido. El encargado de hacer esto es la función
get_posts()del objetoWP_Query. El contenido (entradas, páginas, …) que se devuelve como resultado de ejecutar la consulta se guarda en el propio objetoWP_Query, que se usará en el Loop de WordPress y se cacheará para acelerar otros accesos a las mismas entradas que se hagan antes de ejecutar una nueva consulta. - Una vez que el contenido se ha obtenido, WordPress prepara todas las variables condicionales
is_tales comois_home()ois_page(). Estas se consultaran en el código del tema para mostrar los contenidos de una manera o de otra. - Por último, WordPress coge la plantilla concreta de tu tema basándose en el tipo de consulta ejecutada y el número de resultados obtenidos (puede ser
single.php,archive.phpu otra). Los contenidos obtenidos se pasan a la plantilla que se encargará de invocar al Loop para generar el HTML que los visualiza. El HTML es lo que se devuelve al navegador.
Piensa que todo esto ocurre en un tiempo récord (probablemente menos de un segundo, o muy pocos segundos, dependiendo de la velocidad de carga de tu web).
Ahora que tienes un poco más claro todo el proceso, vamos a centrarnos en el Loop.
Nelio Forms
Un plugin de contacto fantástico que usa el editor de bloques. En su simplicidad está la potencia del plugin. Me encanta, es muy versátil y funciona de maravilla para mí.
Wajari Velasquez
El Loop es el corazón de tu Tema
Todo tema que siga las guías de desarrollo de WordPress tiene como elemento central al Loop de WordPress. Si somos capaces de entender el Loop, seremos capaces de hacer que WordPress se comporte y visualice contenidos de la manera en la que nosotros queremos que lo haga.
El Loop es la conexión entre los datos que tenemos en la base de datos MySQL y el HTML que se renderiza en el navegador. Siempre que visualizamos una entrada o página, WordPress usará el Loop.
La mayoría de temas de WordPress incluyen una cabecera (header), un pie de página (footer) y barras laterales (sidebars). En el siguiente esquema vemos como el Loop está localizado directamente en el centro de estas secciones, creando el área de contenido de tu web. Esta sección es habitualmente dinámica y cambiará a medida que navegas a través de ella.
A continuación mostraremos el flujo de ejecución principal del Loop en WordPress.
Flujo principal del Loop
El Loop utiliza algunas sentencias condicionales de programación estándar para determinar qué se va a visualizar y cómo se va a hacer. En el siguiente fragmento de código PHP podemos ver la mínima expresión del Loop de WordPress. Aquí sólo encontrarás las sentencias obligatorias para que el Loop funcione.
Recuerda que esto es código PHP, por lo que necesita estar rodeado de etiquetas <?php y ?>.
Acabas de ver al Loop en su forma más simple. Si te estás preguntando cómo los resultados de la consulta a la base de datos se pasan a este simple bucle, ya que no hay variables pasadas como parámetros en ningún sitio, la respuesta está en la variable global $wp_query (una instancia de WP_Query) que se usa de forma interna en las funciones del Loop que acabas de ver.
Existen algunos requisitos muy mínimos para que el Loop funcione en WordPress. Vamos a fragmentar el código anterior para ver las diferentes partes del Loop.
La línea if ( have_posts() ): comprueba si alguna entrada o página se va a visualizar en la web actual que estamos visitando. Si existen entradas o páginas, la siguiente línea while ( have_posts() ): se ejecutará.
La anterior sentencia while inicia el Loop, recorriendo todas las entradas y páginas que se tienen que visualizar hasta que no quede ninguna por tratar. El bucle continuará mientras exista contenido a procesar. Una vez que todos los contenidos se han tratado, el bucle while terminará. La función have_posts() simplemente comprueba si está acabada la lista de entradas que se está procesando, o si no había entradas para empezar.
A continuación, la función the_ post() se ejecuta para cargar todos los datos de la entrada concreta que estamos tratando en una pasada del bucle. Esta función debe ser llamada dentro del Loop para que se configuren correctamente los datos de las entradas. Ejecutar la función the_post() a su vez ejecuta la función setup_postdata() para configurar los metadatos de la entrada, como el autor y las etiquetas (entre otros) del contenido que se está procesando en el Loop, así como el contenido de la entrada en sí. Estos datos se asignan a una variable global cada vez a través de la iteración del bucle.
Ejecutar la función the_post() tiene como efecto secundario la creación de la variable global $post que es utilizada por la mayoría de Template Tags que se describen más adelante.
En la línea 5 tenemos un comentario. Aquí es donde se colocan todas las Template Tags y cualquier código adicional que deseamos visualizar en el interior del Loop.
Para finalizar, las sentencias endwhile y endif delimitan los bloques ehile e if que habíamos abierto al principio, para trabajar con el Loop. Cualquier código colocado después de estas dos líneas se mostrará en la parte inferior de la página, después de haber mostrado todas las entradas.
El Loop suele estar rodeado de etiquetas HTML en los archivos de plantilla de tu tema de WordPress. El siguiente código muestra cómo el bucle está estructurado en el núcleo (single.php) del futuro tema TwentySixteen que WordPress ya está preparando para lanzar a finales de este año.
Aquí puedes ver cómo los elementos del Loop que acabamos de detallar aparecen entre elementos HTML. Así funciona un tema normal de WordPress. Los elementos HTML pueden cambiar, pero las diferentes sentencias del Loop siempre son las mismas en todos los temas WordPress. Cambiar el estilo en el que el tema muestra los contenidos y elegir qué metadatos de una entrada se van a mostrar en la web se hace a través de Template Tags, que estudiaremos a continuación.
Mostrando contenidos con Template Tags
Ahora que ya sabemos cómo funciona el Loop de WordPress y qué pinta tiene, es el momento de hacer uso de este para visualizar contenidos específicos.
Existen un montón de funciones PHP de WordPress que se usan en tu tema para mostrar contenidos dentro del Loop. Estas funciones se conocen como Template Tags y las puedes ver todas en el Codex.
Para usar un Template Tag simplemente hay que invocar su función PHP y listo. Por ejemplo, para mostrar el título de la entrada dentro del Loop basta con llamar al Template Tag the_title(), que mostrará el título de la entrada. Por tanto, no has de ser un experto en PHP para usarlos. Simplemente llama a la función que necesites dentro del Loop y esta se encargará del trabajo sucio.
Como te digo, hay muchos Template Tags disponibles en WordPress. Algunos deben estar dentro del Loop, mientras que otros se pueden utilizar en cualquier lugar en los archivos de tu tema. Ten en cuenta que, en este contexto, cuando hablamos de Template Tags nos referimos a las funciones de WordPress utilizados para extraer los datos de entradas para su visualización.
Normalmente vas a utilizar sólo un puñado de Template Tags en tus Loops. A continuación te muestro los Template Tags más usados en este contexto. Estos Template Tags simplemente retornan el flujo de ejecución y muestran los contenidos de una entrada en cuestión.
the_permalink()– Muestra la URL de tu entrada.the_title()– Muestra el título de tu entrada.the_ID()– Muestra el identificador interno de tu entrada.the_content()– Muestra el contenido completo de tu entrada.the_excerpt()– Muestra el extracto de tu entrada. Si el extracto se rellenó al editar la entrada en la pantalla de edición, se usará ese texto. Sino, WordPress generará de forma automática un extracto a partir del contenido de la entrada.the_time()– Muestra la fecha/hora de publicación de la entrada.the_author()– Muestra el autor de la entrada.the_tags()– Muestra las etiquetas de la entrada.the_category()– Muestra las categorías de la entrada.edit_post_link()– Muestra un enlace de edición que aparece sólo si estás registrado en la web y tienes permisos de edición para la entrada.comment_form()– Muestra un formulario completo para añadir comentarios en la entrada.
Para aprender a usar los Template Tags, basta con colocar cualquiera de estas funciones dentro del Loop y ver los resultados. En el siguiente ejemplo se puede ver que se han añadido en el Loop un par de Template Tags diferentes:
Como se puede ver, los títulos de entradas se muestran con etiquetas HTML a cuyo enlace es el enlace permanente (o permalink) de cada entrada. El contenido de las entradas se muestra justo debajo del título de la entrada, y toda la entrada está dentro de una etiqueta div.
Repaso final
Si no conocías la manera de funcionar de WordPress, espero que ahora sí lo sepas 😉 y tengas más claro que todo se basa en el Loop. Como hemos visto, el Loop es la estructura de acceso y visualización de contenido más importante de WordPress. Y forma el corazón de tu tema.
De forma simple, hemos visto cómo el bucle obtiene las entradas o páginas y las va recorriendo una a una a la vez que se genera el código HTML junto a los contenidos mediante el uso de Template Tags. Estas funciones de WordPress nos simplifican la vida a la hora de visualizar contenidos específicos, evitándonos el tener que hacer consultas a la base de datos nosotros mismos.
Si este artículo te ha sido útil, recuerda pasarte por la web a menudo, ya que en futuras entradas te enseñaré a modificar el Loop de WordPress para cambiar los resultados que este obtiene y a ser un maestro del Loop usando múltiples Loops en tu tema.
Imagen destacada de Vox Efx.
Deja una respuesta