Introducir las clases par e impar en las entradas
La mayoría de los temas de WordPress solo mantienen una clase para las entradas, y cuando estas se muestran son todas iguales, pero puede resultar interesante que queramos identificarlas por pares o impares y de ese modo poder mostrarlas de forma diferente, como por ejemplo con un color diferente de fondo.
Para conseguir esto lo primero que tenemos que hacer es ir al archivo donde se muestran todas las entradas, generalmente el index.php y comprobar si la caja que contiene el artículo dentro del bucle contiene la función post_class(), de no ser de este modo debemos de introducirla nosotros:
<article <?php post_class($class);?>>
Una vez que tenemos esto hecho, debemos de irnos a nuestro archivo functions.php o si tenemos nuestro plugin específico para el sitio hacerlo ahí e introducir el siguiente código:
function oddeven_post_class ( $classes ) { global $current_class; $classes[] = $current_class; $current_class = ($current_class == 'odd') ? 'even' : 'odd'; return $classes; } add_filter ( 'post_class' , 'oddeven_post_class' ); global $current_class; $current_class = 'odd';
El cual se encarga de ir introduciendo el tipo de clase que corresponde, ya sea par o impar.
De este modo ya podemos ir añadiendo los estilos que queramos a la clase para obtener los resultados deseados.
Estos estilos los podemos poner directamente en el archivo style.css del tema, cosa que no recomiendo debido a que si actualizamos o modificamos el tema perderemos nuestros estilos personales, o bien utilizar un plugin como Simple Custom CSS (que es el que más me gusta a mi personalmente por su simplicidad) y hacer algo tan simple cómo darle un color de background:
.even { background:#e0e7ee; } .odd { background:#e3e3ea; }
De esta forma ya tendremos identificados nuestras entradas por pares e impares ofreciéndonos un resultado similar a este:
De esta forma con este simple tip, podemos diferenciar unos contenidos de otros, dar visibilidad a los artículos, ofrecer contrastes…
Si te ha gustado y te ha servido, coméntalo y compártelo en las redes sociales…
There are 2 Comments.