\n\n\n\n\n\n\n
¿Qué es el Loop de WordPress?<\/h2>\n
Es una característica central del CMS, que potencia la visualización dinámica de contenidos. En términos generales, se trata de un bloque de código PHP que recupera entradas, páginas y otros tipos de contenido de la base de datos y los muestra en un sitio web de WordPress.<\/p>\n <\/div>\n\n\n\n<\/p>
Cómo funciona el Loop de WordPress<\/h3>
Cada vez que un usuario visita un sitio WordPress, el Loop recupera su contenido de la base de datos y lo muestra en la web. <\/p>
Para ello, el Loop rastrea la base de datos en busca del contenido necesario, incluyendo su título, fecha, texto y metadatos. A continuación, el Bucle de WordPress lo formatea de acuerdo con los criterios específicos antes de mostrarlo en el sitio. <\/p>
Veamos un ejemplo sencillo del Loop de WordPress:<\/p>
<?php get_header(); ?>\n<?php \nif ( have_posts() ) : while ( have_posts() ) : the_post(); ?>\n<?php the_title() ;?>\n<?php the_author(); ?>\n<?php the_post_thumbnail(); ?>\n<?php endwhile; ?>\n<?php endif; ?>\n<?php get_footer(); ?><\/code><\/pre>Veamos ahora de qué es responsable cada función de WordPress:<\/p>
\n- get_header() <\/strong>y get_footer()<\/strong>: incluye un encabezado y un pie de página en tu entrada.<\/li>\n\n\n\n
- if ( have_posts() )<\/strong>: junto con la función have_posts()<\/a>, un comando if<\/strong> determina si la consulta actual de WordPress tiene alguna entrada para mostrar. Puede devolver true <\/strong>si los posts existen o false <\/strong>si no hay posts. <\/li>\n\n\n\n
- while ( have_posts() )<\/strong>: ejecuta cualquier código de WordPress especificado hasta que no queden entradas en el Loop. <\/li>\n\n\n\n
- the_post()<\/strong>: además de preparar el puesto para su visualización, comprueba y recupera todos los datos pertinentes. <\/li>\n\n\n\n
- the_title(), the_author(), the_post_thumbnail()<\/strong>: el contenido real que desea mostrar. En nuestro caso, los datos de la entrada incluirán el título, el autor y la miniatura de la misma. Normalmente, esta parte también se rellena con código HTML para dar formato. <\/li>\n<\/ul>
Las líneas finales endwhile <\/strong>y endif <\/strong>sirven para cerrar el bucle while <\/strong>y la función if<\/strong>.<\/p>\n\n\n\n
\n Consejo profesional<\/h4>\n
El Loop muestra las etiquetas de plantilla de WordPress<\/a> the_title()<\/strong>, the_time()<\/strong>, y the_category()<\/strong> por defecto para cada entrada.<\/p>\n <\/div>\n\n\n\n<\/p>Como alternativa, puedes utilizar la siguiente sintaxis de código PHP para tu Loop de WordPress. Mientras que su funcionalidad y los elementos son los mismos, el formato de sintaxis difiere. <\/p>
<?php\nget_header();\nif ( have_posts() ) :\n\twhile ( have_posts() ) : the_post();\n\tthe_title();\n\tthe_author();\n\tthe_post_thumbnail();\n\tendwhile;\nendif;\nget_footer();\n?><\/code><\/pre>Cómo utilizar el Loop de WordPress <\/h2>
En esta sección, proporcionaremos algunos ejemplos sencillos de cómo utilizar el Loop en WordPress. <\/p>
\n![\"\"](\"https:\/\/blog.hostinger.io\/mx-tutoriales\/wp-content\/uploads\/sites\/39\/2024\/06\/ES-New-WP_in-text-banner.png\")
<\/a><\/figure><\/div>Cómo poner un hipervínculo en el título de la entrada utilizando el Loop<\/h3>
Cada vez que crees una entrada en el blog, considera la posibilidad de añadir un hipervínculo en su título para facilitar la navegación.<\/p>
Para ello, utiliza el siguiente código con la etiqueta de plantilla the_permalink()<\/a>: <\/p><?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>\n <h2><a href=\"<?php the_permalink(); ?>\"><?php the_title() ;?><\/a><\/h2>\n <?php the_post_thumbnail(); ?>\n<?php endwhile; ?>\n<?php endif; ?><\/code><\/pre>Cómo usar el Loop de WordPress para mostrar contenido, autor, fecha y categoría<\/h3>
Si deseas que tu entrada incluya su autor, fecha, categoría y contenido, aplica el siguiente código:<\/p>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>\n <h2><?php the_title() ;?><\/h2>\n <?php the_author(); ?> <?php the_time('F j, Y'); ?> <?php the_category(); ?>\n <?php the_post_thumbnail(); ?>\n <?php the_content(); ?>\n<?php endwhile; ?> \n<?php endif; ?><\/code><\/pre>Cómo usar etiquetas condicionales en el Loop de WordPress<\/h3>
Las etiquetas condicionales son un conjunto de funciones que determinan cómo se mostrará el contenido de un sitio web. Normalmente, los desarrolladores de temas las añaden a los archivos de plantilla para permitir a los usuarios comprobar varias condiciones que controlan la apariencia general de sus sitios.<\/p>
Por ejemplo, si quieres mostrar contenido sólo en la página de inicio, utiliza la etiqueta condicional is_home()<\/strong>. Del mismo modo, para mostrar contenido sólo en una entrada única, utiliza la etiqueta is_single()<\/strong>.<\/p>Aquí están las etiquetas condicionales más comunes en WordPress: <\/p>
\n- is_front_page()<\/strong>: para la página principal de un sitio web.<\/li>\n\n\n\n
- is_page()<\/strong>: para una página de WordPress.<\/li>\n\n\n\n
- is_category()<\/strong>: para un archivo de categorías..<\/li>\n\n\n\n
- is_tag()<\/strong>: para un archivo de etiquetas.<\/li>\n\n\n\n
- is_archive()<\/strong>: para una página de archivo.<\/li>\n\n\n\n
- is_search()<\/strong>: para una página de resultados de búsqueda.<\/li>\n\n\n\n
- is_author()<\/strong>: para un archivo de autor.<\/li>\n\n\n\n
- is_404()<\/strong>: para una página de error 404.<\/li>\n<\/ul>
Recuerda establecerlos como true <\/strong>para cualquier página en la que quieras utilizarlos.<\/p>En el siguiente ejemplo, utilizaremos la etiqueta is_front_page()<\/strong> con un comando if<\/strong>:<\/p><?php if (is_front_page()) : ?> \n <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>\n <h2><?php the_title() ;?><\/h2>\n <?php the_post_thumbnail(); ?>\n <?php the_excerpt(); ?>\n\n<?php endwhile; ?>\n<?php endif; ?>\n<?php endif; ?><\/code><\/pre>Los usuarios de WordPress pueden utilizar el código anterior para mostrar las entradas en el inicio. <\/p>
Cómo personalizar el Loop de WordPress utilizando archivos de plantilla<\/h2>
Para personalizar el Loop mediante archivos de plantilla es necesario modificar el código PHP de los archivos del tema, incluidos archive.php<\/strong>, index.php<\/strong>, category.php<\/strong> y tag.php<\/strong>. <\/p>Para personalizar el Loop, puedes modificar los parámetros de consulta, añadir o eliminar elementos o cambiar la forma en que muestra el contenido de las entradas. <\/p>
\n\n\n\n
\n Consejo Profesional<\/h4>\n
Recomendamos utilizar un child theme<\/a> de WordPress para evitar perder las modificaciones durante las actualizaciones.<\/p>\n <\/div>\n\n\n\n<\/p>Ten en cuenta que WordPress está cambiando a temas basados en bloques que ya no utilizan archivos de plantilla PHP. Como resultado, necesitarás usar el bloque Bucle de Consulta para estos temas.<\/p>
Sin embargo, el uso del Loop es necesario para los temas que no están basados en bloques. <\/p>
Ejemplos del Loop en WordPress<\/h2>
En los siguientes ejemplos, añadiremos código a index.php<\/strong> del archivo de plantilla del tema Twenty Twenty. <\/p>Diferentes estilos para entradas de distintas categorías<\/h3>
Puede que quieras que las entradas de varias categorías se muestren de forma diferente. Esto puede ayudar a los lectores a diferenciar mejor tus entradas. <\/p>
El siguiente ejemplo mostrará el título, la categoría y el contenido de cada una, permitiéndote estilizar las entradas de la Categoría 3 de forma diferente. <\/p>
Ten en cuenta que el siguiente ejemplo de Loop está extraído de la web oficial de documentación de WordPress Loop<\/a> y consiste en útiles comentarios de código.<\/p><!-- Start the Loop. -->\n <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>\n \t<!-- Test if the current post is in category 3. -->\n \t<!-- If it is, the div box is given the CSS class \"post-cat-three\". -->\n \t<!-- Otherwise, the div box is given the CSS class \"post\". -->\n \t<?php if ( in_category( '3' ) ) : ?>\n \t\t<div class=\"post-cat-three\">\n \t<?php else : ?>\n \t\t<div class=\"post\">\n \t<?php endif; ?>\n \t<!-- Display the entry Title as a link to the Post's permalink. -->\n \t<h2><a href=\"<?php the_permalink(); ?>\" rel=\"bookmark\" title=\"Permanent Link to <?php the_title_attribute(); ?>\"><?php the_title(); ?><\/a><\/h2>\n \t<!-- Display the date (November 16th, 2009 format) and a link to other posts by this posts author. -->\n \t<small><?php the_time('F jS, Y'); ?> by <?php the_author_posts_link(); ?><\/small>\n \t<!-- Display the Post's entry content in a div box. -->\n \t<div class=\"entry\">\n \t\t<?php the_content(); ?>\n \t<\/div>\n \t<!-- Display a comma separated list of the Post's Categories. -->\n \t<p class=\"postmetadata\"><?php _e( 'Posted in' ); ?> <?php the_category( ', ' ); ?><\/p>\n \t<\/div> <!-- closes the first div box -->\n \t<!-- Stop The Loop (but note the \"else:\" - see next line). -->\n <?php endwhile; else : ?>\n \t<!-- The very first \"if\" tested to see if there were any Posts to -->\n \t<!-- display. This \"else\" part tells what to do if there weren't any. -->\n \t<p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?><\/p>\n \t<!-- REALLY stop The Loop. -->\n <?php endif; ?><\/code><\/pre>Insertar anuncios después de la primera entrada<\/h3>
Con el Loop de WordPress, puedes insertar fácilmente anuncios en tus posts. Esta es una gran estrategia de marketing para monetizar tu web<\/a>.<\/p>En el siguiente ejemplo, insertaremos anuncios después de la primera entrada:<\/p>
<?php if (have_posts()) : ?>\n<?php $count = 0; ?>\n<?php while (have_posts()) : the_post(); ?>\n<?php $count++; ?>\n <?php if ($count == 2) : ?>\n \/\/Ad code \n <h2><a href=\"<?php the_permalink(); ?>\"><?php the_title(); ?><\/a><\/h2>\n <?php the_author(); ?>\n <?php else : ?>\n <h2><a href=\"<?php the_permalink(); ?>\"><?php the_title(); ?><\/a><\/h2>\n <?php the_author(); ?>\n <?php endif; ?>\n<?php endwhile; ?>\n<?php endif; ?><\/code><\/pre>Recuerda sustituir la parte del Ad code<\/strong> por el código real.<\/p>Obtener entradas entre dos fechas<\/h3>
Para facilitar la gestión del sitio, puedes filtrar fácilmente las entradas entre dos fechas. Mediante el siguiente código:<\/p>
<?php function filter_where($where = ’) {\n $where .= \" AND post_date >= '2024-01-01' AND post_date <= '2024-03-01'\";\n return $where;\n }\nadd_filter('posts_where', 'filter_where');\nquery_posts($query_string);\nwhile (have_posts()) :\n the_post();\n the_content();\nendwhile;\n?><\/code><\/pre>Asegúrate de ajustar 2024-01-01 y 2024-03-01 según tus preferencias.. <\/p>
Mostrar entradas publicadas hace un año<\/h3>
Reutilizar contenido antiguo puede ser una gran estrategia para atraer a nuevos lectores. Utiliza el siguiente código si quieres mostrar publicaciones que hiciste hace un año. <\/p>
<?php\n$current_day = date('j');\n$last_year = date('Y')-1;\nquery_posts('day='.$current_day.'&year='.$last_year);\nif (have_posts()):\n while (have_posts()) : the_post();\n the_title();\n the_excerpt();\n endwhile;\nendif;\n?><\/code><\/pre>Mostrar próximas entradas<\/h3>
Enumera las próximas entradas para animar a los usuarios a visitar tu blog en el futuro. Mira el código de abajo para más información:<\/p>
<?php query_posts('showposts=10&post_status=future'); ?>\n<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>\n <h2><?php the_title(); ?><\/h2>\n <span class=\"datetime\"><?php the_time('j. F Y'); ?><\/span><\/p>\n<?php endwhile;\nelse: ?><p>No future posts scheduled.<\/p>\n<?php endif; ?><\/code><\/pre>Mostrar las últimas entradas fijas<\/h3>
Si quieres mostrar sólo las últimas entradas fijas, consulta el siguiente código:<\/p>
<?php\n$sticky = get_option('sticky_posts');\nrsort( $sticky );\n$sticky = array_slice( $sticky, 0, 5);\nquery_posts( array( 'post__in' => $sticky, 'caller_get_posts' => 1 ) );\n\nif (have_posts()) :\n while (have_posts()) : the_post();\n the_title();\n the_excerpt();\n endwhile;\nendif;\n?><\/code><\/pre>Crear una página de archivo<\/h3>
Una página de archivo es una colección de tus entradas publicadas anteriormente. Muestra fácilmente las entradas más populares del pasado a los visitantes de tu sitio web. <\/p>
Para crearla, consulta el siguiente código:<\/p>
<?php\n\/*\nTemplate Name: MyArchives\n*\/\n?>\n<?php get_header(); ?>\n <h2><?php $numposts = $wpdb->get_var(\"SELECT COUNT(*) FROM $wpdb->posts WHERE post_status = 'publish'\");\nif (0 < $numposts) $numposts = number_format($numposts); ?>\n<h2><?php echo $numposts.' recipes published since January 01, 2024'; ?>\n <\/h2>\n <ul id=\"archive-list\">\n <?php\n $myposts = get_posts('numberposts=-1&');\n foreach($myposts as $post) : ?>\n <li><?php the_time('m\/d\/y') ?>: <a href=\"<?php the_permalink(); ?>\"><?php the_title(); ?><\/a><\/li>\n <?php endforeach; ?>\n <\/ul>\n<?php get_sidebar(); ?>\n<?php get_footer(); ?><\/code><\/pre>Entendiendo el Bloque de Bucle de Consulta de WordPress <\/h2>
Una de las actualizaciones más significativas dentro del Loop de WordPress es la introducción del bloque Bucle de Consulta (Query Loop). Sin más preámbulos, descubramos qué es y cómo usarlo. <\/p>
Qué es el Bucle de Consulta<\/h3>
Introducido en WordPress 5.8, el bloque de Bucle de Consulta es una potente adición a la función básica Loop. El editor Gutenberg lo utiliza para mostrar entradas en tu sitio web. <\/p>
Con este bloque puedes crear fácilmente formatos de post de WordPress complejos y visualmente atractivos que muestren el contenido en un orden específico. Para ello, puedes aplicar varios filtros como categoría, etiqueta o fecha. <\/p>
En otras palabras, el bloque es como el Loop PHP pero sin código real. De este modo, puedes utilizar el editor de bloques para personalizar fácilmente cómo se muestra el contenido en el sitio web especificando qué entradas o páginas deben mostrarse y en qué orden. <\/p>
Cómo utilizar el bloque de Bucle de Consulta en WordPress<\/h3>
![\"Visualización](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/05\/image-223.png\")
<\/figure>![\"Imagen](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/05\/image-224-1024x357.png\")
<\/figure><\/div>![\"Buscar](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/05\/image-225.png\")
<\/figure><\/div>![\"Ejemplo](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/05\/image-226-1024x462.png\")
<\/figure>![\"Opción](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/05\/image-227.png\")
<\/figure>![\"Opción](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/05\/image-228-1024x467.png\")
<\/figure>![\"Opciones](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/05\/image-229-1024x294.png\")
<\/figure>![\"Visualización](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/05\/image-230.png\")
<\/figure><\/div>![\"Imagen](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/05\/image-232.png\")
<\/figure><\/div>![\"Opciones](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/05\/image-233.png\")
<\/figure><\/div>![\"Visualización](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/05\/image-234.png\")
<\/figure><\/div>