WP desde cero (12): 4 trucos útiles para el loop

En esta entrada veremos 4 trucos útiles que podemos emplear durante el loop de WordPress.

Roy Lichtenstein

archivado en: WordPress / 21 diciembre, 2012 / taller:

Seguimos con la serie de WordPress desde cero. En las dos entradas anteriores vimos solo cuestiones teóricas sobre el loop, así que antes de seguir con el tema responsive que estamos preparando vamos a ver 4 trucos prácticos.

1). Destacar una categoría durante el loop

Las estructuras condicionales son un recurso habitual de la programación. Recordemos que consistían en ejecutar instrucciones solo en el caso de que se cumpla una condición de partida.

  • if ( condición se cumple ) {
  • // código a ejecutar;
  • }

Se pueden usar estructuras condicionales en el loop para lo que se quiera. Por ejemplo, imaginemos que tenemos un estilo especial para determinada categoría, como un fondo amarillo.

  • .fondo_amarillo {
  • background-color: #ff0;
  • }

Durante el loop evaluamos si el post que toca en esa vuelta es de la categoría x y, en ese caso, añadimos esa clase.

Para eso no hay que usar the_category(), que mostraría las categorías por pantalla, incluidos los enlaces, ni tampoco get_the_category(), que nos daría un array complicado de manejar, sino una función de WordPress llamada in_category(), que comprueba si existe una categoría, en cuyo caso devuelve true, es decir, que sí se cumple la condición.

  • <?php while (have_posts()) : the_post();
  • // Si entre las categorías se encuentra la categoría tiroliro
  • if (in_category( 'tiroliro' ) ) {
  • // le ponemos un fondo amarillo
  • $clase = "fondo_amarillo";
  • } else {
  • // sino será normal
  • $clase = "fondo_normal";
  • }
  • ?>
  • <article class="<?php echo $clase; ?> ">

Importante: por razones pedagógicas, en el ejemplo anterior he empleado el nombre de la categoría, pero en la vida real conviene trabajar siempre sobre el id de las categorías (o de los tags o de lo que sea), ya que los nombres pueden cambiarse en un futuro, pero los IDs siempre serán los mismos.

  • if (in_category( '7' ) ) {
  • $clase = "fondo_amarillo";
  • } else {
  • $clase = "fondo_normal";
  • }

Para saber cuál es el ID de una categoría, basta con pulsar Categorías > Editar categoría y fijarse en la URL, donde pone «tag_ID= número».

[singlepic id=48 w=350 h=173 float=center]

2. Clases dinámicas

Vamos a ver otro caso similar al anterior, pero que me interesa mucho para explicar un truco muy chulo. ¿Qué sucedería si en vez de colorear solo el fondo de la categoría «tiroliro» cada categoría tuviera su propio fondo?

Si resolviéramos el problema mediante condicionales sería una lata, habría que encadenar con else if tantas estructuras condicionales como categorías y, por añadidura, si en el futuro se añadiese otra nueva habría que retocar el código en todos los sitios donde se usase el bucle...

  • if (in_category( '7' ) ) {
  • $clase = "fondo_amarillo";
  • } elseif (in_category( '8' ) ) {
  • $clase = "fondo_rojo";
  • } elseif....

Pero esto se puede resolver de forma mucho más sencilla si recordamos dos cuestiones. Primera, como hemos visto, mediante la sentencia echo de PHP «imprimimos» el valor de una variable o una función por pantalla. Por ejemplo, si tenemos una variable cuyo valor es la cadena de texto "los dinosaurios son divertidos":

  • $variable = "los dinosaurios son divertidos";

si escribimos:

  • echo $variable;

en pantalla se mostraría la cadena:  los dinosaurios son divertidos. Y los echo los podemos usar también para introducir código HTML.

La segunda cosa que debemos recordar o saber es que se puede definir más de una clase en HTML. Por ejemplo, si en las CSS están definidas estas dos clases, una para los bordes y otra para el fondo...

  • .bordes_rojos {
  • border: 1px solid #900;
  • }
  • .fondo_verde {
  • background-color: #090;
  • }

... para obtener un contenedor con el borde rojo y el fondo verde bastaría con declarar las dos clases separadas por un espacio:

  • <div class="bordes_rojos fondo_verde">

