El bucle de WordPress explicado para principiantes

El bucle de WordPress es el código que utiliza WordPress para mostrar contenido en su sitio web.

Tome su plantilla index.php, por ejemplo. En un tema básico de blogs, esta plantilla generalmente se usa para mostrar varias publicaciones o extractos de publicaciones en su página de inicio. La plantilla index.php usa WordPress Loop para hacer esto.

Es necesaria una comprensión básica del bucle de WordPress si desea modificar su diseño de WordPress. Incluso si no tiene experiencia con PHP o HTML, debería poder comprender cómo se construye el bucle de WordPress después de leer este tutorial.

Comprender el bucle de WordPress

La mejor manera de aprender sobre WordPress Loop es mirar un ejemplo básico de cómo se usa en un tema de WordPress. Por lo tanto, echemos un vistazo a un código simple inicialmente y luego puedo desglosar cada línea para brindarle una mejor comprensión de lo que hace cada línea.

A continuación se muestra un ejemplo de un bucle de WordPress simple. El código en su propio tema de WordPress para el bucle puede ser mucho más largo, sin embargo, sigue la misma estructura que este.

01
02
03
04
05
06
07
08
09
10
<?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            //
            // Post Content here
            //
        endwhile; // end while
    endif; // end if
?>

Si tiene algo de experiencia en el uso de PHP, el código anterior se explicará por sí mismo; sin embargo, echemos un vistazo más de cerca a cada línea para el beneficio de aquellos que no lo hacen.

Lo primero que hacemos es avisar a su servidor que vamos a utilizar PHP . Abrimos la declaración PHP usando <?php.

01
<?php

En la siguiente línea, tenemos una declaración básica «if » que usa la función have_posts . La función de WordPress have_posts es una función booleana; lo que significa que el resultado es verdadero o falso.

Por lo tanto, la siguiente línea de código dice efectivamente «Si hay algunas publicaciones, muestra esta línea de código, si no, no hagas nada».

01
if ( have_posts() ) :

En la siguiente línea, usamos un bucle while. Un bucle while ejecutará un fragmento de código siempre que algo sea cierto. En este caso, estamos diciendo que mientras haya publicaciones para mostrar, ejecute la siguiente línea de código.

Por lo tanto, si hubiera configurado su configuración de lectura de WordPress para mostrar cinco publicaciones en la página de inicio, la función while ejecutaría las declaraciones contenidas dentro del bucle while cinco veces y luego se detendría.

01
while ( have_posts() ) :

Luego llamamos a los datos de la siguiente publicación usando la función de WordPress the_post . Esto configura la publicación y nos permite recuperar cualquier parte de la publicación, incluido el contenido, la fecha de publicación, el autor, la categoría en la que se publicó y mucho más más adelante.

01
the_post();

Una vez que hayamos llamado nuestra publicación, podemos mostrar lo que queramos de ella. Hay más de cien etiquetas de plantilla disponibles que solo se pueden usar dentro del bucle de WordPress.

Los ejemplos incluyen the_title para mostrar el título de la publicación, the_content para mostrar la publicación en sí y the_category para mostrar la categoría de la publicación.

01
02
03
//
// Post Content here
//

Después de haber confirmado la información que queremos que se muestre con cada publicación, cerramos el ciclo while.

01
endwhile; // end while

Luego cerramos la sentencia if.

01
endif; // end if

Finalmente, terminamos cerrando PHP.

01
?>

Como puede ver, cuando desglosa el bucle de WordPress, es muy fácil de entender.

Ejemplos del bucle de WordPress

En el códice de WordPress, WordPress comparte el código de la plantilla index.php más pequeña del mundo. Como puede ver en este código (que se muestra a continuación), todo lo que contiene la plantilla index.php es una llamada al encabezado, el bucle de WordPress, una llamada a una barra lateral y una llamada a un pie de página. Ilustra perfectamente lo simple que puede ser WordPress.

01
02
03
04
05
06
07
08
09
10
11
<?php
get_header();
if (have_posts()) :
   while (have_posts()) :
      the_post();
         the_content();
   endwhile;
endif;
get_sidebar();
get_footer();
?>

El código para WordPress Loop se ve un poco diferente en la mayoría de los temas de WordPress porque la información que se muestra es un poco diferente. Por lo tanto, examinar el bucle de WordPress en diferentes diseños es una excelente manera de ver exactamente cómo funciona el bucle en la práctica.

A continuación se muestra el código que se utiliza para WordPress Loop en la plantilla index.php del tema actual predeterminado de WordPress TwentyFourteen .

Como puede ver, TwentyFourteen llama a una plantilla diferente para el área de contenido según el tipo de formato de publicación que se llame, por ejemplo, una publicación estándar mostrará información diferente de las publicaciones de video y las publicaciones de citas.

Los enlaces de navegación se muestran después de la última publicación y se muestra un mensaje a los visitantes si no se han encontrado publicaciones (lo hacen llamando a la plantilla content-none.php).

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
<?php
            if ( have_posts() ) :
                // Start the Loop.
                while ( have_posts() ) : the_post();
 
                    /*
                     * Include the post format-specific template for the content. If you want to
                     * use this in a <a class="wpil_keyword_link" href="https://www.elegantthemes.com/blog/resources/wordpress-child-theme-tutorial"   title="child theme" data-wpil-keyword-link="linked">child theme</a>, then include a file called called content-___.php
                     * (where ___ is the post format) and that will be used instead.
                     */
                    get_template_part( 'content', get_post_format() );
 
                endwhile;
                // Previous/next post navigation.
                twentyfourteen_paging_nav();
 
            else :
                // If no content, include the "No posts found" template.
                get_template_part( 'content', 'none' );
 
            endif;
        ?>

El bucle de WordPress es más fácil de seguir en TwentyFourteen y TwentyThirteen porque el código para el contenido y la metainformación se coloca en una plantilla separada. También es una forma más práctica de estructurar código para temas que admiten formatos de publicación .

Si echamos un vistazo al popular tema Twenty Twelve , podemos ver que WordPress Loop todavía llama a otros archivos de plantilla; sin embargo, queda mucho código dentro del bucle de WordPress en la plantilla index.php.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?php if ( have_posts() ) : ?>
 
            <?php /* Start the Loop */ ?>
            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( 'content', get_post_format() ); ?>
            <?php endwhile; ?>
 
            <?php twentytwelve_content_nav( 'nav-below' ); ?>
 
        <?php else : ?>
 
            <article id="post-0" class="post no-results not-found">
 
            <?php if ( current_user_can( 'edit_posts' ) ) :
                // Show a different message to a logged-in user who can add posts.
            ?>
                <header class="entry-header">
                    <h1 class="entry-title"><?php _e( 'No posts to display', 'twentytwelve' ); ?></h1>
                </header>
 
                <div class="entry-content">
                    <p><?php printf( __( 'Ready to publish your first post? <a href="%s">Get started here</a>.', 'twentytwelve' ), admin_url( 'post-new.php' ) ); ?></p>
                </div><!-- .entry-content -->
 
            <?php else :
                // Show the default message to everyone else.
            ?>
                <header class="entry-header">
                    <h1 class="entry-title"><?php _e( 'Nothing Found', 'twentytwelve' ); ?></h1>
                </header>
 
                <div class="entry-content">
                    <p><?php _e( 'Apologies, but no results were found. Perhaps searching will help find a related post.', 'twentytwelve' ); ?></p>
                    <?php get_search_form(); ?>
                </div><!-- .entry-content -->
            <?php endif; // end current_user_can() check ?>
 
            </article><!-- #post-0 -->
 
        <?php endif; // end have_posts() check ?>

Es mejor recordar el principio de codificación «No se repita». Al reducir la repetición , puede crear temas más limpios y sencillos que son más fáciles de modificar.

Descripción general

El bucle de WordPress es utilizado por WordPress para publicar contenido. En su forma más simple, WordPress Loop simplemente verifica si hay publicaciones o páginas para mostrar y luego las muestra.

Mediante el uso de múltiples bucles y la modificación de bucles mediante la clase WP_Query , los desarrolladores de temas pueden diseñar temas de sitios web complejos. El código para esto a veces es complicado, pero el principio general de cómo los desarrolladores crean temas complejos se basa en el concepto básico de WordPress Loop.

En este artículo, expliqué para qué sirve WordPress Loop y mostré cómo se usa en temas para mostrar publicaciones y páginas.

Para obtener más información sobre WordPress Loop, consulte las siguientes páginas en el códice de WordPress :

  • El bucle de WordPress
  • El bucle en acción
  • Etiquetas de plantilla

Espero que hayas disfrutado este tutorial. Asegúrese de suscribirse a Elegant Themes si desea actualizaciones de nuestros últimos artículos.

Imagen en miniatura del artículo por mejnak / shutterstock.com