{"id":32106,"date":"2023-05-20T04:09:17","date_gmt":"2023-05-20T02:09:17","guid":{"rendered":"\/tutoriales\/?p=32106"},"modified":"2023-12-19T10:33:01","modified_gmt":"2023-12-19T09:33:01","slug":"loop-wordpress","status":"publish","type":"post","link":"\/co\/tutoriales\/loop-wordpress\/","title":{"rendered":"Qu\u00e9 es el loop de WordPress, c\u00f3mo usarlo + explicaci\u00f3n del bloque query loop"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Cuando se trata de desarrollar y alojar un sitio web de WordPress, el uso del Loop puede hacer que el proceso sea mucho m&aacute;s f&aacute;cil y &aacute;gil.&nbsp;<\/p><p class=\"wp-block-paragraph\">El bucle de WordPress se encarga de obtener y mostrar el contenido en tu sitio web. Adem&aacute;s, puedes utilizarlo para personalizar el contenido a tu gusto.&nbsp;<\/p><p class=\"wp-block-paragraph\">En este tutorial, explicaremos qu&eacute; es el Loop de WordPress, c&oacute;mo funciona y sus casos de uso m&aacute;s comunes. Tambi&eacute;n repasaremos el bloque Bucle de Consulta, descubriremos en qu&eacute; se diferencia del Loop normal de WordPress y mostraremos c&oacute;mo usarlo en el editor de bloques.&nbsp;<\/p><p class=\"has-text-align-center wp-block-paragraph\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Mega-WordPress-Cheat-ES.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">Descarga la hoja de trucos de WordPress definitiva<\/a><\/p><p>\n\n\n\n\n\n\n<\/p><p class=\"wp-block-paragraph\"><div class=\"protip\"><div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                   &iquest;Qu&eacute; es el Loop de WordPress?\n                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Es una caracter&iacute;stica central del CMS, que potencia la visualizaci&oacute;n din&aacute;mica de contenidos. En t&eacute;rminos generales, se trata de un bloque de c&oacute;digo PHP que recupera entradas, p&aacute;ginas y otros tipos de contenido de la base de datos y los muestra en un sitio web de WordPress.<\/p><\/div><\/p><h3 class=\"wp-block-heading\" id=\"h-como-funciona-el-loop-de-wordpress\">C&oacute;mo funciona el Loop de WordPress<\/h3><p class=\"wp-block-paragraph\">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.&nbsp;<\/p><p class=\"wp-block-paragraph\">Para ello, el Loop rastrea la base de datos en busca del contenido necesario, incluyendo su t&iacute;tulo, fecha, texto y metadatos. A continuaci&oacute;n, el Bucle de WordPress lo formatea de acuerdo con los criterios espec&iacute;ficos antes de mostrarlo en el sitio.&nbsp;<\/p><p class=\"wp-block-paragraph\">Veamos un ejemplo sencillo del Loop de WordPress:<\/p><pre class=\"wp-block-code\"><code>&lt;?php get_header(); ?&gt;\n&lt;?php \nif ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n&lt;?php the_title() ;?&gt;\n&lt;?php the_author(); ?&gt;\n&lt;?php the_post_thumbnail(); ?&gt;\n&lt;?php endwhile; ?&gt;\n&lt;?php endif; ?&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre><p class=\"wp-block-paragraph\">Veamos ahora de qu&eacute; es responsable cada funci&oacute;n de WordPress:<\/p><ul class=\"wp-block-list\">\n<li><strong>get_header() <\/strong>y <strong>get_footer()<\/strong>: incluye un encabezado y un pie de p&aacute;gina en tu entrada.<\/li>\n\n\n\n<li><strong>if ( have_posts() )<\/strong>: junto con la <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/have_posts\/\" target=\"_blank\" rel=\"noreferrer noopener\">funci&oacute;n have_posts()<\/a>, un <strong>comando if<\/strong> determina si la consulta actual de WordPress tiene alguna entrada para mostrar. Puede devolver <strong>true <\/strong>si los posts existen o <strong>false <\/strong>si no hay posts.&nbsp;<\/li>\n\n\n\n<li><strong>while ( have_posts() )<\/strong>: ejecuta cualquier c&oacute;digo de WordPress especificado hasta que no queden entradas en el Loop.&nbsp;&nbsp;<\/li>\n\n\n\n<li><strong>the_post()<\/strong>: adem&aacute;s de preparar el puesto para su visualizaci&oacute;n, comprueba y recupera todos los datos pertinentes.&nbsp;<\/li>\n\n\n\n<li><strong>the_title(), the_author(), the_post_thumbnail()<\/strong>: el contenido real que desea mostrar. En nuestro caso, los datos de la entrada incluir&aacute;n el t&iacute;tulo, el autor y la miniatura de la misma. Normalmente, esta parte tambi&eacute;n se rellena con c&oacute;digo HTML para dar formato.&nbsp;&nbsp;<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Las l&iacute;neas finales <strong>endwhile <\/strong>y <strong>endif <\/strong>sirven para cerrar el bucle <strong>while <\/strong>y la funci&oacute;n <strong>if<\/strong>.<\/p><p class=\"wp-block-paragraph\">        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Consejo profesional                <\/p>\n            <\/div>\n            <p class=\"protip__content\"> El Loop muestra las <a href=\"https:\/\/codex.wordpress.org\/Template_Tags\" target=\"_blank\" rel=\"noreferrer noopener\">etiquetas de plantilla de WordPress<\/a> <strong>the_title()<\/strong>, <strong>the_time()<\/strong>, y <strong>the_category()<\/strong> por defecto para cada entrada.<\/p>\n                    <\/div>\n        <\/p><p class=\"wp-block-paragraph\">Como alternativa, puedes utilizar la siguiente sintaxis de c&oacute;digo PHP para tu Loop de WordPress. Mientras que su funcionalidad y los elementos son los mismos, el formato de sintaxis difiere.&nbsp;<\/p><pre class=\"wp-block-code\"><code>&lt;?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?&gt;<\/code><\/pre><h2 class=\"wp-block-heading\" id=\"h-como-utilizar-el-loop-de-wordpress\">C&oacute;mo utilizar el Loop de WordPress&nbsp;<\/h2><p class=\"wp-block-paragraph\">En esta secci&oacute;n, proporcionaremos algunos ejemplos sencillos de c&oacute;mo utilizar el Loop en WordPress.&nbsp;&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/co\/hosting-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/06\/ES-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-40615\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/06\/ES-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/06\/ES-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/06\/ES-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/06\/ES-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-como-poner-un-hipervinculo-en-el-titulo-de-la-entrada-utilizando-el-loop\">C&oacute;mo poner un hiperv&iacute;nculo en el t&iacute;tulo de la entrada utilizando el Loop<\/h3><p class=\"wp-block-paragraph\">Cada vez que crees una entrada en el blog, considera la posibilidad de a&ntilde;adir un hiperv&iacute;nculo en su t&iacute;tulo para facilitar la navegaci&oacute;n.<\/p><p class=\"wp-block-paragraph\">Para ello, utiliza el siguiente c&oacute;digo con la etiqueta de plantilla <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/the_permalink\/\" target=\"_blank\" rel=\"noreferrer noopener\">the_permalink()<\/a>:&nbsp;<\/p><pre class=\"wp-block-code\"><code>&lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n           &lt;h2&gt;&lt;a href=\"&lt;?php the_permalink(); ?&gt;\"&gt;&lt;?php the_title() ;?&gt;&lt;\/a&gt;&lt;\/h2&gt;\n            &lt;?php the_post_thumbnail(); ?&gt;\n&lt;?php endwhile; ?&gt;\n&lt;?php endif; ?&gt;<\/code><\/pre><h3 class=\"wp-block-heading\" id=\"h-como-usar-el-loop-de-wordpress-para-mostrar-contenido-autor-fecha-y-categoria\">C&oacute;mo usar el Loop de WordPress para mostrar contenido, autor, fecha y categor&iacute;a<\/h3><p class=\"wp-block-paragraph\">Si deseas que tu entrada incluya su autor, fecha, categor&iacute;a y contenido, aplica el siguiente c&oacute;digo:<\/p><pre class=\"wp-block-code\"><code>&lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n           &lt;h2&gt;&lt;?php the_title() ;?&gt;&lt;\/h2&gt;\n           &lt;?php the_author(); ?&gt; &lt;?php the_time('F j, Y'); ?&gt; &lt;?php the_category(); ?&gt;\n           &lt;?php the_post_thumbnail(); ?&gt;\n           &lt;?php the_content(); ?&gt;\n&lt;?php endwhile; ?&gt; \n&lt;?php endif; ?&gt;<\/code><\/pre><h3 class=\"wp-block-heading\" id=\"h-como-usar-etiquetas-condicionales-en-el-loop-de-wordpress\">C&oacute;mo usar etiquetas condicionales en el Loop de WordPress<\/h3><p class=\"wp-block-paragraph\">Las etiquetas condicionales son un conjunto de funciones que determinan c&oacute;mo se mostrar&aacute; el contenido de un sitio web. Normalmente, los desarrolladores de temas las a&ntilde;aden a los archivos de plantilla para permitir a los usuarios comprobar varias condiciones que controlan la apariencia general de sus sitios.<\/p><p class=\"wp-block-paragraph\">Por ejemplo, si quieres mostrar contenido s&oacute;lo en la p&aacute;gina de inicio, utiliza la etiqueta condicional <strong>is_home()<\/strong>. Del mismo modo, para mostrar contenido s&oacute;lo en una entrada &uacute;nica, utiliza la etiqueta <strong>is_single()<\/strong>.<\/p><p class=\"wp-block-paragraph\">Aqu&iacute; est&aacute;n las etiquetas condicionales m&aacute;s comunes en WordPress:&nbsp;<\/p><ul class=\"wp-block-list\">\n<li><strong>is_front_page()<\/strong>: para la p&aacute;gina principal de un sitio web.<\/li>\n\n\n\n<li><strong>is_page()<\/strong>: para una p&aacute;gina de WordPress.<\/li>\n\n\n\n<li><strong>is_category()<\/strong>: para un archivo de categor&iacute;as..<\/li>\n\n\n\n<li><strong>is_tag()<\/strong>: para un archivo de etiquetas.<\/li>\n\n\n\n<li><strong>is_archive()<\/strong>: para una p&aacute;gina de archivo.<\/li>\n\n\n\n<li><strong>is_search()<\/strong>: para una p&aacute;gina de resultados de b&uacute;squeda.<\/li>\n\n\n\n<li><strong>is_author()<\/strong>: para un archivo de autor.<\/li>\n\n\n\n<li><strong>is_404()<\/strong>: para una p&aacute;gina de error 404.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Recuerda establecerlos como <strong>true <\/strong>para cualquier p&aacute;gina en la que quieras utilizarlos.<\/p><p class=\"wp-block-paragraph\">En el siguiente ejemplo, utilizaremos la etiqueta <strong>is_front_page()<\/strong> con un comando <strong>if<\/strong>:<\/p><pre class=\"wp-block-code\"><code>&lt;?php if (is_front_page()) : ?&gt;  \n        &lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n         &lt;h2&gt;&lt;?php the_title() ;?&gt;&lt;\/h2&gt;\n           &lt;?php the_post_thumbnail(); ?&gt;\n           &lt;?php the_excerpt(); ?&gt;\n\n&lt;?php endwhile; ?&gt;\n&lt;?php endif; ?&gt;\n&lt;?php endif; ?&gt;<\/code><\/pre><p class=\"wp-block-paragraph\">Los usuarios de WordPress pueden utilizar el c&oacute;digo anterior para mostrar las entradas en el inicio.&nbsp;<\/p><h2 class=\"wp-block-heading\" id=\"h-como-personalizar-el-loop-de-wordpress-utilizando-archivos-de-plantilla\">C&oacute;mo personalizar el Loop de WordPress utilizando archivos de plantilla<\/h2><p class=\"wp-block-paragraph\">Para personalizar el Loop mediante archivos de plantilla es necesario modificar el c&oacute;digo PHP de los archivos del tema, incluidos <strong>archive.php<\/strong>, <strong>index.php<\/strong>, <strong>category.php<\/strong> y <strong>tag.php<\/strong>.&nbsp;<\/p><p class=\"wp-block-paragraph\">Para personalizar el Loop, puedes modificar los par&aacute;metros de consulta, a&ntilde;adir o eliminar elementos o cambiar la forma en que muestra el contenido de las entradas.&nbsp;<\/p><p class=\"wp-block-paragraph\">        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Consejo Profesional                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Recomendamos <a href=\"\/co\/tutoriales\/utilizar-child-theme\/\">utilizar un child theme<\/a> de WordPress para evitar perder las modificaciones durante las actualizaciones.<\/p>\n                    <\/div>\n        <\/p><p class=\"wp-block-paragraph\">Ten en cuenta que WordPress est&aacute; cambiando a temas basados en bloques que ya no utilizan archivos de plantilla PHP. Como resultado, necesitar&aacute;s usar el bloque Bucle de Consulta para estos temas.<\/p><p class=\"wp-block-paragraph\">Sin embargo, el uso del Loop es necesario para los temas que no est&aacute;n basados en bloques.&nbsp;&nbsp;&nbsp;&nbsp;<\/p><h2 class=\"wp-block-heading\" id=\"h-ejemplos-del-loop-en-wordpress\">Ejemplos del Loop en WordPress<\/h2><p class=\"wp-block-paragraph\">En los siguientes ejemplos, a&ntilde;adiremos c&oacute;digo a <strong>index.php<\/strong> del archivo de plantilla del tema Twenty Twenty.&nbsp;&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-diferentes-estilos-para-entradas-de-distintas-categorias\">Diferentes estilos para entradas de distintas categor&iacute;as<\/h3><p class=\"wp-block-paragraph\">Puede que quieras que las entradas de varias categor&iacute;as se muestren de forma diferente. Esto puede ayudar a los lectores a diferenciar mejor tus entradas.&nbsp;<\/p><p class=\"wp-block-paragraph\">El siguiente ejemplo mostrar&aacute; el t&iacute;tulo, la categor&iacute;a y el contenido de cada una, permiti&eacute;ndote estilizar las entradas de la Categor&iacute;a 3 de forma diferente.&nbsp;<\/p><p class=\"wp-block-paragraph\">Ten en cuenta que el siguiente ejemplo de Loop est&aacute; extra&iacute;do de la <a href=\"https:\/\/codex.wordpress.org\/The_Loop\" target=\"_blank\" rel=\"noreferrer noopener\">web oficial de documentaci&oacute;n de WordPress Loop<\/a> y consiste en &uacute;tiles comentarios de c&oacute;digo.<\/p><pre class=\"wp-block-code\"><code>&lt;!-- Start the Loop. --&gt;\n &lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n \t&lt;!-- Test if the current post is in category 3. --&gt;\n \t&lt;!-- If it is, the div box is given the CSS class \"post-cat-three\". --&gt;\n \t&lt;!-- Otherwise, the div box is given the CSS class \"post\". --&gt;\n \t&lt;?php if ( in_category( '3' ) ) : ?&gt;\n \t\t&lt;div class=\"post-cat-three\"&gt;\n \t&lt;?php else : ?&gt;\n \t\t&lt;div class=\"post\"&gt;\n \t&lt;?php endif; ?&gt;\n \t&lt;!-- Display the entry Title as a link to the Post's permalink. --&gt;\n \t&lt;h2&gt;&lt;a href=\"&lt;?php the_permalink(); ?&gt;\" rel=\"bookmark\" title=\"Permanent Link to &lt;?php the_title_attribute(); ?&gt;\"&gt;&lt;?php the_title(); ?&gt;&lt;\/a&gt;&lt;\/h2&gt;\n \t&lt;!-- Display the date (November 16th, 2009 format) and a link to other posts by this posts author. --&gt;\n \t&lt;small&gt;&lt;?php the_time('F jS, Y'); ?&gt; by &lt;?php the_author_posts_link(); ?&gt;&lt;\/small&gt;\n \t&lt;!-- Display the Post's entry content in a div box. --&gt;\n \t&lt;div class=\"entry\"&gt;\n \t\t&lt;?php the_content(); ?&gt;\n \t&lt;\/div&gt;\n \t&lt;!-- Display a comma separated list of the Post's Categories. --&gt;\n \t&lt;p class=\"postmetadata\"&gt;&lt;?php _e( 'Posted in' ); ?&gt; &lt;?php the_category( ', ' ); ?&gt;&lt;\/p&gt;\n \t&lt;\/div&gt; &lt;!-- closes the first div box --&gt;\n \t&lt;!-- Stop The Loop (but note the \"else:\" - see next line). --&gt;\n &lt;?php endwhile; else : ?&gt;\n \t&lt;!-- The very first \"if\" tested to see if there were any Posts to --&gt;\n \t&lt;!-- display.  This \"else\" part tells what to do if there weren't any. --&gt;\n \t&lt;p&gt;&lt;?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?&gt;&lt;\/p&gt;\n \t&lt;!-- REALLY stop The Loop. --&gt;\n &lt;?php endif; ?&gt;<\/code><\/pre><h3 class=\"wp-block-heading\" id=\"h-insertar-anuncios-despues-de-la-primera-entrada\">Insertar anuncios despu&eacute;s de la primera entrada<\/h3><p class=\"wp-block-paragraph\">Con el Loop de WordPress, puedes insertar f&aacute;cilmente anuncios en tus posts. Esta es una gran estrategia de marketing para <a href=\"\/co\/tutoriales\/como-monetizar-web\/\">monetizar tu web<\/a>.<\/p><p class=\"wp-block-paragraph\">En el siguiente ejemplo, insertaremos anuncios despu&eacute;s de la primera entrada:<\/p><pre class=\"wp-block-code\"><code>&lt;?php if (have_posts()) : ?&gt;\n&lt;?php $count = 0; ?&gt;\n&lt;?php while (have_posts()) : the_post(); ?&gt;\n&lt;?php $count++; ?&gt;\n  &lt;?php if ($count == 2) : ?&gt;\n          \/\/Ad code \n          &lt;h2&gt;&lt;a href=\"&lt;?php the_permalink(); ?&gt;\"&gt;&lt;?php the_title(); ?&gt;&lt;\/a&gt;&lt;\/h2&gt;\n          &lt;?php the_author(); ?&gt;\n   &lt;?php else : ?&gt;\n          &lt;h2&gt;&lt;a href=\"&lt;?php the_permalink(); ?&gt;\"&gt;&lt;?php the_title(); ?&gt;&lt;\/a&gt;&lt;\/h2&gt;\n          &lt;?php the_author(); ?&gt;\n  &lt;?php endif; ?&gt;\n&lt;?php endwhile; ?&gt;\n&lt;?php endif; ?&gt;<\/code><\/pre><p class=\"wp-block-paragraph\">Recuerda sustituir la parte del <strong>Ad code<\/strong> por el c&oacute;digo real.<\/p><h3 class=\"wp-block-heading\" id=\"h-obtener-entradas-entre-dos-fechas\">Obtener entradas entre dos fechas<\/h3><p class=\"wp-block-paragraph\">Para facilitar la gesti&oacute;n del sitio, puedes filtrar f&aacute;cilmente las entradas entre dos fechas. Mediante el siguiente c&oacute;digo:<\/p><pre class=\"wp-block-code\"><code>&lt;?php function filter_where($where = &rsquo;) {\n        $where .= \" AND post_date &gt;= '2024-01-01' AND post_date &lt;= '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?&gt;<\/code><\/pre><p class=\"wp-block-paragraph\">Aseg&uacute;rate de ajustar 2024-01-01 y 2024-03-01 seg&uacute;n tus preferencias..&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-mostrar-entradas-publicadas-hace-un-ano\">Mostrar entradas publicadas hace un a&ntilde;o<\/h3><p class=\"wp-block-paragraph\">Reutilizar contenido antiguo puede ser una gran estrategia para atraer a nuevos lectores. Utiliza el siguiente c&oacute;digo si quieres mostrar publicaciones que hiciste hace un a&ntilde;o.&nbsp;&nbsp;<\/p><pre class=\"wp-block-code\"><code>&lt;?php\n$current_day = date('j');\n$last_year = date('Y')-1;\nquery_posts('day='.$current_day.'&amp;year='.$last_year);\nif (have_posts()):\n    while (have_posts()) : the_post();\n       the_title();\n       the_excerpt();\n    endwhile;\nendif;\n?&gt;<\/code><\/pre><h3 class=\"wp-block-heading\" id=\"h-mostrar-proximas-entradas\">Mostrar pr&oacute;ximas entradas<\/h3><p class=\"wp-block-paragraph\">Enumera las pr&oacute;ximas entradas para animar a los usuarios a visitar tu blog en el futuro. Mira el c&oacute;digo de abajo para m&aacute;s informaci&oacute;n:<\/p><pre class=\"wp-block-code\"><code>&lt;?php query_posts('showposts=10&amp;post_status=future'); ?&gt;\n&lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n    &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n    &lt;span class=\"datetime\"&gt;&lt;?php the_time('j. F Y'); ?&gt;&lt;\/span&gt;&lt;\/p&gt;\n&lt;?php endwhile;\nelse: ?&gt;&lt;p&gt;No future posts scheduled.&lt;\/p&gt;\n&lt;?php endif; ?&gt;<\/code><\/pre><h3 class=\"wp-block-heading\" id=\"h-mostrar-las-ultimas-entradas-fijas\">Mostrar las &uacute;ltimas entradas fijas<\/h3><p class=\"wp-block-paragraph\">Si quieres mostrar s&oacute;lo las &uacute;ltimas entradas fijas, consulta el siguiente c&oacute;digo:<\/p><pre class=\"wp-block-code\"><code>&lt;?php\n$sticky = get_option('sticky_posts');\nrsort( $sticky );\n$sticky = array_slice( $sticky, 0, 5);\nquery_posts( array( 'post__in' =&gt; $sticky, 'caller_get_posts' =&gt; 1 ) );\n\nif (have_posts()) :\n    while (have_posts()) : the_post();\n        the_title();\n        the_excerpt();\n    endwhile;\nendif;\n?&gt;<\/code><\/pre><h3 class=\"wp-block-heading\" id=\"h-crear-una-pagina-de-archivo\">Crear una p&aacute;gina de archivo<\/h3><p class=\"wp-block-paragraph\">Una p&aacute;gina de archivo es una colecci&oacute;n de tus entradas publicadas anteriormente. Muestra f&aacute;cilmente las entradas m&aacute;s populares del pasado a los visitantes de tu sitio web.&nbsp;<\/p><p class=\"wp-block-paragraph\">Para crearla, consulta el siguiente c&oacute;digo:<\/p><pre class=\"wp-block-code\"><code>&lt;?php\n\/*\nTemplate Name: MyArchives\n*\/\n?&gt;\n&lt;?php get_header(); ?&gt;\n  &lt;h2&gt;&lt;?php $numposts = $wpdb-&gt;get_var(\"SELECT COUNT(*) FROM $wpdb-&gt;posts WHERE post_status = 'publish'\");\nif (0 &lt; $numposts) $numposts = number_format($numposts); ?&gt;\n&lt;h2&gt;&lt;?php echo $numposts.' recipes published since January 01, 2024'; ?&gt;\n  &lt;\/h2&gt;\n  &lt;ul id=\"archive-list\"&gt;\n    &lt;?php\n    $myposts = get_posts('numberposts=-1&amp;');\n    foreach($myposts as $post) : ?&gt;\n      &lt;li&gt;&lt;?php the_time('m\/d\/y') ?&gt;: &lt;a href=\"&lt;?php the_permalink(); ?&gt;\"&gt;&lt;?php the_title(); ?&gt;&lt;\/a&gt;&lt;\/li&gt;\n    &lt;?php endforeach; ?&gt;\n  &lt;\/ul&gt;\n&lt;?php get_sidebar(); ?&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre><h2 class=\"wp-block-heading\" id=\"h-entendiendo-el-bloque-de-bucle-de-consulta-de-wordpress\">Entendiendo el Bloque de Bucle de Consulta de WordPress&nbsp;&nbsp;<\/h2><p class=\"wp-block-paragraph\">Una de las actualizaciones m&aacute;s significativas dentro del Loop de WordPress es la introducci&oacute;n del bloque Bucle de Consulta (Query Loop). Sin m&aacute;s pre&aacute;mbulos, descubramos qu&eacute; es y c&oacute;mo usarlo.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-que-es-el-bucle-de-consulta\">Qu&eacute; es el Bucle de Consulta<\/h3><p class=\"wp-block-paragraph\">Introducido en WordPress 5.8, el bloque de Bucle de Consulta es una potente adici&oacute;n a la funci&oacute;n b&aacute;sica Loop. El editor Gutenberg lo utiliza para mostrar entradas en tu sitio web.&nbsp;<\/p><p class=\"wp-block-paragraph\">Con este bloque puedes crear f&aacute;cilmente formatos de post de WordPress complejos y visualmente atractivos que muestren el contenido en un orden espec&iacute;fico. Para ello, puedes aplicar varios filtros como categor&iacute;a, etiqueta o fecha.&nbsp;<\/p><p class=\"wp-block-paragraph\">En otras palabras, el bloque es como el Loop PHP pero sin c&oacute;digo real. De este modo, puedes utilizar el editor de bloques para personalizar f&aacute;cilmente c&oacute;mo se muestra el contenido en el sitio web especificando qu&eacute; entradas o p&aacute;ginas deben mostrarse y en qu&eacute; orden.&nbsp;&nbsp;&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-como-utilizar-el-bloque-de-bucle-de-consulta-en-wordpress\">C&oacute;mo utilizar el bloque de Bucle de Consulta en WordPress<\/h3><p class=\"wp-block-paragraph\">Para a&ntilde;adir el bloque, abre o <a href=\"\/co\/tutoriales\/entrada-wordpress\/\">a&ntilde;ade nuevas entradas<\/a> en el editor de bloques:<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1015\" height=\"450\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-223.png\/public\" alt=\"Visualizaci&oacute;n de entradas en el panel de WordPress.\" class=\"wp-image-32198\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-223.png\/w=1015,fit=scale-down 1015w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-223.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-223.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-223.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1015px) 100vw, 1015px\" \/><\/figure><p class=\"wp-block-paragraph\">Una vez en el editor, selecciona el icono de insertar bloques:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1541\" height=\"537\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-224.png\/w=1024,h=1024,fit=scale-down\" alt=\"Imagen del bot&oacute;n para agregar nuevos bloques en el editor de WordPress.\" class=\"wp-image-32200\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-224.png\/w=1541,fit=scale-down 1541w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-224.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-224.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-224.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-224.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1541px) 100vw, 1541px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Busca Bucle de Consulta y haz clic sobre &eacute;l:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"423\" height=\"333\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-225.png\/public\" alt=\"Buscar Bucle de consulta en los bloques de WordPress.\" class=\"wp-image-32201\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-225.png\/w=423,fit=scale-down 423w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-225.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-225.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 423px) 100vw, 423px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Eso es todo, el nuevo bloque ser&aacute; a&ntilde;adido a tu entrada. Ahora, revisa la siguiente secci&oacute;n para personalizarlo.<\/p><h3 class=\"wp-block-heading\" id=\"h-personalizacion-del-bucle-de-consulta\">Personalizaci&oacute;n del Bucle de Consulta<\/h3><p class=\"wp-block-paragraph\">Siempre que a&ntilde;adas un nuevo bloque de Bucle de Consulta, ver&aacute;s dos opciones:<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"541\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-226.png\/w=1024,h=1024,fit=scale-down\" alt=\"Ejemplo de Bucle de consulta en WordPress.\" class=\"wp-image-32203\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-226.png\/w=1200,fit=scale-down 1200w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-226.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-226.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-226.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-226.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure><p class=\"wp-block-paragraph\"><strong>Elegir<\/strong><\/p><p class=\"wp-block-paragraph\">La opci&oacute;n <strong>Elegir <\/strong>te permite seleccionar entre una variedad de modelos diferentes. Elige el que prefieras.&nbsp;<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"926\" height=\"621\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-227.png\/public\" alt=\"Opci&oacute;n para elegir un patr&oacute;n en el bucle de consulta.\" class=\"wp-image-32204\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-227.png\/w=926,fit=scale-down 926w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-227.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-227.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-227.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 926px) 100vw, 926px\" \/><\/figure><p class=\"wp-block-paragraph\">Recuerda que cada bloque del Bucle de Consulta consta de varios bloques anidados, como T&iacute;tulo de la entrada o Extracto. Abre la herramienta Resumen del Documento si te preguntas qu&eacute; bloques se utilizan dentro del bucle. Aqu&iacute; ver&aacute;s todos los bloques anidados y podr&aacute;s navegar entre ellos:&nbsp;<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"467\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-228.png\/w=1024,h=1024,fit=scale-down\" alt=\"Opci&oacute;n de resumen del documento para ver qu&eacute; bloques se utilizan dentro del bucle de consulta\" class=\"wp-image-32205\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-228.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-228.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-228.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-228.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\"><strong>Empezar en blanco&nbsp;&nbsp;<\/strong><\/p><p class=\"wp-block-paragraph\">En la opci&oacute;n <strong>Empezar en blanco<\/strong>, ver&aacute;s varias plantillas. Selecciona la que prefieras. Para este ejemplo, a&ntilde;adiremos la plantilla con T&iacute;tulo y extracto:<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1185\" height=\"340\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-229.png\/w=1024,h=1024,fit=scale-down\" alt=\"Opciones que aparecen tras elegir empezar en blanco en el bucle de consulta\" class=\"wp-image-32206\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-229.png\/w=1185,fit=scale-down 1185w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-229.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-229.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-229.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-229.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1185px) 100vw, 1185px\" \/><\/figure><p class=\"wp-block-paragraph\">Despu&eacute;s de a&ntilde;adir el bloque, puedes personalizarlo utilizando la barra de herramientas del bloque o la secci&oacute;n de configuraci&oacute;n del bloque. Veamos cada una de ellas.<\/p><p class=\"wp-block-paragraph\"><strong>Barra de herramientas de bloques<\/strong><\/p><p class=\"wp-block-paragraph\">La barra de herramientas de Bloques es la herramienta principal para personalizar cualquier bloque en WordPress, incluyendo el bucle de consulta.&nbsp;&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"555\" height=\"74\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-230.png\/public\" alt=\"Visualizaci&oacute;n de la barra de herramientas de un bloque\" class=\"wp-image-32207\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-230.png\/w=555,fit=scale-down 555w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-230.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-230.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 555px) 100vw, 555px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Aqu&iacute; puedes convertir el Bucle de Consulta en columnas o bloques de grupo, moverlo por el editor, ajustar la alineaci&oacute;n o cambiar la vista por defecto. Las opciones m&aacute;s destacadas son <strong>Ajustes de visualizaci&oacute;n <\/strong>y <strong>Reemplazar<\/strong>:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"561\" height=\"80\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-232.png\/public\" alt=\"Imagen de las opciones Ajustes de visualizaci&oacute;n y Reemplazar en la barra de herramientas de un bloque.\" class=\"wp-image-32209\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-232.png\/w=561,fit=scale-down 561w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-232.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-232.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 561px) 100vw, 561px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Los ajustes de visualizaci&oacute;n te permiten elegir cu&aacute;ntas entradas mostrar y establecer cu&aacute;ntas de ellas deben omitirse antes de mostrar el contenido preferido.&nbsp;&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"613\" height=\"350\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-233.png\/public\" alt=\"Opciones dentro de los ajustes de visualizaci&oacute;n de un bucle de consulta.\" class=\"wp-image-32210\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-233.png\/w=613,fit=scale-down 613w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-233.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-233.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 613px) 100vw, 613px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Si no ves Ajustes de visualizaci&oacute;n, aseg&uacute;rate de que la opci&oacute;n <strong>Heredar la consulta de la plantilla<\/strong> est&eacute; desactivada en la secci&oacute;n Ajustes del bloque en la barra de la parte derecha.<\/p><p class=\"wp-block-paragraph\">Otra funci&oacute;n &uacute;til es <strong>Reemplazar<\/strong>. Con ella, puedes reemplazar f&aacute;cilmente el patr&oacute;n actual por cualquier otro.<\/p><p class=\"wp-block-paragraph\"><strong>Ajustes del bloque<\/strong><\/p><p class=\"wp-block-paragraph\">Puedes encontrar otros ajustes importantes del bloque haciendo clic en el bot&oacute;n <strong>Ajustes <\/strong>de la esquina superior derecha del editor:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"357\" height=\"559\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-234.png\/public\" alt=\"Visualizaci&oacute;n de la secci&oacute;n Ajustes.\" class=\"wp-image-32211\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-234.png\/w=357,fit=scale-down 357w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-234.png\/w=192,fit=scale-down 192w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/05\/image-234.png\/w=96,fit=scale-down 96w\" sizes=\"(max-width: 357px) 100vw, 357px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Aqu&iacute; podr&aacute;s personalizar el dise&ntilde;o del bloque, filtrar las entradas o a&ntilde;adir clases CSS personalizadas a tu bloque.&nbsp;<\/p><p class=\"wp-block-paragraph\">        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Lectura recomendada                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Consulta la <a href=\"https:\/\/wordpress.org\/documentation\/article\/query-loop-block\/\" target=\"_blank\" rel=\"noreferrer noopener\">documentaci&oacute;n oficial del bloque Bucle de Consulta <\/a>si necesitas m&aacute;s informaci&oacute;n.<\/p>\n                    <\/div>\n        <\/p><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p class=\"wp-block-paragraph\">El Loop de WordPress puede beneficiar a cualquier sitio web ya que ordena la forma de mostrar las entradas, ayud&aacute;ndote a destacar entre la multitud.&nbsp;<\/p><p class=\"wp-block-paragraph\">No te preocupes si no est&aacute;s familiarizado con la codificaci&oacute;n, con la introducci&oacute;n del bloque Bucle de Consulta, puedes utilizar el editor de bloques para mostrar tus entradas como desees.&nbsp;<\/p><p class=\"wp-block-paragraph\">Sin embargo, el uso del Loop sigue siendo necesario para desarrollar un tema WordPress sin bloques.&nbsp;&nbsp;<\/p><p class=\"wp-block-paragraph\">Esperamos que este tutorial te haya resultado &uacute;til. Si tienes alguna pregunta, consulta nuestra gu&iacute;a de WordPress o deja un comentario a continuaci&oacute;n.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cuando se trata de desarrollar y alojar un sitio web de WordPress, el uso del Loop puede hacer que el proceso sea mucho m&aacute;s f&aacute;cil y &aacute;gil.&nbsp; El bucle de WordPress se encarga de obtener y mostrar el contenido en tu sitio web. Adem&aacute;s, puedes utilizarlo para personalizar el contenido a tu gusto.&nbsp; En este [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/co\/tutoriales\/loop-wordpress\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":317,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Qu\u00e9 es el Loop de WordPress y c\u00f3mo usarlo + Bucle de consulta","rank_math_description":"El Loop de WordPress es un c\u00f3digo PHP que muestra las entradas de WordPress. En este art\u00edculo ver\u00e1s algunos ejemplos de c\u00f3mo utilizarlo.","rank_math_focus_keyword":"loop wordpress","footnotes":""},"categories":[4747,14349],"tags":[14399],"class_list":["post-32106","post","type-post","status-publish","format-standard","hentry","category-wordpress","category-basico","tag-loop-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/the-loop-wordpress\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/loop-wordpress\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/what-is-the-wordpress-loop-how-to-use-it-query-loop-block-explained\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/what-is-the-wordpress-loop-how-to-use-it-query-loop-block-explained\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/the-loop-wordpress\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/the-loop-wordpress\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/the-loop-wordpress\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/the-loop-wordpress\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/the-loop-wordpress\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/loop-wordpress\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/loop-wordpress\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/loop-wordpress\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/32106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/users\/317"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/comments?post=32106"}],"version-history":[{"count":49,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/32106\/revisions"}],"predecessor-version":[{"id":37123,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/32106\/revisions\/37123"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/media?parent=32106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/categories?post=32106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/tags?post=32106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}