Por lo tanto, basta con sacar en cada vuelta del bucle el id de la primera categoría para usarlo como una clase más del contenedor.

  • <?php $array_categorias = get_the_category(); ?>
  • <div class="bordes_rojos <?php echo $category[0]->cat_ID ?>">

Y luego añadir en las CSS el estilo que queramos para la clase "7" o el id que corresponda.

Otra forma de hacer esto mismo es usando la función de WorPress post_class(), que define de forma dinámica la clase a partir de las categorías o los tags.

  • <div <?php post_class(); ?>>

El problema de hacerlo así es que solo queremos una categoría, pero de esta manera saca todas las que tiene un post, habría que aplicar filtros y, al final, el proceso terminaría siendo más enrevesado.

3. Hacer un carrusel con los post destacados

La segunda parte de este truco es algo compleja, pero se puede hacer cortando y pegando el código. Vamos a ver cómo hacer un carrusel con los post «fijos», que son los que se marcan en Visibilidad > Fijar esta entrada en la página principal en el panel de entradas del back-end.

[singlepic id=49 w=318 h=346 float=center]

Estos post fijos en wordpressiano se denominan sticky_posts. Para recuperarlos en un loop secundario es tan sencillo como indicarlo en post__in en el array donde armamos la consulta. Así, por ejemplo, seleccionamos los primeros 3 post sticky, de los que luego mostramos con un loop secundario la imagen destacada y el enlace a la entrada correspondiente.

  1. <?php
  2. $args = array(
  3. 'posts_per_page' => 3,
  4. 'post__in' => get_option( 'sticky_posts' )
  5. );
  6. $query_destacados = new WP_Query ( $args );
  7. while ( $query_destacados->have_posts() ) : $query_destacados->the_post(); ?>
  8. <a href="<?php the_permalink( ); ?>">
  9. <?php if ( has_post_thumbnail() ) {
  10. the_post_thumbnail('medium');
  11. }
  12. ?></a><?php 
  13. endwhile;
  14. wp_reset_query();
  15. wp_reset_postdata();
  16. ?>

Ahora podemos hacer cosas chulas con estos tres post destacados, como mostrarlos en un carrusel. Para eso o bien hacemos uno ex-profeso (ver un tutorial muy bueno de Pablo Rigazzi) o usamos algún plugin, como jquery-cycle.

En este último caso, lo primero es bajarse el plugin y subirlo a la carpeta de nuestro tema, en el subdirectorio js que estamos metiendo todos  los script.

Luego preparamos un archivo que llamaremos slideshow.js (o de cualquier otra manera), en el que pondremos el código en modo no conflicto que activa el carrusel. El plugin ofrece muchas opciones. Así sería un fade sencillo:

  1. jQuery(document).ready(function() {
  2. jQuery('#mi_slideshow').cycle({
  3. fx: 'fade',
  4. timeout: '3500'
  5. });
  6. });

Por último, en el archivo functions.php incluimos el siguiente código, que ya analizaré en detalle cuando veamos cómo funciona jQuery con WordPress.

  1. function carga_jqueries() {
  2. if ( is_home() ) {
  3. wp_register_script('jquery-cycle', get_template_directory_uri() . '/js/jquery.cycle.all.js', array('jquery'),false);
  4. wp_enqueue_script( 'jquery-cycle' );
  5. wp_register_script ('slideshow', get_template_directory_uri().'/js/slideshow.js', array('jquery'),false);
  6. wp_enqueue_script( 'slideshow' );
  7. }
  8. }
  9. add_action( 'wp_enqueue_scripts', 'carga_jqueries' );

