El bucle de WordPress explicado: qué es y cómo funciona

El bucle es una parte central de WordPress. Sin él, no vería contenido en ningún sitio web de WordPress. Es responsable de asegurarse de que los artículos aparezcan en la página del blog y en los archivos, así como el contenido estático en páginas individuales.

Si eres un diseñador de temas, no podrás aprender a usarlo. Sin embargo, como usuario ocasional de WordPress, es posible que ni siquiera sepa que existe.

Para aliviar eso, en esta publicación, explicaremos el bucle de WordPress en detalle. Repasaremos qué es y cómo funciona, y dónde encontrarlo en WordPress. También aprenderá a crear el suyo propio y verá algunos ejemplos del bucle de WordPress para solidificar su comprensión.

¿Qué es el bucle de WordPress (y dónde lo encuentras)?

Si tuviera que explicar brevemente qué es el bucle de WordPress, es simplemente el marcado que obtiene y genera contenido en las páginas de un sitio web de WordPress. Ya sea que se trate de una página estática, publicación, página de blog o archivo, en cualquier lugar donde WordPress extraiga contenido de la base de datos y lo muestre en una página, el bucle está involucrado.

Sin embargo, ¿por qué se llama bucle en primer lugar?

Porque se ejecutará repetidamente. Además, como verá a continuación, consiste literalmente en un bucle PHP.

¿Con qué frecuencia se ejecuta el bucle de WordPress?

Hasta que no quede nada que mostrar. Incluso en páginas estáticas, recorre el contenido disponible. Sin embargo, en este caso, se detiene después de una pasada.

¿Cómo se ve el bucle de WordPress?

Para que quede más claro de lo que estamos hablando, veamos un ejemplo y lo repasemos paso a paso. Aquí hay un ejemplo de cómo se ve un simple bucle de WordPress:

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

Si ya conoces PHP o eres desarrollador de WordPress, no deberías tener ningún problema para entenderlo. Sin embargo, para todos los demás, repasemos las piezas una por una.

• if ( have_posts() ) : — Esta es una declaración if que usa la función have_posts() . Si las declaraciones son comunes en la programación, simplemente dicen "si se aplica la siguiente condición, continúe". En este caso, la condición es have_posts() , que es simplemente una verificación de si existe alguna publicación que pueda mostrarse.
• while ( have_posts() ) : — Esta línea es un bucle while y marca el comienzo del bucle de WordPress. Ejecutará el código que contiene siempre que su condición sea verdadera. Nuevamente, la condición es si WordPress tiene publicaciones en la tienda. La frecuencia con la que se volverá true está determinada por la cantidad de publicaciones establecidas en la configuración de WordPress en la interfaz de administración.
• the_post(); — Este es el código que ejecuta el bucle. Es una función de WordPress que llama a todos los datos disponibles para la próxima publicación y los guarda para prepararlos para su visualización. Para eso, tenemos muchas etiquetas de plantilla de las que hablaremos a continuación.
• // Display content here : aquí es donde colocamos el marcado que determina qué parte del contenido mostrar y de qué manera. Suele ser una mezcla de PHP y HTML. No lo mostramos aquí porque es más complejo y lo revisaremos más adelante.
• endwhile; — El fragmento de código que cierra el ciclo while después de que haya hecho lo que necesitamos que haga.
• endif; — Igual que el anterior pero para la sentencia if .

Entonces, básicamente, la estructura es la siguiente: verifique si existen publicaciones, luego extraiga los datos necesarios de la base de datos y muéstrelos de una manera predeterminada, repita esto siempre que haya publicaciones válidas para mostrar.

Sintaxis alternativa

Una cosa rápida, a veces también verá el bucle escrito así:

 if ( have_posts() ) { while ( have_posts() ) { the_post(); // Display content here } // end while } // end if

Esto es exactamente lo mismo que el ejemplo anterior, solo que en una sintaxis PHP alternativa. Cuál usas depende realmente de ti. En aras de la coherencia, continuaremos con la primera variación.

¿Dónde encontrar el bucle de WordPress?

El hecho de que el bucle siempre esté funcionando cada vez que aparece contenido en una página ya responde dónde encontrar el bucle de WordPress. Las respuestas están en cada archivo de plantilla de su tema que muestra contenido.

Alternativamente, dependiendo de la arquitectura de su tema, también podría estar en una parte de la plantilla. Estos son archivos de plantilla que contienen piezas de código de uso frecuente (como el bucle). Se pueden extraer a otros archivos en lugar de reutilizar el mismo fragmento de código cada vez.

Por ejemplo, si abre el archivo page.php del tema Twenty Twenty-One, puede ver que, aquí, el bucle se divide en partes. Si bien comienza dentro del propio archivo, la sección que determina cómo generar los datos reside en una parte de la plantilla llamada content-page.php .

 /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-page' ); // If comments are open or there is at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } endwhile; // End of the loop.

La jerarquía de plantillas de WordPress determina qué archivo usa el sistema para mostrar qué tipo de página y cada archivo debe contener un bucle o una referencia a dónde puede encontrarlo.

También significa que el bucle puede verse diferente en archivos individuales, es decir, en diferentes páginas. Por ejemplo, en un archivo, es posible que solo desee mostrar extractos de publicaciones, mientras que en la página principal del blog, es posible que desee mostrar publicaciones completas (hasta el enlace "leer más"). Para eso, necesita diferentes tipos de marcado, por lo que el ciclo no se ve igual dentro home.php y archive.php .

Cómo crear un bucle

Para crear un ciclo, básicamente puede comenzar con el código simple que analizamos anteriormente. Ese es realmente el bucle estándar. Aquí está otra vez:

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

La parte complicada es lo que dejamos fuera: la parte que determina la visualización del contenido. Para eso, como se mencionó, generalmente usa una combinación de HTML y PHP. Por ejemplo, así es como le dirías a WordPress que escupa la publicación envuelta en una etiqueta <article> con una clase e identificación personalizadas, el título como un encabezado h1 , más la imagen y el contenido destacados.

 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <h1><?php the_title(); ?></h1> <?php the_post_thumbnail(); ?> <?php the_content(); ?> </article> <?php endwhile; endif; ?>

Una cosa que se destaca arriba es que hay muchas etiquetas escritas con guiones bajos. Estas son etiquetas de plantilla de WordPress, que ofrecen accesos directos para llamar a partes comunes del contenido. Aquí, usamos the_title() para mostrar el título de la publicación, the_post_thumbnail() para la imagen destacada y the_content() para el contenido principal. Hay muchos más, como the_excerpt() o the_category() . Puede encontrar una lista de opciones aquí.

Otra cosa que es importante para el ciclo de WordPress son las etiquetas condicionales. Ves que se usan mucho en el marcado relacionado con bucles para mostrar algo solo bajo ciertas condiciones. Por ejemplo, es muy común envolver the_post_thumbnail() en una declaración condicional para evitar que WordPress intente publicarlo en la página cuando no existe una imagen destacada.

 <?php if ( has_post_thumbnail() ): the_post_thumbnail(); endif; ?>

Tenemos más ejemplos a continuación. Para obtener más información sobre las etiquetas condicionales, consulte el Codex de WordPress.

Ejemplos del bucle de WordPress

Como parte final de este tutorial, repasaremos algunos ejemplos de cómo usar el bucle de WordPress.

El tema veintiuno

Al mirar el tema Twenty Twenty-One, lo primero que se destaca es su uso intensivo de partes de plantilla. Todos los archivos de plantilla estándar como page.php , single.php e incluso index.php inician el ciclo dentro del archivo pero luego usan get_template_part para descargar la visualización de contenido a otros archivos. En este caso, son content-page.php , content-single.php y content.php respectivamente. Aquí hay una versión abreviada de single.php como ejemplo:

 <?php get_header(); /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-single' ); // additional code for comments and post navigation endwhile; // End of the loop. get_footer();

Esto también es visible en otros archivos. Por ejemplo, el encabezado y el pie de página también tienen sus propias partes de plantilla. Puede ver referencias a los que están dentro del ciclo en otros lugares. Por ejemplo, si observa content-single.php , puede ver una llamada a la parte de la plantilla author-bio.php al final.

 <article <?php post_class(); ?>> <header class="entry-header alignwide"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> <?php twenty_twenty_one_post_thumbnail(); ?> </header><!-- .entry-header --> <div class="entry-content"> <?php the_content(); wp_link_pages( array( 'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">', 'after' => '</nav>', /* translators: %: Page number. */ 'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ), ) ); ?> </div><!-- .entry-content --> <footer class="entry-footer default-max-width"> <?php twenty_twenty_one_entry_meta_footer(); ?> </footer><!-- .entry-footer --> <?php if ( ! is_singular( 'attachment' ) ) : ?> <?php get_template_part( 'template-parts/post/author-bio' ); ?> <?php endif; ?> </article><!-- #post-<?php the_ID(); ?> -->

Aparte de eso, es relativamente estándar justo:

1. Abra un elemento HTML <article> con una identificación y una clase personalizadas
2. Cree el elemento de encabezado del artículo que genera el título envuelto en un encabezado h1 y muestra la imagen destacada con una función personalizada para Twenty Twenty-One
3. Continúe con un elemento entry-content que contenga la etiqueta de plantilla the_content() para generar contenido de publicación única
4. Incluya marcado para la paginación y el pie de página de la entrada con otra función Twenty Twenty-One para mostrar la metainformación de la publicación.
5. Finalmente, está la citada llamada a la biografía del autor en su propia parte de plantilla.

El tema predeterminado de Twenty Ten WordPress

Si regresa al primer tema predeterminado de WordPress, Twenty Ten, y usa el repositorio de subversion para buscar archivos de la versión 1.0, puede ver cómo ha evolucionado con el tiempo el manejo de los archivos de bucle y de plantilla. En aquel entonces, muchos de los archivos de plantilla contenían sus propios bucles completos de WordPress en lugar de externalizarlos a partes de plantilla reutilizables. Puedes ver esto claramente en el page.php del tema.

 <?php get_header(); ?> <div> <div role="main"> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <div <?php post_class(); ?>> <?php if ( is_front_page() ) { ?> <h2 class="entry-title"><?php the_title(); ?></h2> <?php } else { ?> <h1 class="entry-title"><?php the_title(); ?></h1> <?php } ?> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?> <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?> </div><!-- .entry-content --> </div><!-- #post-## --> <?php comments_template( '', true ); ?> <?php endwhile; ?> </div><!-- #content --> </div><!-- #container --> <?php get_sidebar(); ?> <?php get_footer(); ?>

Lo mismo también es visible en onecolumn-page.php , que es un archivo que controla una plantilla de página personalizada que ofrece el tema. Lo que también es digno de mención es que está usando la llamada anterior al ciclo que se escribió en una línea en ese entonces.

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

En los temas modernos, lo más común es verlo distribuido en varias líneas, como se vio anteriormente, para aumentar la legibilidad del código.

El tema Twenty Ten también tiene un archivo independiente loop.php que es demasiado largo para incluirlo aquí sin exceder mi límite de palabras. Se divide en tres partes que controlan la visualización de varios tipos de publicaciones (galería de imágenes, publicaciones de la categoría Apartes , todas las demás publicaciones). Cada uno de estos se desglosa aún más por declaraciones if y else para dar cuenta de diferentes casos, como páginas de archivo y búsqueda.

 <?php while ( have_posts() ) : the_post(); ?> <?php /* How to display posts of the Gallery format. The gallery category is the old way. */ ?> // Lots of code here <?php else : ?> // Lots of code here as well <?php endif; ?> <?php /* How to display posts of the Aside format. The asides category is the old way. */ ?> // Even more code <?php /* How to display all other posts. */ ?> <?php else : ?> // Still more code <?php else : ?> // A bit more markup <?php endif; ?> // And a bit more code <?php endif; // This was the if statement that broke the loop into three parts based on categories. ?> <?php endwhile; // End of the loop. Whew. ?>

Todo contiene una lógica bastante enrevesada, por lo que resulta bastante largo y complicado. Me alegro de que tengamos otras formas de manejar esto hoy y le recomiendo que lo mire para ver un ejemplo de bucle de WordPress que no desea emular.

Por cierto, si crees que estoy siendo demasiado duro con los desarrolladores de entonces, puedes estar seguro de que están de acuerdo con mi evaluación. Solo mire el comentario del desarrollador donde loop.php cierra el ciclo.

 <?php endwhile; // End the loop. Whew. ?>

El bloque de bucle de consulta de WordPress

Es posible que no lo sepa porque es una característica relativamente nueva de Gutenberg, pero el editor de bloques (y, por extensión, la edición de sitio completo) ahora también tiene un bloque que contiene un bucle de WordPress. Se llama Query Loop Block y puede agregarlo a su sitio como cualquier otro bloque. La forma más fácil es agregar una barra inclinada y escribir su nombre como /queryloop . Presiona enter y aparecerá en la página.

El bloque permite crear un bucle PHP sin tener que escribir código. Mostrará automáticamente las últimas publicaciones en su sitio. Además de eso, tiene varias opciones de personalización. En primer lugar, el bloque viene con una serie de diseños preestablecidos. Puede recorrerlos mediante las flechas o hacer clic en la opción Cuadrícula para verlos todos a la vez.

Elige lo que quieras o haz clic en Elegir si has llegado a tu opción favorita para finalizar la elección. Es importante tener en cuenta que los diseños consisten en patrones de bloques, por lo tanto, grupos preestablecidos de bloques individuales. Esto también significa que puede organizarlos de manera diferente según sea necesario, siguen siendo bloques normales. Use las flechas o haga clic y mantenga presionada la opción Arrastrar para moverlos donde desee.

Además, cada bloque (y, a menudo, cada grupo de bloques) también viene con sus opciones habituales en la pantalla del editor principal y en la barra lateral. Aquí, puede cambiar sus colores, tamaños de fuente, formatos y más.

Una vez satisfecho, si publica o obtiene una vista previa de la página, verá que aparece su bucle de consulta de WordPress personalizado en ella. Entonces, incluso si no es un desarrollador de WordPress y no entiende PHP, aún puede aprovechar lo que el bucle tiene para ofrecer.

El bucle de WordPress explicado en pocas palabras

El bucle es algo con lo que cualquier profesional de WordPress debe estar familiarizado. Sin embargo, incluso si eres un usuario más casual, no es una mala idea entender cómo funciona. Podría facilitar la resolución de problemas o la creación de plantillas de página personalizadas si así lo desea.

En esta publicación, hemos repasado qué es el bucle, dónde reside y lo hemos desglosado en detalle. También hemos visto cómo puede crear su propio bucle y ejemplos a partir de temas predeterminados y el nuevo bloque de consulta. A estas alturas, ya sabe todo lo que necesita para crear y personalizar el bucle de WordPress.

¿Cuál es tu uso favorito del bucle de WordPress? ¡Por favor comparta sus pensamientos en los comentarios a continuación!

Imágenes: Jonny Gios/Unsplash, Tine Ivanic/Unsplash