WP desde cero (4): el loop + 2 bonus

En esta entrada comenzaremos a ver cómo funciona el loop de WordPress.

Roy Lichtenstein

archivado en: WordPress / 30 noviembre, 2012 / taller:

Seguimos con la serie de WordPress desde cero. En esta entrada conoceremos el mecanismo básico de este gestor de contenidos, el loop.

En programación es frecuente usar bucles, que consisten en repetir una instrucción n veces hasta que sea válida una condición dada. Por ejemplo, si queremos que una palabra parpadee 10 veces, en vez de escribir 10 instrucciones, podríamos escribir un bucle de este tipo:

  • variable contador = 0;
  • mientras (variable contador sea menor de 10) {
  • la palabra parpadea;
  • variable contador = variable contador+1;
  • }

Como en cada vuelta del bucle sumamos 1 a la variable, cuando llega a 10 ya no se cumple la condición de partida y se sale del bucle.

WordPress usa un bucle para sacar la información de la base de datos que se conoce como el loop y su sintaxis básica es muy sencilla:

  • <?php while (have_posts()) : the_post(); ?> <!-- principio del loop -->
  • Aquí una serie de instrucciones en PHP/WP y de código HTML;
  • <?php endwhile; ?> <!-- final del loop -->

En esencia, lo que hace es lo siguiente:

1) Con have_post() comprueba si hay entradas en la base de datos que se correspondan a la consulta. Por ejemplo, si está en la portada, y en los Ajustes de lectura hay indicado que se muestren 12 entradas, comprueba que el contador no haya superado 12; si está en una entrada individual, que el contador no pase de uno; etcétera.

2) Con the_post() accede a toda una serie de datos que veremos a continuación relacionados con la entrada que en ese momento está siendo iterada en el bucle.

Y si no nos hemos enterado bien de cómo funciona, no pasa nada, porque lo realmente importante es lo siguiente.

Entremedias del bucle, es decir, entre while... y endwhile, podemos recuperar la información de cada post usando funciones muy sencillas, como the_title(), que nos devolvería el título del post que en este momento se está iterando en el bucle.

Así, por ejemplo, esté código

  • <?php while (have_posts()) : the_post(); ?> <!-- principio del loop -->
  •  <?php the_title() ; ?>
  • <?php endwhile; ?> <!-- final del loop -->

Devolvería todos los títulos de cada post.

Como mejor se comprende esto es poniéndolo en práctica, así que lo mejor ahora es escribir un par de entradas en el WordPress que estemos utilizando para este tutorial y luego añadir el código anterior en el cuerpo central del documento:

  • <div id="primary">
  • <?php while (have_posts()) : the_post(); ?> <!-- principio del loop -->
  • <?php the_title() ; ?>
  • <?php endwhile; ?> <!-- final del loop -->
  • </div> <!-- #primary -->

Lo que en pantalla debería mostrar algo así:

[singlepic id=31 w=311 h=121 float=center]

Claro está, dentro del loop podemos incluir también código HTML. Así, podemos ir añadiendo ya un par <article> para cada entrada

  • <div id="primary">
  • <?php while (have_posts()) : the_post(); ?> <!-- principio del loop -->
  • <article class="portada_layout_contenedor">
  • <?php the_title() ; ?>
  • </article>
  • <?php endwhile; ?> <!-- final del loop -->
  • </div> <!-- #primary -->

Si hay post...

Falta un detalle importante en el ejemplo anterior para que el código funcione de forma correcta. ¿Qué sucede si no hay entradas que se ajusten a la consulta inicial?

Junto con los bucles, otro recurso habitual de la programación son las estructuras condicionales, que permiten establecer una condición para que se ejecuten un conjunto de instrucciones.

  • Si (se cumple esta condición) {
  • haz esto;
  • } si no {
  • haz esto otro;
  • }

Así, en el loop podemos establecer una condición inicial —si hay entradas— (if) y decirle que si no se cumple (else) escriba un aviso para el usuario.

  • <div id="primary">
  • <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  • <article class="portada_layout_contenedor">
  • <?php the_title() ; ?>
  • </article>
  • <?php endwhile; else: ?>
  • <p> <?php _e('Sin entradadas', 'mmfilesi-bones'); ?> </p>
  • <?php endif; ?>
  • </div> <!-- #primary -->

Sencillo, no?

Bonus

1. Internacionalizar los textos

En el código anterior no he escrito directamente el texto «Sin entradas», sino que lo he pasado antes por una función PHP.  Esta es la forma correcta de escribir cualquier cadena de texto en un tema. Veamos por qué.

Mediante algunos programas, como el Poedit, se pueden recuperar todas las cadenas de texto de un tema o de un plugin que están escritas de determinada manera y preparar un archivo .mo que luego utiliza cada WordPress según el idioma definido por el usuario. Por ejemplo, si un tema cuenta con una traducción al español (es_ES.mo) y en Ajustes > Idioma del sitio está indicado que se use spanish; Castillian, utilizará esa traducción.

Para que las cadenas puedan localizarse por el Poedit y para que WordPress sepa que ahí debe usar la traducción, si existe, hay que escribirlas entre paréntesis, añadiendo el nombre del tema y precedidas por alguno de estos prefijos:

_e: si el texto debe imprimirse en pantalla (equivale a echo)

  • <?php _e('soy un texto que se verá en pantalla','mmfilesi-bones') ?>

__: si el texto no se ve en pantalla

  • <?php __('soy un texto que no se verá en pantalla','mmfilesi-bones') ?>

Hay más posibilidades, como _x o _n, pero de momento vale con que nos aprendamos las dos anteriores.

2. Clases dinámicas

En <article> he definido una clase llamada «portada_layout_contenedor». WordPress cuenta con la posibilidad de crear el nombre de las clases de forma dinámica mediante las funciones post_class() y body_class(), peeero, la verdad es que no me parecen útiles ni recomendables.

A la que un sitio sea un poco complejo, las líneas CSS pasan a ser centenares. La única manera de trabajar con eficacia y no volverse tarumba tratando de entender para qué servía cada cual pasado un tiempo es seguir un método que a uno mismo le resulte cómodo y comprensible. En mi caso, por ejemplo, me gusta situar los estilos en su contexto. Así, con el nombre «portada_layout_contenedor», sé que estoy en la portada y dentro de ella en el layout (el listado) de post; al igual que con  «portada_layout_titular» entiendo enseguida que estoy haciendo referencia a los titulares del layout.

Da igual este método que cualquier otro que resulte cómodo para uno mismo, pero el caso es que los nombres, en inglés, que genera dinámicamente WordPress, al menos a mí, no me permiten trabajar con facilidad (son términos del tipo class="post post-4564 category-48 category-dancing logged-in").

Y hasta aquí por hoy, en la próxima entrada de esta serie seguiremos viendo cómo funciona el loop.

Abrazos++;

|| Tags: , ,

valoración de los lectores sobre WP desde cero (4): el loop + 2 bonus

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 4.5 sobre 5 (16 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.