El Super Loop – Estilos distintos por tipo de entrada

guru wordpress

El otro día me preguntaba un amigo que como podía aprovechar los tipos de post personalizados para aplicar distintos estilos según el tipo de entrada, sin tener muy claro qué método usar, si los custom post types recién aparecidos en WordPress, algún plugin o algo de código.

Estuve buscando algo que le sirviera y le di varias opciones – plugins incluidos – pero entre todo lo que encontré me gustó especialmente una serie de trucos que comparto a continuación. Creo que es una pieza de museo de código para WordPress y lo merece, para convertirse en un auténtico gurú de WordPress.

Cuando abres tu archivo index.php, u otro archivo con un loop, normalmente verás algún div con un post-id, pero lo que vamos a hacer es añadir una nueva variable post_class al mismo como se muestra en este ejemplo:

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Añadiendo esta función al div cada una de las entradas obtendrá una clase CSS específica que te permitirá modificar el aspecto de tus entradas en WordPress a través de CSS. Las siguientes clases se añaden por defecto:

  • .post-id
  • .post
  • .attachment
  • .sticky
  • .hentry (hAtom microformat pages)
  • .category-ID
  • .category-name
  • .tag-name

Un ejemplo de salida sería algo así:

Así que si abres tu archivo style.css y añades la clase .category-dancing podras conseguir que las entradas de la categoría dancing tengan un aspecto diferente, por ejemplo:

.category-dancing{background: #97c3e1; border: 1px solid #84aac4;}

Esto hará que las entradas de la categoría dancing tengan fondo azul y un borde azul oscuro. Puedes ir más allá añadiendo una clase diferente para los enlaces de la .category-dancing, lo que quieras. Puedes usar la misma técnica para conseguir que las entradas de una etiqueta (tag) específica tengan un aspecto diferente.

Pero para alguien que quiera personalizar profundamente el aspecto de su sitio puede que necesite controles adicionales a la hora de introducir clases. Bien, si quieres puedes especificar las clases de este modo:

<?php post_class('class-1 class-2'); ?>

Pero ¿como funciona esto en una plataforma dinámica como es WordPress? Veamos algunos ejemplos de como puedes añadir claes y hacer que tus entradas se vean diferentes.

Aplicar estilo a las entradas basándonos en el autor

Seguro que más de una vez ves blogs en los que los comentarios del autor se ven de manera diferente. Pues bien, seguro que en los blogs multi-autor es una buena idea también dar estilos distintos a las entradas según el autor que las cree. Para ello, en este ejemplo, daremos a cada entrada un estilo distinto, basándonos en el nombre del autor. Para ello, en tu fichero index.php (u otros; archive.php, etc) obtendremos el valor del nombre del autor añadiendo este código ANTES del loop:

<?php $author = get_the_author_meta('display_name'); ?>

El código anterior obtiene la variable display_name del perfil de usuario de cada autor, y se le asigna el valor con la variable $author. Una vez hayamos creado una clase dinámica podemos añadirla en nuestro código post_class de este modo:

<?php post_class('class-1 class-2 ' . $author); ?>

Nota: No tienes porque seguir la convención class-1 y class-2. eso es solo si quieres añadir clases estáticas. O sea, que puedes mostrar la salida de este modo:

<div id="post-4564" class="post post-4564 category-48 category-dancing logged-in class-1 class-2 Pedro">

Date cuenta que Pedro se añade en la salida final. El nombre será diferente en cada entrada basada en el display_name de autor. Ahora ya podemos dar estilo a cada clase en tu CSS así:

.Pedro{border: 1px solid #000;}
.Luis{border: 1px solid #d88b3d;}
.Fernando {border: 1px solid #4781a8;}

Una vez hecho esto cada entrada en el loop de estos autores tendrá un estilo diferente. Pudes aplicar la técnica anterior para dar estilo a otros autores de tu sitio.

Aplicar estilo a las entradas basándonos en la popularidad basada en el conteo de comentarios

¿A que también has visto sitios con widgets de entradas populares, la mayoría de las veces basados en el conteo de comentarios. Pues bien, en este ejemplo vamos a ver como aplicar distintos estilos usando el conteo de comentarios. Lo primero que necesitamos es obtener el conteo de comentarios y asociarle una clase. Para obtener el conteo de comentarios tenemos que pegar el siguiente código DENTRO del loop:

<?php
	$postid = get_the_ID();
	$total_comment_count = wp_count_comments($postid);
		$my_comment_count = $total_comment_count->approved;
	if ($my_comment_count <10) {
		$my_comment_count = 'nuevo';
	} elseif ($my_comment_count >= 10 && $my_comment_count <20) {
		$my_comment_count = 'emergente';
	} elseif ($my_comment_count >= 20) {
		$my_comment_count = 'popular';
	}
?>

En el código anterior hemos añadido clases basándonos en una escala. Si la entrada tiene menos de 10 comentarios se añade la clase «nuevo». Si la entrada tiene entre 10 y 20 comentarios le añadimos la clase «emergente», y si la entrada tiene más de 20 comentarios entonces se le añade la clase «popular». Puedes cambiar esta escala dependiendo del volumen de comentarios de tu sitio.

Así que ahora tu código post_class se parecería a esto:

<?php post_class('class-1 class-2 ' . $my_comment_count); ?>

A continuación creamos las clases siguientes en el fichero style.css:

.nuevo {border: 1px solid #FFFF00;}
.emergente {border: 1px dashed #FF9933;}
.popular {border: 1px dashed #CC0000;}

Fíjate que en este ejemplo solo estamos cambiando el color del borde, pero puedes ir todo lo lejos que quieras, añadiendo imágenes de fondo, cambiando tipografías, lo que quieras.

¿Aún quieres más control sobre las clases CSS? Pues nada, pasemos a un nivel superior aplicando clases CSS mediante campos personalizados.

Aplicar estilo a las entradas basándonos en campos personalizados

Aquí entramos en material de combate de primera calidad, añadiendo clases específicas mediante los campos personalizados. De este modo, por ejemplo, si es el aniversario de tu blog y quieres que la entrada de aniversario sea distinta, puedes crear un campo personalizado y darle el nombre ‘post-class’ y luego añadirle el valor ‘aniversario’. Una vez añadas este campo personalizado y guardes la entrada este valor se almacena en tu base de datos. A partir de este momento podemos reclamarlo desde el loop usando el siguiente código:

<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>

Asegúrate de pegar el código anterior DENTRO del loop. Ahora añadiremos la variable $custom_values a la función post_class.

<?php post_class('class-1 class-2 ' . $custom_variable); ?>

Una vez hecho esto ya podemos añadir a nuestro archivo style.css una clase como esta:

.aniversario{Tu Estilo va aquí}

Esto es, de lejos, el mayor control que puedes obtener de la función post_class en lo que se refiere a estilos CSS. Pero, a veces, puedes que quieras incluso más control. Las clases CSS te permiten cambiar el fondo y otros elementos de estilo pero no puedes cambiar toda la estructura de este modo. Así que echemos un vistazo a algo un poquito más avanzado, que podríamos llamar EL SUPER LOOP.

<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count == 1) : ?>
 Añade aquí tus divs personalizados de entrada para la primera entrada. 
<?php elseif ($count == 2) : ?>      
Añade aquí tus divs personalizados de entrada para la segunda entrada
<?php elseif ($count == 3) : ?> 
 Añade aquí tus divs personalizados de entrada para la tercera entrada      
<?php elseif ($count == 4) : ?>  
 Añade aquí tus divs personalizados de entrada para la cuarta entrada     
<?php else : ?>
 Añade aquí tus divs personalizados de entrada para el resto de entradas
  <?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>

Lo que hemos hecho en el código anterior es crear un loop que te permite aplicar distintos estilos basándonos en el número de entrada en portada, en su orden, algo que hemos aplicado en otras ocasiones, por ejemplo, para mostrar publicidad solo en ciertas entradas de portada.

Esto también es muy útil cuando quieres que las tres primeras entradas se vean distintas del resto. Por ejemplo, tus tres primeras entradas pueden ser entradas a una columna y el resto serán más pequeñas y a dos columnas. Puedes hacer casi todo con el super loop. Puedes añadir tus propias queries y mucho, mucho más. Si eres desarrollador es un buen punto de partida en el que solo tu pones los límites.

Referencias:

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(2 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

11 comentarios en “El Super Loop – Estilos distintos por tipo de entrada”

  1. estimados, buenas, es posible incluir publicidad en el medio del loop, por ejemplo, incluir un banner entre la entrada 3 y la 4 por ejemplo?

  2. Te imaginaba con menos pelo Fernando XD! interesante hack, habrá que probarlo, la idea es cambiar el css para imágenes en un post según la categoría, vamos a ver que tal se me da,

    Un saludo Fernando!

  3. hola! tengo una pregunta:
    yo tengo un wp con eventos y quiero que cuando pincho, por ejemplo, en la pestaña "musica en directo", las entradas de conciertos de este mes se muestren de otro color. Como podria hacerlo?
    Gracias

  4. Increible! La verdad que la que más me interesa es la última, pero me gustaría que cogiera diferente estilo de divs etc dependiendo de la categoría. ¿Es eso posible?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido