• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Core / ¿Qué es el Loop de WordPress?

¿Qué es el Loop de WordPress?

Loop de WordPress

[ 6 septiembre 2017 ] [ Actualizado: 29 noviembre 2017 ]
[ Autor: Jhon Marreros Guzmán ][ Core - Avanzado] [ ]

funcionalidad

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Si estas pensando en hacer modificaciones a la estructura o forma en que tu plantilla muestra el contenido, entonces te viene bien conocer que es el Bucle o Loop de WordPress.

 

1- Generalidades

El Loop es una porción de código que usa WordPress para mostrar contenido. Si por ejemplo nuestro contenido son entradas, a través del Loop de WordPress y de la Jerarquía de Archivos del Theme, podemos mostrar:

  • Un listado de entradas, al mostrar la página de inicio (home.php o front-page.php), al mostrar una categoría (category.php), etc.
     

    Lista de entradas en el Inicio
     
  • El detalle de una entrada específica. (single.php)
     
    Detalle de una entrada

 

Ten en cuenta que el Loop de WordPress no se limita únicamente a entradas puede ser aplicado para cualquier Custom Post Type

 

2- Código básico de Loop de WordPress

El siguiente código muestra un código básico de Loop en WordPress:

<?php
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post();
		//
		// Contenido Aqui
		//
	}
}

Lo que hace este código:

  • Se empieza con una condicional y dentro la función have_posts() comprueba si existe contenido a mostrar, esta condicional se puede usar con un else para mostrar un mensaje alternativo informando que no existe contenido a mostrar.
  • Se usa una estructura de bucle o loop a través del while, que comprueba nuevamente la función have_posts() cada vez que se realiza una interacción.
  • La función the_post() es llamada dentro del bucle, con esto se mueve el puntero al registro actual y por lo tanto dentro del bucle podemos recuperar información referida a la entrada específica usando cualquier Template Tag de WordPress.

 

Si estas consultando una entrada individual, sólo tendrás un registro como parte del bucle

 

3- Código dentro del bucle

Dentro del Loop puedes procesar código HTML, PHP y algunas funciones propias de WordPress como los Template Tag.

En el siguiente código vemos un ejemplo de bucle con condicional.


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

	<article class="<?php post_class();?>">
		<header>
		<h1><?php the_title(); ?></h1>
		</header>
		<?php the_content(); ?>
	</article>

<?php endwhile; else: ?>

	<article>
		<p>No hay contenido a mostrar </p>
	</article>

<?php endif; ?>

Templates Tags usados en el código anterior:

  • post_class(): Devuelve las clases CSS estándard de WordPress para un artículo
  • the_title(): Devuelve el título del artículo
  • the_content(): Devuelve el contenido del artículo

 

Los Templates Tags anteriores imprimen directamente el contenido, también puedes usar Template Tags que sólo devuelven el valor, por ejemplo : get_post_class(), get_the_title(), get_the_content()
Es posible que, para mantener mejor organizado el código, dentro del bucle encuentras también referencias a archivos externos a través de la función get_template_part()

 

4- Ejemplo de modificación del Loop

En este ejemplo vamos a mostrar una imagen, que podría ser un banner publicitario, cada dos artículos en el bucle de inicio de nuestro sitio.

<?php
if ( have_posts() ) :
	$i = 0;  
	while ( have_posts() ) : the_post();

		get_template_part( 'template-parts/post/content', get_post_format() );

		//Muestra código HTML cada dos entradas
		if ( ++$i % 2 == 0) echo'<img src="https://unsplash.it/600/200/">';

	endwhile;
else :
	get_template_part( 'template-parts/post/content', 'none' );
endif;

En el código anterior:

  • Se inicializa una variable $i dentro de la condicional.
  • Dentro del bucle se esta usando la función get_template_part() para organizar el contenido del Loop en un archivo diferente.
  • Se incrementa la variable $i y luego se comprueba si es un número par, de ser el caso se realiza alguna acción, en el código se imprime el código HTML de una imagen.
  • Finalmente en la sección else se usa igualmente la función get_template_part().

 

En lugar de imprimir un código HTML directamente, podrías por ejemplo ejecutar algún Shortcode que te brinde la imagen de banner con la función do_shortcode()

 

¿Aún con dudas?, en el siguiente video se explica los puntos tratados anteriormente.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Personalizar el Loop de WooCommercePersonalizar el Loop de WooCommerce
  • Deshabilitar Gutenberg en WordPress selectivamenteDeshabilitar Gutenberg en WordPress selectivamente
  • Ajax sin usar jQuery en WordPressAjax sin usar jQuery en WordPress
  • Formulario de login sin plugins en WordPressFormulario de login sin plugins en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (4 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Jesús

    14 julio, 2020

    Saludos amigo. Si quisiera en ese loop mostrar un banner publicitario diferente cada x número de post cómo sería? de verdad me estoy matando con ese detalle. Capaz y sea algo sencillo, pero no me sale

    • Jhon Marreros Guzmán

      14 julio, 2020

      Hola, de acuerdo a la sección 4, tendrías que generar dinámicamente la imagen antes de mostrarla, puedes llamar a una función que recupere estas imágenes, es decir en lugar del echo. Las rutas de las imágenes puedes tenerlas fijas en un array.

  2. osmar

    7 noviembre, 2020

    amigo te falto comentar que el contenido que se va a mostrar va a depende del template en el que estemos

    • Jhon Marreros Guzmán

      7 noviembre, 2020

      Hola, el código debería funcionar para cualquier tema (aunque en algunos casos podrían requerir ajustes, por ejemplo para los filtros y paginación). Aunque lo ideal es que este código sea parte de un plugin, mostrado a través de un shortcode por ejemplo.

  3. Javier

    3 junio, 2021

    ¡Hola Jhon!

    Muchas gracias por el tutorial.

    Quería hacer una pregunta, si tengo un custom post type, entiendo que para listar todos los creados con el aspeto de mi tema tengo que crear un archive-my-custom-post-type.php, pero como hago para llamar a la URL que pinta ese listado de custom post type?

    Espero haberme explicado, un saludo y gracias!!

    • Jhon Marreros Guzmán

      4 junio, 2021

      Hola, para mostrar el CPT como parte del bucle existente revisa el punto cinco del siguiente artículo: https://decodecms.com/usando-custom-post-types-wordpress/ , la otra opción como comentas es crear un archivo en base a algún archivo de loop existente. Saludos.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Formulario de contacto sin plugins en WordPress

Habilitar comentarios en el inicio de WordPress

Crear un Widget para el dashboard de WordPress

Agregar búsqueda en un menú de WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados