Cómo agregar una clase par / impar a su publicación en temas de WordPress

¿Quieres agregar clases pares e impares a las publicaciones en tu tema de WordPress? Agregar una clase par e impar te permite diseñar cada publicación de manera diferente. En este artículo, le mostraremos cómo agregar clases pares / impares a su publicación en temas de WordPress.

¿Por qué agregar clases pares / impares a sus publicaciones en temas de WordPress?

Muchos temas de WordPress usan una clase antigua o incluso una para los comentarios de WordPress. Ayude a los usuarios a ver dónde termina un comentario y comienza el siguiente.

Del mismo modo, puede utilizar esta técnica para sus publicaciones de WordPress. Tiene un aspecto estéticamente agradable y ayuda a los usuarios a escanear rápidamente páginas con mucho contenido. Es especialmente útil para la página de inicio de revistas o sitios web de noticias.

Dicho esto, veamos cómo agregar una clase par e impar a sus publicaciones en el tema de WordPress.

Agregar clases pares / impares a publicaciones en el tema de WordPress

WordPress genera clases CSS predefinidas y las agrega sobre la marcha a diferentes elementos de su sitio web. Estas clases de CSS ayudan a los desarrolladores de plugins y temas a agregar sus propios estilos para diferentes elementos.

WordPress también incluye una función llamada post_class, que utilizan los desarrolladores de temas para agregar clases al elemento de publicación. Consulte nuestra guía sobre cómo personalizar cada publicación de WordPress de manera diferente.

los post_class también es un filtro, lo que significa que puede vincularle sus funciones. Esto es exactamente lo que haremos aquí.

Simplemente agregue este código al archivo functions.php de su tema o un plugin específico del sitio.

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";

Esta función simplemente agrega impar a la primera publicación, luego par y así sucesivamente.

Puede encontrar las clases pares e impares en el código fuente de su sitio. Simplemente coloque el cursor sobre el título de una publicación y luego haga clic con el botón derecho para seleccionar Inspeccionar o Inspeccionar elemento.

Ahora que ha agregado clases pares e impares a sus publicaciones. El siguiente paso es diseñarlos usando CSS. Puede agregar su propio CSS personalizado a la hoja de estilo del tema secundario o utilizando el plugin CSS personalizado simple.

Aquí tienes un ejemplo de CSS que puedes usar como punto de partida:

.even {
background:#f0f8ff;  
} 
.odd {
 background:#f4f4fb;
}

Así es como se veía en nuestro sitio de prueba:

Si no sabe cómo usar CSS, le recomendamos que consulte CSS Hero. Le permite agregar CSS a cualquier parte de su sitio de WordPress sin escribir ningún código.

Esperamos que este artículo le haya ayudado a aprender cómo agregar clases pares / impares a sus publicaciones en temas de WordPress. También puede consultar nuestra guía sobre cómo diseñar su diseño de comentarios de WordPress.