Y ya solo faltaría poner el loop de los destacados en un contenedor con el id que hemos definido en slideshow.js.

  • <div id="mi_slideshow">
  • <?php
  • $args = array(
  • '...
  • wp_reset_query();
  • wp_reset_postdata();
  • ?>
  • </div>

En cualquier caso, tengo que reconocer que no me gustan nada los post sticky. Son una lata, pues obligan a hacer dos clicks, uno para abrir el panel y otro para marcar la casilla y casi prefiero usar una categoría llamada especiales cuando he tenido que hacer alguna web con post destacados...

4. Ordenar los post por categoría

Para terminar esta entrada, vamos a ver un truco que creo especialmente útil. Quizás sea algo complicado de entender si no sabemos manejarnos con los arrays. A ver si saco tiempo para preparar una entrada específica.

Imaginemos que tenemos que hacer una web con un layout en el que las entradas se ordenan agrupadas por categorías, como sucede en los periódicos.

[singlepic id=51 w=338 h=236 float=center]

Esto se podría resolver haciendo un loop secundario para cada categoría con WP_Query:

  • $query_videos = new WP_Query( 'cat=1&posts_per_page=3');
  • while ($query_videos->have_posts()) : $query_videos->the_post();
  • ...

Así tendríamos que escribir un loop secundario por cada categoría, pero para picar menos código podemos definir las categorías en un array y luego recorrerlo.

Primero armamos un array con las categorías a mostrar en el layout (pongo los nombres de categoría «documental» y «entrevistas» como ejemplo, pero ahí se debe poner la que corresponda a cada sitio, claro). Luego definimos el número de post a mostrar por categoría y, finalmente, recorremos el loop.

  1. <?php // array categorías
  2. $array_categorias = array(
  3. "Documentales" => "4",
  4. "Entrevistas" => "5",
  5. );
  6. // Número de items a mostrar por categoría
  7. $numero_de_post = 3;
  8. // Recorremos la matriz
  9. foreach ($array_categorias as $categoria => $numero_categoria) {
  10. // Sacamos el título de la categoría para mostrarlo como titular
  11. ?>
  12. <h3><?php echo $categoria; ?>  </h3>
  13. <!-- loop de los vídeos de cada categoría -->
  14. <?php 
  15. $query_videos = new WP_Query( 'cat='.$numero_categoria.'&posts_per_page='.$numero_de_post);
  16. while ($query_videos->have_posts()) : $query_videos->the_post(); ?>
  17. // Todo el tinglado de cada post
  18. endwhile;
  19. wp_reset_query();
  20. wp_reset_postdata();
  21. ?>

El problema de hacerlo así es que generamos un montón de consultas contra la base de datos. Si una web tiene por ejemplo 7 categorías, de cada una se muestran 3 entradas con imágenes, las cuales necesitan otra query más, significa que cada vez que se carga la portada se lanzan 21 consultas, a las que habría que añadir otras que envían los widgets del sidebar y vainas diversas... y si el sitio tiene miles de visitas diarias puede suponer una sobrecarga para el servidor considerable.

Una posibilidad para solucionarlo es instalar algún plugin que genere una caché, como WP Super Cache de donncha y automattic. Habría otras, como preparar nuestra propia pseudo-caché, pero sobrepasan el nivel que quiero mantener en esta serie así que ya lo veremos otro día.

En la próxima entrada de esta serie retomamos el tema que estamos preparando...

|| Tags: ,

valoración de los lectores sobre WP desde cero (12): 4 trucos útiles para el loop

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 4.3 sobre 5 (6 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!

2 respuestas a “WP desde cero (12): 4 trucos útiles para el loop

  1. Genial el aporte. Ahora me hago
    una pregunta: como hacer para
    disminuir
    las peticiones al servidor?
    es decir; hacer la menor cantidad
    de consultas a la base de datos.

  2. marcos el dijo:

    Hola Edgard, hay varias maneras. La más sencilla es instalar el plugin WP super caché.

    Si ya te animas con el código, otra forma es almacenar el resultado -es decir, el código HTML resultante- en la base de datos. Además, del campo del resultado HTML, se pone otro con un timestamp. Cuando se carga la página, se calcula si han pasado 10 minutos desde el último timestamp. Si no ha sido así, se saca el resultado grabado; de lo contrario, se vuelve a hacer la llamada grande y se guarda.

    Y otra forma más es usando la transients API, que explica Juan aquí:

    http://www.emenia.es/transients-api-cache-wordpress/

    De todas maneras, tengo una entrada pendiente sobre este tema. A ver si termino con un alud de curro que me entró estas semanas atrás y ya retomo el ritmo del blog.

    Abrazos.