X

La Guía Definitiva del Loop de WordPress

En este tutorial, repasaremos El Loop, y cómo WordPress lo usa para mostrar tus publicaciones y páginas. Ten en cuenta que esto es un poco más avanzado que nuestros tutoriales anteriores. Espero que encuentres esta guía definitiva más fácil de entender que lo que está disponible en la documentación de WordPress. Esto es lo que cubriremos:

  • Una definición de El Loop.
  • Flujo básico de El Loop.
  • Etiquetas de plantilla usadas en El Loop
  • Qué hacer después de El Loop
  • Jerarquía de archivos de plantilla

Si deseas comprender mejor cómo funciona realmente un tema de WordPress detrás de escena, sigue leyendo.

Nota: Este tutorial asume que estás usando un tema estándar de WordPress, como el tema predeterminado Kubrick. Nada de cosas avanzadas de múltiples bucles... todavía.

¿Qué es El Bucle?

Probablemente todavía te estés preguntando qué es El Bucle. Básicamente, es lo que muestra el contenido que ves en tu página de inicio, tus entradas individuales, páginas, archivos, resultados de búsqueda y más.

Si un usuario accede a tu página de inicio, archivos o resultados de búsqueda, por defecto, El Bucle mostrará un cierto número de entradas según lo definido en tus Opciones de Lectura.

Opciones de lectura de WordPress

Por el momento, mi página de inicio muestra 10 entradas por página, que es lo que definí en Mostrar como máximo * entradas. En entradas y páginas individuales, el mismo código básico de El Bucle simplemente mostrará *solo* esa página específica.

Flujo básico del bucle

Vamos a dividir El Bucle en 3 partes.

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

1. Lo que quieres que se muestre en El Bucle

<?php endwhile;?>

2. Lo que se muestra cuando El Bucle termina

<?php else : ?>

3. Si no hay nada que mostrar

<?php endif; ?>

Si hay entradas disponibles en la consulta, comenzará a mostrarlas en un bucle while, lo que se define en la parte 1. Cuando el while termine, mostrará lo que está en la parte 2. Si no se encuentran entradas, o hay algún otro error 404, se mostrará la parte 3.

Etiquetas de plantilla usadas dentro de El Bucle

A menos que quieras que *1. Lo que quieres que se muestre en El Bucle* se repita 10 veces en la página de inicio de tu blog de WordPress, probablemente deberías aprender algunas de las etiquetas de plantilla básicas. Echemos un vistazo al código de *index.php* en la plantilla predeterminada de WordPress.

Desglose del Loop de WordPress

Como puedes ver, hay bastantes etiquetas de plantilla dentro del Bucle que mostrarán cosas como el título de la entrada, el enlace permanente, el contenido, etc. Desglosaré cada una de las etiquetas de plantilla en el tema predeterminado de WordPress.

  • <?php the_permalink() ?> – Esto mostrará el enlace permanente de la entrada, es decir, http://www.themelab.com/?p=1
  • <?php the_title(); ?> – Esto muestra el título de la entrada, es decir, ¡Hola Mundo!
  • <?php the_time(‘F jS, Y’) ?> – Esto mostrará la fecha, es decir, 4 de abril de 2008. Una lista completa de formas de formatear la fecha se puede encontrar en php.net
  • <?php the_author() ?> – Esto mostrará el nombre del autor, es decir, Leland. Esto está comentado en el tema predeterminado.
  • <?php the_tags(‘Tags: ‘, ‘, ‘, ‘<br />’); ?> – Esto mostrará las etiquetas asignadas a la entrada, separadas por comas y seguidas de un salto de línea
  • <?php the_category(‘, ‘) ?> – Esto mostrará las categorías de manera similar a las etiquetas anteriores.
  • <?php edit_post_link(‘Editar’, ”, ‘ | ‘); ?> – El enlace para editar la entrada solo será visible para aquellos con permiso.
  • <?php comments_popup_link(‘Sin comentarios »’, ‘1 comentario »’, ‘% Comentarios »’); ?> – Mostrará el enlace a los comentarios. Esto no se mostrará en entradas o páginas individuales.

Hay muchas más listadas en la página de Etiquetas de Plantilla en WordPress.org. Algunas de estas pueden funcionar en el Bucle, mientras que otras puede que no.

Después del Bucle

Echemos un vistazo al código después de que el bucle deje de iterar en el tema predeterminado.

Después del desglose del Loop

<div class="navigation">
<div class="alignleft"><?php next_posts_link('&laquo; Entradas Anteriores') ?></div>
<div class="alignright"><?php previous_posts_link('Entradas Nuevas &raquo;') ?></div>
</div>

Como habrás adivinado, esto mostrará la paginación que ves en la página de inicio, los archivos y los resultados de búsqueda. Estos no se mostrarán en publicaciones y páginas individuales. Por supuesto, podrías reemplazar esto con algo como PageNavi, pero eso depende de ti.

Si no hay publicaciones para mostrar (posiblemente debido a un error 404), se mostrará lo siguiente después del else

<h2 class="center">No encontrado</h2><br> <p class="center">Lo sentimos, pero estás buscando algo que no está aquí.</p><br> <?php include (TEMPLATEPATH . "/searchform.php"); ?>

Eso mostrará el mensaje No encontrado junto con el formulario de búsqueda. En este caso, tendría que haber un código de formulario de búsqueda ubicado en un archivo llamado searchform.php en el directorio de la plantilla, lo cual existe en el tema predeterminado.

Jerarquía de plantillas

Algunos archivos de plantilla tendrán prioridad sobre index.php para ciertos tipos de páginas si están presentes en el directorio de la plantilla. A continuación se muestran algunos ejemplos de jerarquía de plantillas, enumerados en orden de prioridad.

Página de inicio

  1. home.php
  2. index.php

Publicación individual

  1. single.php
  2. index.php

Resultados de búsqueda

  1. search.php
  2. index.php

Página 404

  1. 404.php
  2. index.php

Hay algunas técnicas más avanzadas enumeradas en la página Jerarquía de plantillas en WordPress.org.

Entonces, ¿cuál es el propósito de la jerarquía de plantillas? Básicamente, puedes usarla para crear nuevos diseños para diferentes tipos de páginas de WordPress sin modificar demasiado tu archivo index.php.

Conclusión

Así que ahora (con suerte) tienes una mejor idea de qué trata el Bucle de WordPress. Siéntete libre de dejar un comentario si te gustó, lo odiaste, no lo entendiste, lo que sea, acepto todos los comentarios. Suscríbete al feed para recibir todas las últimas actualizaciones sobre lanzamientos de temas de Theme Lab y nuevos tutoriales. Gracias por leer.

Comentarios   Dejar una respuesta

  1. Quiero mostrar el enlace a la publicación anterior y siguiente en la página de publicación individual. También el texto del ancla para el enlace debe ser el nombre de la publicación respectiva.

    Por favor, dime, ¿cómo puedo hacerlo?

    Intenté incrustar en single.php pero no muestra el nombre de la publicación.

  2. Genial, estoy aprendiendo a hackear el loop, incluso a niveles de RSS-Atom y estos conceptos básicos son buenos para mí. Sigan rockeando, chicos.

  3. Gracias, gracias, gracias.
    No puedo agradecerte lo suficiente. Todos, incluido wordpress.org, dicen 'pon ese código en el Loop', pero NADIE decía qué demonios es el Loop. Excepto TÚ. Gran ayuda.

  4. Tutorial de loop do wordpress « Galeria de scripts September 17, 2009 at 10:02 am

    […] Enlace al tutorial […]

  5. Soy un gerente de proyectos de TI que, en algún momento de mi vida, fue un "técnico" práctico. Supongo que esto me sitúa en algún punto intermedio del espectro entre el "alfabetizado en computación pero sin idea de programación de computadoras" y el "friki total que piensa y habla en Cplusplus".

    Lo genial de WordPress es que es lo suficientemente simple de usar como para que el analfabeto informático más despistado pueda implementar funciones sofisticadas con facilidad, mientras que alguien con un mínimo de habilidades técnicas puede hacer muchas modificaciones.

    Si bien no soy programador de PHP o Java, SÍ tengo formación en el lenguaje C#/VB.NET y entiendo los bucles y las estructuras de programación. Este pequeño conocimiento, junto con tutoriales como el suyo, me da la capacidad de modificar junto con los mejores "frikis" de la computación. Su tutorial fue muy fácil de entender (probablemente porque tengo experiencia en TI). Creo que incluso si no tuviera experiencia en TI, su explicación hizo posible (con un poco de esfuerzo) entender cómo usar el "loop" y un poco más sobre el funcionamiento interno de la aplicación WordPress.

    ¡¡Gracias!!
    Jerry Bucknoff, PMP
    Mi blog de WordPress es blogs.pmbestpractices.com, otro sitio orgullosamente impulsado por WordPress.

  6. 30 WordPress Development Tutorials | Pro Blog Design – Learningism September 7, 2009 at 2:18 am

    […] La guía definitiva del Loop de WordPress […]

  7. Wordpress Wednesday: 50 Links & Resources from around the web | Wordpress Guerrilla August 19, 2009 at 11:16 am

    […] La guía definitiva del loop de wordpress […]

  8. 30 WordPress Development Tutorials | SEO & Web Design July 21, 2009 at 2:35 am

    […]  La guía definitiva del Loop de WordPress […]

  9. 30 WordPress Development Tutorials at BLOG GRAPHIC DESIGN July 3, 2009 at 7:39 am

    […]  La guía definitiva del Loop de WordPress […]

  10. James McWhorter May 27, 2009 at 9:29 am

    Muy útil. ¡Gracias!

  11. WordPress Loop | Theme Heven April 23, 2009 at 10:27 pm

    […] Leer más… […]

  12. Derek Perkins April 5, 2009 at 9:27 am

    Gracias por la publicación, realmente ayudó. Mi única sugerencia sería editar tus etiquetas de plantilla para que todas tengan el punto y coma de cierre.

  13. Estaba tratando de hacer que solo se mostrara una categoría en la página principal y tuve éxito después de leer esta publicación con la sintaxis exacta que necesito para modificar el bucle.

    http://www.nietoperzka.com/wptraining/custom-order-of-posts-on-main-page/

    Pero luego tuve errores con mis otras categorías y áreas del sitio, pero una vez que leí tu publicación y explicó más sobre la jerarquía de páginas, creé un home.php separado para el bucle de mi página de destino y dejé todo lo demás igual que el original.

    Gracias por esta publicación.

  14. Jarod Taylor - Web Design & Web Development January 7, 2009 at 9:36 am

    […] si tienes problemas para entender algo de lo que acabamos de hacer, te recomiendo visitar este tutorial para comprender mejor el […]

  15. ¿Puedo modificar el bucle de WordPress usando una función de plugin?

  16. Sabes qué, eres simplemente increíble, me pregunto por qué no encontré tu sitio antes y por qué no me cambié a WordPress antes.

    También he comenzado a promocionar tu sitio web a través de comentarios positivos aquí en India.

    Recientemente, fui a una reunión de un club de Toastmasters y le conté a la gente lo maravilloso que es tu sitio.

    Gracias por tus maravillosos consejos.

  17. TheMoonbase - Bookmarks » Blog Archive » The Ultimate Guide to the WordPress Loop | Theme Lab October 13, 2008 at 2:00 pm

    […] La guía definitiva del bucle de WordPress | Theme Lab porque después de todo este tiempo, todavía estoy confundido […]

  18. Una cosa que encontré particularmente útil es la jerarquía de categorías:

    1. category-6.php
    2. category.php
    3. archive.php
    4. index.php

    La primera página te permite tener una página para cada categoría. Wordpress usará ‘category-6.php’ como la página predeterminada para la categoría 6. Puedes averiguar el número de categoría en el backend yendo a Administrar > Categorías y luego haciendo clic en una categoría. Después de hacer clic en la categoría, mira en la barra de direcciones y cerca del final verás: &cat_ID=6. Ese 6 es el número de categoría. ‘category.php’ será la plantilla predeterminada para todas las categorías si no se encuentran plantillas de categoría individuales (como category-6.php). Simplemente coloca estos archivos PHP en la raíz de la carpeta de tu tema.

  19. ¡Guía muy útil, gracias por compartir!

  20. Cynthia Clinton August 20, 2008 at 9:33 pm

    ¡Gracias! Finalmente la explicación del Loop que he estado buscando por toda la web. Ahora lo entiendo. Gracias, de nuevo 😀

  21.   Table Of Contents Of Wordpress Tutorials, Helps, Tips and Tricks by aComment.net July 14, 2008 at 12:32 pm

    […] La guía definitiva del Loop de WordPress […]

  22. How To: Make your WordPress Search Results Unlimited | [Blog Tutorials] June 7, 2008 at 9:58 pm

    […] es posible que no quieras que tus resultados de búsqueda estén limitados por los confines del Loop estándar de WordPress. Este es un rápido truco de código para permitir que una búsqueda devuelva resultados ilimitados, alterando el estándar […]

  23. Ultimate Guide to the WordPress Loop | [Blog Tutorials] June 7, 2008 at 9:50 pm

    […] Un área excelente para comenzar es aprender cómo funciona el loop de WordPress.  Esta es una función básica de los blogs que se utiliza para mostrar el número X de las publicaciones más recientes en la página de inicio de tu blog (para blogs tradicionales).   En lugar de entrar en mucho detalle aquí, me gustaría dirigirte a una nueva publicación de Themelab que está diseñada para ser la Guía Definitiva del loop de WordPress.  […]

  24. Excuses, Wordpress, & Blogging | FPettit.com May 16, 2008 at 9:20 pm

    […] La Guía Definitiva del Loop de WordPress | Theme Lab […]

  25. TalkingApes.com » Blog Archive » Brad’s 2008 Link Extravaganza May 8, 2008 at 3:58 pm

    […] La Guía Definitiva del Loop de WordPress | Theme Lab […]

Agregar un comentario

Nos complace que hayas elegido dejar un comentario. Ten en cuenta que todos los comentarios son moderados de acuerdo con nuestra política de privacidad, y todos los enlaces son nofollow. NO uses palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.

Lista de verificación para lanzar WordPress

La lista de verificación definitiva para lanzar WordPress

Hemos recopilado todos los elementos esenciales de la lista de verificación para el lanzamiento de tu próximo sitio web de WordPress en un práctico ebook.
¡Sí, envíame el eBook gratis!