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.
