¿Desea agregar clases pares e impares a las publicaciones en su 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 para los comentarios de WordPress. Ayuda a los usuarios a visualizar dónde termina un comentario y comienza el siguiente.
Del mismo modo, puede utilizar esta técnica para sus publicaciones de WordPress. Se ve estéticamente agradable y ayuda a los usuarios a escanear rápidamente páginas con mucho contenido. Es particularmente útil para la página de inicio de revistas o sitios web de noticias.
Habiendo dicho eso, veamos cómo agregar una clase impar y par a sus publicaciones en el tema de WordPress.
Agregar clase impar / par a las publicaciones en el tema de WordPress
WordPress genera clases CSS predeterminadas y las agrega a diferentes elementos en su sitio web sobre la marcha. Estas clases de CSS ayudan a los desarrolladores de complementos y temas a agregar sus propios estilos para diferentes elementos.
WordPress también viene con una función llamada post_class
, que utilizan los desarrolladores de temas para agregar clases al elemento de publicación. Vea nuestra guía sobre cómo diseñar cada publicación de WordPress de manera diferente.
los post_class
también es un filtro, lo que significa que puede conectarle sus propias funciones. Esto es exactamente lo que haremos aquí.
Simplemente agregue este código al archivo functions.php de su tema o un complemento 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 lleve el mouse al título de una publicación y luego haga clic 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 CSS personalizado a la hoja de estilo del tema de su hijo, o mediante el complemento Simple Custom CSS.
Aquí hay un CSS de muestra que puede 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, entonces 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. Es posible que también desee ver nuestra guía sobre cómo diseñar su diseño de comentarios de WordPress.