Colores diferentes para cada artículo del loop

[Juan Anaya]

Buenas tardes,
a ver si se ocurre a vosotros algo porque yo ya no se donde mirar 😉

Tengo un loop en el index que me muestra las tres últimas noticias. Cuando hice el boceto a cada una de esas noticias le di un color de fondo diferente.
Como «ñapa» le he colocado una clase cuando creo la noticia, la penúltima «segunda» y antepenúltima «tercera».
El caso que tengo que cambiarlo cada vez que subo una. Yo había pensado igual con javascript que cambiase automáticamente según su orden el color, pero no se como hacerlo. De hecho creo que así no se puede.

Una ayudita por el amor de dio jajaja

[OsKar142]

Yo creo que lo haría de la siguiente forma.

Con pseudo-clases crearía 3 clases distintas correspondiente a cada uno de los elementos.

Ej. CSS

ul li:nth-child(1){
background-color: red;
}
ul li:nth-child(2){
background-color: green;
}
ul li:nth-child(3){
background-color: blue;
}

El PHP,

...
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
...

Esto hace que el elemento 1 sea rojo, el elemento 2 sea verde y el elemento 3 sea azul. Aunque está «anticuado», el manual de CSS avanzado de librosweb.es está bastante bien (http://librosweb.es/libro/css_avanzado/capitulo_3/selectores_de_css_3.html). Te dejo un ejemplo en http://jsfiddle.net/jn2uykpx/.

Espero que te sirva 🙂

Un saludo.

[Juan Anaya]

Hola Oskar, gracias por contestar.

Si, es lo primero que he hecho, crear estilos para esas subclases.
El problema es que necesitaba que automaticamente añadiera esas subclases según el orden en el que aparecen en el loop.

Al final he colocado un contador que añade una posición diferente en cada vuelta del loop relacionada con cada una de sus subclases.

Tal que así:

<?php query_posts(array( 'showposts'=> 8, 'cat' => 3) ); ?>
				<?php while ( have_posts() ) : the_post(); ++$contador;
                if ($contador == 2) $claseResaltado = " segundo";
                if ($contador == 3) $claseResaltado = " tercero";
				 if ($contador == 4) $claseResaltado = " cuarto";
                if ($contador == 5) $claseResaltado = " cuarto";
                if ($contador == 6) $claseResaltado = " tercero";
				if ($contador == 7) $claseResaltado = " segundo";
                ?>

[galussothemes]

Hola Juan,

Puedes utilizar $wp_query->current_post, más sencillo y elegante. Me publicito: Saber cuál es el post actual que se está mostrando durante el bucle de WordPress

Espero que te ayude. Saludos.