En este tutorial, voy a repasar El Bucle, y cómo WordPress lo utiliza para mostrar sus entradas y páginas. Tenga en cuenta que esto es un poco más avanzado que nuestros tutoriales anteriores. Espero que encuentre esta guía más fácil de entender que lo que está disponible en la documentación de WordPress. Esto es lo que veremos:
- Una definición de El Bucle.
- Flujo básico del Bucle.
- Etiquetas de plantilla usadas en El Bucle
- Qué hacer después del Bucle
- Jerarquía de archivos de plantilla
Si quiere comprender mejor cómo funciona realmente un tema de WordPress entre bastidores, siga leyendo.
Nota: Este tutorial asume que estás usando un tema estándar de WordPress, como el tema por defecto Kubrick. Nada de bucles múltiples avanzados… todavía.
¿Qué es el bucle?
Probablemente aún 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.
Por el momento, mi página de inicio muestra 10 entradas por página, que es lo que he definido Mostrar como máximo * entradas. En los mensajes individuales y páginas – el mismo código básico Loop sólo mostrará sólo 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 desea mostrar en el bucle
<?php endwhile;?>
2. Lo que se muestra cuando termina el Bucle
<?php else :?>
3. Si no hay nada que mostrar
<?php endif; ?>
Si hay entradas disponibles en la consulta, empezará 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 encuentra ninguna entrada, o hay algún otro tipo de error 404, se mostrará la parte 3.
Etiquetas de plantilla utilizadas en el bucle
A menos que quiera 1. Lo que quiere mostrar en el Bucle repetido en la página principal de su blog WordPress 10 veces, probablemente debería aprender algunas de las etiquetas de plantilla básicas. Echemos un vistazo al código de index.php en la plantilla por defecto de WordPress.
Como puedes ver, hay bastantes etiquetas de plantilla dentro del Loop que mostrarán cosas como el título de la entrada, el permalink, el contenido, etc. Voy a desglosar cada una de las etiquetas de plantilla en el tema por defecto de WordPress.
- <?php the_permalink() ?> – Esto hará eco del permalink del post, es decir http://www.themelab.com/?p=1
- <?php the_title();?> – Se hace eco del título de la entrada, por ejemplo, ¡Hola Mundo!
- <?php the_time(‘F jS, Y’)?> – Esto mostrará la fecha, es decir, 4 de abril de 2008. Puede encontrar una lista completa de formas de formatear la fecha en php.net
- <?php the_author() ?> – Esto mostrará el nombre del autor, es decir, Leland. Esto está comentado en el tema por defecto.
- <?php the_tags(‘Etiquetas: ‘, ‘, ‘, ‘<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 forma similar a las etiquetas anteriores.
- <?php edit_post_link(‘Editar’, ”, ‘ | ‘); ?> – El enlace para editar la entrada sólo será visible para aquellos que tengan permiso.
- <?php comments_popup_link(‘No Comments “‘, ‘1 Comment “‘, ‘% Comments “‘); ?> – Mostrará el enlace a los comentarios. Esto no se mostrará en los mensajes individuales o páginas.
Hay muchas más en la página de Etiquetas de Plantilla en WordPress.org. Algunas de ellas pueden funcionar en el Bucle, mientras que otras no.
Después del Bucle
Echemos un vistazo al código después de que el bucle se detiene en el tema por defecto.
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Entradas antiguas') ?></div>
<div class="alignright"><?php previous_posts_link('Entradas más recientes »') ?></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. No se mostrará en las entradas y páginas individuales. Por supuesto, usted podría reemplazar esto con algo como PageNavi, pero eso depende de usted.
Si no hay entradas para mostrar (posiblemente debido a un error 404), se mostrará lo siguiente después del else
<h2 class="center">No Encontrado</h2>
<p class="center">Lo sentimos, pero está buscando algo que no está aquí.</p>
<?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 plantillas, que existe en el tema por defecto.
Jerarquía de plantillas
Algunos archivos de plantilla tendrán prioridad sobre el index.php para ciertos tipos de páginas si están presentes en el directorio de plantillas. A continuación se enumeran algunos ejemplos de jerarquía de plantillas, por orden de prioridad.
Página de inicio
- home.php
- index.php
Entrada individual
- single.php
- index.php
Resultados de la búsqueda
- buscar.php
- index.php
Página 404
- 404.php
- index.php
Hay algunas técnicas más avanzadas listadas en la página de Jerarquía de Plantillas en WordPress.org.
¿Para qué sirve la jerarquía de plantillas? Básicamente, puedes usarla para crear nuevos diseños para diferentes tipos de páginas de WordPress sin tener que modificar demasiado tu archivo index. php.
Conclusión
Así que ahora usted (esperemos) tiene una mejor idea de lo que el WordPress Loop se trata. Siéntete libre de dejar un comentario si te ha gustado, si lo has odiado, si no lo has entendido, lo que sea – todos los comentarios son bienvenidos. Suscríbete al feed para estar al día de las últimas novedades sobre los temas de Theme Lab y los nuevos tutoriales. Gracias por leernos.
[…] subscribe to our feed! You can also receive updates from this blog via email.We all know what the WordPress Loop is right? If not, there are many great tutorials around the web that explain the WordPress […]
Really useful guide, I will try at once.
@Fernando: Thanks for letting me know…
It’s a very nice guide and I’ve translate it to spanish here in order to share it with no english spoken folks 🙂
Thank you 😉
[…] The Ultimate Guide to the WordPress Loop: The Loop happens to be very challenging. This link will help you through it. […]
[…] One great area to start is learning how the WordPress loop works. This is a basic function of blogging used to display the most recent X number of posts on your blog’s homepage (for traditional blogs). Rather than go into to much detail here, I’d like to point you towards a new post by Themelab which is designed to be the Utlimate Guide to the WordPress loop. […]
[…] two recent articles, I have have found helpful are: The Ultimate Guide to the WordPress Loop and another called Global Variables and the WordPress […]
@RSS Filter: That’s possible…but I’ll save that for a future tutorial.
[…] teach you everything you need to know about the WordPress Loop. What it is, how to use it, and more.read more | digg story Share and Enjoy: These icons link to social bookmarking sites where readers can […]
So how would you tell the loop to display only the last post in a static home page or index file?
Awesome guide about an important aspect of WordPress theme development. Thanks!
[…] The Ultimate Guide to the WordPress Loop […]
[…] The Ultimate Guide to the WordPress Loop (tags: wordpress) […]
[…] propaganda press on April 6th, 2008 ok much like combolombo we just discovered a new site with an awesome article on the wordpress loopy. you definitely want to read and bookmark this one. Tagged with: wordpress « African […]
[…] Ultimate guide to the WordPress Loop… Get the skinny on all the globals and what […]
[…] The Ultimate Guide to the WordPress Loop | Theme Lab (tags: wordpress howto php guide programming theme blog) […]
[…] Guide to the WordPress loop […]
[…] The Ultimate Guide to the WordPress Loop – Theme Lab […]
[…] The Ultimate Guide to the WordPress Loop (tags: loop wordpress) […]
Oh man this is a keeper. I could have seriously used this when trying to figure out some plugin tweaks.
They kept saying, “place this code outside the loop”
And now I know what the !#$%^% a loops is 🙂
[…] is a guide to the WordPress Loop. Especially useful for beginning WordPress theme creators and wordpress developers. Share and […]
Hey Leland, OT, but congrats on your subscriber boost !
– Sean Pollock
very helpful guide.. thanks!
[…] The Ultimate Guide to the WordPress Loop – This site really breaks down the Loop for you to understand. […]
[…] WordPress. Go ahead, subscribe to our feed! You can also receive updates from this blog via email.The Ultimate Guide to the WordPress Loop: Ah, the famed WordPress loop that runs it all. Ronald has done a very nice job of identifying […]