SummArg | Cursos y recursos para webmasters

Clase 4: El bucle y jerarquía de plantillas

El bucle (en inglés The Loop) es el proceso de efectuar búsquedas de determinados parámetros a través de ciertas condiciones. El bucle mas simple que existe en WordPress es el siguiente:

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

Lo que hace es verificar que en la sección en donde se ejecuta existan entradas. En caso de ser positivo entonces se ejecuta la sentencia de PHP while, que se encarga de recorrer la base de datos en busca de nuestras entradas mientras have_posts() sea verdadero. Cuando have_posts() ya no encuentre entradas en la sección, termina el bucle.

Cuando mencionamos “la sección”, nos referimos a si estamos en la página inicial de nuestro WordPress, una categoría, una búsqueda por fechas, por autor, o tags.

Ahora veamos este mismo bucle en su forma completa.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
Código que se ejecuta mientras have_posts() sea verdadero.
<?php endwhile; else: ?>
Código a ejecutarse para el caso de que have_posts() sea falso, es decir que no contenga entradas.
<php endif; ?>Fin del bucle

¿Qué código podría ejecutarse mientras have_posts() sea verdadero? En el caso de que existan entradas, lo que podría interesarnos es, por ejemplo, obtener el título de la entrada con link a la misma, el contenido, la fecha de publicación y el autor. Para ello utilizamos las siguientes funciones:

<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php the_time('F jS, Y') ?>
<?php the_author() ?>

Cada una de estas funciones posee su documentación en el Codex de WordPress.org, un documento fundamental para aprender a utilizar la enorme cantidad de funciones de la plataforma con sus respectivos parámetros (opciones).

El bucle completo quedaría de la siguiente manera:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php the_time('F jS, Y') ?>
<?php the_author() ?>
<?php endwhile; else: ?>Lo sentimos, no se han encontrado entradas.
<?php endif; ?>

La cantidad de entradas por página se pueden configurar desde Escritorio > Opciones > Lectura. El bucle expuesto si es ejecutado en la plantilla de inicio de nuestro sitio, arrojará la información indicada (título, link, contenido, fecha y autor) de las últimas 10 entradas, de cualquier categoría, una debajo de la otra y de la mas reciente a la mas antigua.

Este mismo bucle en otras plantillas, arrojará diferentes resultados. Por ejemplo, para el caso de ser ejecutado el bucle en una plantilla de categoría, buscará las últimas entradas de esa categoría específica. El mismo caso se dará en la plantilla de archivo por fecha (date), archivo por autor (author), etc. Un dato interesante es que WordPress tiene un sistema de jerarquía de plantillas, en donde primero busca una plantilla específica y si no la encuentra cae en buscar una plantilla mas general para esa misma sección. En caso de no existir una plantilla determinada, finalmente utilizará la plantilla index.php para mostrar el resultado del bucle de esa sección.

Este esquema es una versión muy simplificada del complejo sistema de plantillas que posee WordPress 3.0 y que pueden visualizar aquí.

Para poner en práctica lo visto hoy, insertaremos en nuestro ThemeTaller un bucle sencillo en la plantilla archive.php y veremos como reacciona cuando solicitamos diferentes categorías, archivos por fecha, por autor y tags. Mas adelante nos ocuparemos de personalizar algunas categorías en particular, hacer dos o tres templates diferentes para páginas y varias cuestiones mas.

Para poder probar la efectividad del ejercicio tenemos que tener contenidos cargados en nuestro WordPress (en la primer clase vimos como importar algunos contenidos de prueba).

Creamos el archivo archive.php y dentro colocaremos:

<?php get_header(); ?>
<div id="wrapper"><?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="dos-tercios listado">
<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
<?php the_time('F jS, Y') ?> | <?php the_author() ?>
</div><!-- end of dos-tercios -->
<?php endwhile; else: ?>
<h2>No encontrado</h2>
<p>Lo sentimos, intente utilizar nuestro formulario de búsquedas.</p>
<?php endif; ?>
</div><!-- end of wrapper-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

En este código hemos cambiado the_content() que lista el contenido completo de una página, por the_excerpt(), que trae por defecto las primeras 55 palabras sin formato de la entrada. En el CSS añadimos las siguientes líneas:

#wrapper {margin-left:20px;margin-top:20px;float:left;width:606px;}
.dos-tercios {float:left;margin-bottom:20px;padding: 5px;width:596px;}
.listado {border-bottom: 1px solid #7b7b7b;}

Esta plantilla servirá para ver: categorías, entradas por tags, entradas por autor, entradas por fecha, entradas por taxonomía y por post type.

Podemos probar las siguientes URLs en nuestro servidor de pruebas (nosotros colocamos las URLs a nuestro WP de pruebas):

http://www.summarg.com/demos/themetaller/?tag=post-formats

http://www.summarg.com/demos/themetaller/?author=3

http://www.summarg.com/demos/themetaller/?cat=45

El mismo contenido sirve para los archivos single.php y page.php. Probemos colocar el mismo contenido de archive.php en page.php y en single.php cambiando the_excerpt() por the_content() y solicitemos una página. Como resultado tendremos una página con su respectivo título, contenido completo, fecha y autor.

http://www.summarg.com/demos/themetaller/?page_id=501

Y para avanzar un poco mas con el estilo del theme, podemos añadir valores para las propiedades básicas que ubicaremos luego de body. Estas serán los headings (h1 a h6), p, a, cite, pre, ul, ol, li, table, etc.

a, a:visited {color:#7ec5ff;text-decoration:underline;}
a:hover {text-decoration: none;color:#8ed6ff;}
small {font: normal 10px "arial", Sans-serif;}
img {border: none;margin: 3px;}
p {font: normal 12px "arial", Sans-serif;line-height:18px;padding: 0px 0px 15px 0px;margin: 2px 0;}
table, td, tr {font: normal 12px "arial", Sans-serif;line-height:18px;}
td {padding:5px;}
th {font: bold 13px  "arial", Sans-serif;line-height:18px;padding: 5px;}
h1, h2, h3, h4, h5, h6 {color:#7ec5ff;padding:0px;}
h1 {font: normal 26px/30px "arial", Sans-serif;margin:0 0 5px 0;letter-spacing:-1px;}
h2 {font:normal 22px/24px "arial", Sans-serif;letter-spacing:-1px;margin:0 0 5px 0;}
h3 {font:normal 20px/22px "arial", Sans-serif;margin:0 0 10px 0;}
h4 {font:bold 16px/24px  "arial", Sans-serif;margin:0;}
h5 {font:bold 14px/22px  "arial", Sans-serif;margin:0;}
h6 {font:normal 12px "arial", Sans-serif;margin:0;}
h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited {color: #7ec5ff;text-decoration: none;}
h1 a:hover, h2 a:hover, h3 a:hover {color: #7ec5ff;text-decoration: none;}
h3 a, h3 a:visited, h4 a, h4 a:visited {color: #417394;text-decoration:none;}
form {margin:0px;padding:0px;}
blockquote {padding: 10px 10px; margin:10px 0px 10px 0px; list-style:none; border:1px solid #7ec5ff; background-color:#8ed6ff;font: normal 120%/100% Arial, sans serif; }
ul{font: normal 12px "arial", Sans-serif;list-style:circle;padding:0px; margin:0px;}
ol{font: normal 12px "arial", Sans-serif;list-style-type:decimal;padding:0px; margin:0px 0px 10px 10px; }
li{margin: 0px 0px 0px 10px; padding: 0px;}
table, tr, td {font-size:12px;}
strong {font-weight:bold;}cite,em,i {font-style: italic;border: none;}
pre{font-family:"Courier New", Courier, monospace;font-size:12px;line-height:15px;}

En la próxima clase veremos como hacer consultas avanzadas con query_posts() para poder llenar los bloques de información del index.php que ya llevamos empezado.

Ver el demo de esta clase | Descargar el theme con el ejercicio de esta clase ThemeTaller clase 4 (1319)

Volver al temario del taller

Dejar un comentario

  1. David

    Bueno, siguiendo todos los pasos, me han fallado los estilos (copiando y pegando). El diseño de mi página no se corresponde con los ejemplos de sus URLs. Pero lo importante es que se cómo funcionan los bucles.
    Saludos

  2. Nekko

    Gracias por tu mensaje David! Si descargás el ejercicio de esta clase, verás que tuve que modificar un poco algunos valores de otras propiedades (ej. #header) en la plantilla de estilos para que las cajas se ubiquen correctamente. Igual tu punto es válido, en las próximas clases haré lo posible por indicar aún estos pequeños cambios en el CSS.

  3. Muchas gracias por seguir compartiendo tu conocimiento. En cuanto tenga un poco más de tiempo quiero aumentar mis conocimientos sobre wordpress ya que me apasiona el diseño web en este y me tengo que conformar con modificar plantillas de terceros sin poder crear la mía propia.

    Espero que sigas ofreciéndonos este gran contenido y puedas finalizar el “taller”.

    Muchas gracias de nuevo por tu esfuerzo.

    Un saludo.

  4. José Quilón

    Hola a todos, he importado los contenidos del capitulo 1 pero no consigo ver los contenidos aunque luego en las entradas si estan y publicadas pero no las veo, supongo que sera por aun no esta terminado el taller, saludos.

  5. Nekko

    En la clase 5, que ya está publicada, podrás ver los bucles que muestran esos contenidos. Cualquier duda sentite libre de preguntar aquí o en nuestro foro.

  6. maragota

    Fantástico tutorial, de una claridad meridiana. Lo he seguido línea por línea y todo a ido ok.
    Muchas gracias.
    Espero impaciente las nuevas clases. Porque las habrá, ¿no?

    Un saludo,

  7. Por supuesto! Ya está disponible la clase 5. En breve espero terminar la 6.

  8. En dónde es que pongo el bucle? en index.php? entre qué etiquetas?, gracias

  9. perdon no habia leído lo que seguía jaja! gracias

  10. Un pequeño aporte, en la imagen dice “is_seach()” para llamar al archivo “search.php” y en realidad es “is_search()” (siempre sin comillas)
    Espero les sea de ayuda.
    Saludos

  11. Hola, se me desordenó el header (el #menu y el #menu-top) y no sé que propiedades agregar o modificar para que se arregle. Además, tienen un punto al lado (item de lista).
    ¿Me ayudas?

  12. Nekko

    Tenés algún problema en tu CSS, posiblemente tenés una llave sin cerrar y por eso no lee correctamente las propiedades correspondientes a los menús.

  13. No hay ningún error en el estilo, ya me fijé que todo esté correcto. Intenté agregar y modificar las propiedades del #menú y #menu-top pero no pude acomodarlos. Seguían en forma de lista y con los items (además de estar desordenados).

    Entonces entré al header.php y modifiqué el código.
    (No lo pongo como HTML porque no se vería el código si se aceptan comentarios con HTML , pero espero entiendas las etiquetas).

    Reemplacé:

    ul id=”menu-top”
    (Item de lista)
    (Item de lista)
    (Item de lista)
    (Item de lista)
    /ul

    ul id=”menu”
    (Item de lista)
    (Item de lista)
    (Item de lista)
    (Item de lista)
    /ul

    Por esto::

    p id=”menu-top”
    (Acá puse los cuatro links)
    /p

    p id=”menu”
    (Acá puse los cuatro links)
    /p

    Y con eso funcionó perfecto, pero claro que tuve que modificar el style.css para darle un estilo a esos párrafos.

    Reemplacé el código de “ul#menu” y “ul#menu li a” y “ul#menu li a:hover” por el siguiente código:

    p # menu {
    float:left;
    width: 920px;
    margin: 0 auto;
    height:25px;
    background-image: url(imagenes/menu_bg.png);
    background-repeat: repeat-x;
    background-color: #7ec5ff;
    }
    p # menu a{
    float:left;
    list-style-type:none;
    text-decoration:none;
    color:#fff;
    font-weight:bold;
    padding: 10px 20px;
    border-left: 1px solid white;
    }
    p # menu a:hover {
    text-decoration:none;
    background-color: 8ed6ff;
    color: #f4f4f4;
    padding: 10px 20px;
    }

    Y ya se ordenó todo. Aunque quiero saber si esto no va a interferir con las siguientes clases del taller. Creería que no, pero por las dudas pregunto.

    Saludos

  14. Nekko

    Yo creo que te va a complicar cuando llegues a la clase 6. Si querés enviame tu theme comprimido en un zip para revisarlo o esperá a seguir avanzando y ver si encontrás en donde hay alguna diferencia. Descargaste los archivos de la clase como para comparar?

    Saludos!

  15. Los archivos de la clase ya intenté usarlos (solo puse lo relacionado al #menu y al #menu-top) y se quitaron los items y se ordenó un pocoel header, pero el index quedó todo desordenado. Voy a seguir con mis cambios en el tema, y si tengo problemas más adelante te envío mi tema para que me ayudes a solucionarlo, pero por ahora voy bien.
    PD: gracias por responder con tanta rapidez!

  16. oskar

    no consigo que se muestre el loop

    he copiado todo exactamente como lo muestras en tu maravilloso tutorial, primero probé con mis archivos y mi tema y como no iba lo repetí con el código de estos ejemplos y…

    cuando pongo la url, por ejemplo, “localhost/wp/?author=6”
    me la cambia a “http://localhost/wp/author/editor/” (hasta ahí bien), pero da un 404

    “The requested URL /wp/author/editor/ was not found on this server.”

    dónde puede estar el problema?

  17. Nekko

    Cambiaste a URLs amigables, pusiste el código correspondiente dentro del htaccess?

  18. oskar

    lo primero;

    gracias por responder tan rápido, esta serie de artículos es de lo mejor que he visto y si además, das el soporte que estás dando… el valor añadido es incalculable.

    lo segundo;

    mea culpa, cambié a url amigables, confirmé que existía el htacces, pero… el modrewrite de apache no estaba habilitado… ni lo miré porque siempre lo habilito por defecto, en este caso no lo hice… ups!!

    gracias de nuevo

    pdta: soy joomlero de siempre y estás haciendo mucho más fácil mi acercamiento a wp… de momento, sigo dudando en si cambiar de plataforma… pero el saber… si tienes alguna valoración al respecto (wp vs joomla) agradecería tu punto de vista

    un saludo.

  19. Nekko

    Muchas gracias por tus palabras! La verdad es que no puedo opinar mucho de Joomla ya que no lo he utilizado en demasía ni al mismo nivel que uso WordPress. Siempre se me antojó muy pesado, muy vulnerable y muy complicado. Conozco muchos Joomleros realmente expertos que se cambiaron a WordPress, eso debe significar algo, no? Saludos!

  20. waldemar

    hola, muy buen curso todo bien asta ahora, pero tengo una duda en la ultima parte mensionas que para ir avanzando con el theme podemos poner el css que publicas, dime tengo k hacerlo en la misma hoja de stylo o directamente en algun archivo php creado, por k lo inserte en el style.css y se deforman mis menus al parecer por el estilo ul{list-style-type:circle;}
    por k le cambia todo a mis menus. respuesta porfa y felicidades por el curso muy bueno.

  21. Hola NEKKO , tus tutoriales estan geniales , trabajas por partes y con una explicacion de lo que es y que realiza . Genial

    Muchos no prestan atencion a la explicacion del LOOP de WORDPRESS y lo pasan por ALTO , tanto como las llamadas de WORDPRESS .

    Al menos me pasaba a mí , tus tutoriales de wordpress complementan enormermente unos videos que habia visto hacerca de este tema para la creacion de wordpress.

    Gracias por tu aporte

  22. Borja

    Hola!gracias de nuevo por el magnifico tutorial. Tengo una duda: una vez que ya subi el themetaller a wordpress, ahora que propones crear las páginas archive.php, page.php etc… como actualizo el tema? en el editor de wordpress no deja crear nuevas paginas, cierto? He intentado subir de nuevo el theme en zip, con las nuevas páginas creadas, pero me da error, pues dice que el archivo ya existe (aunque lo llamo de diferente manera al anterior).
    En el punto en el que estamos, podemos subir cosas al servidor con un cliente FTP (filezilla por ejemplo)? como?que nombre de sesion y host sería?
    Muchas gracias un saludo!

  23. Borja

    hola de nuevo, ignora por favor la preugtna de antes. ya me he dado cuenta de como funciona, estaba confundido!

  24. Excelente aporte, gracias por compartirlo… esperamos mas publicaciones interesantes..!!

  25. mario

    Quería agregar que sería bueno que los link se abrieran en una pestaña nueva, ya que varias veces por revisarlos, tuve que volver a cargar el contenido.

    podemos abrirlos con click derecho o cmd, pero a veces se olvida jaja

  26. Ruben

    Hola primero de todo quiero felicitarte por este curso, realmente cuesta cuando te pones con algo nuevo y estos tutoriales lo hacen mas llevadero.

    Quería preguntarte una cosa… ¿Cuando hacemos la llamada a is_category() o is_tag() o is_author()? Es lo único que no me queda claro.

    Porque lo que hacemos es que ponemos el código en el archive.php y en la URL le pasamos localhost/wordpress/?author=3 yo aquí entiendo que estamos hablando de un author porque lo tiene expresado en la URL pero no hace falta llamar a is_author() ???

    Gracias

  27. […] Clase 4: El bucle y jerarquía de plantillas […]

  28. […] Clase 4: El bucle y jerarquía de plantillas […]

  29. […] Clase 4: El bucle y jerarquías de templates. […]

  30. […] Clase 4: El bucle y jerarquías de templates. […]

  31. Ricardo

    mi pregunta en donde se definio previamente la clase “wrapper”?
    //lo busque en el css pero no esta? que es lo que hace al ser llamado dentro del archivo “archive.php” entiendo que es para busqueda pero no comprendo donde dedifinio antes la clase “wrapper” ya que tambien lo utilizan en el archivo “page.php”

    Gracias de antemano por la aclaración saludos.

  32. Ricardo

    ha encontre la definicion de la clase wrapper! 😀

  33. Francisco

    Líneas más arriba dice que para correr el ejemplo: nosotros colocamos las URLs a nuestro WP de pruebas; pero no se como hacer eso. Tengo instalado el xampp y el wordpress y guardé el código de ejemplo en la carpeta donde dicen, por lo que agradecería me dijeran como correr el ejemplo.

    Saludos.

  34. Francisco

    Quise correr este ejemplo escribiendo en el navegador:

    http://localhost/wordpress/wp-content/themes/themeTaller/index.php

    y me dice que no está definida la función get_header()

    y agradecería que alguien me dijera como se corre el ejemplo.

    Saludos.

Dejar un comentario