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

¿Desea agregar clases impares y pares a las publicaciones en su tema de WordPress? Agregar una clase par e impar te permite aplicar un estilo diferente a todas las demás publicaciones. En este artículo, le mostraremos cómo agregar clases impares / pares a su publicación en temas de WordPress.

Por qué agregar clases impares / pares a tus 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. Parece estéticamente agradable y ayuda a los usuarios a escanear rápidamente páginas con gran cantidad de contenido. Es particularmente ú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 tus publicaciones en el tema de WordPress.

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

WordPress genera clases de 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, el cual es usado por los desarrolladores de temas para agregar clases al artículo publicado. 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 puedes conectar tus propias funciones a él. Esto es exactamente lo que estaremos haciendo aquí..

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

 function oddeven_post_class ($ classes) global $ current_class; $ classes [] = $ current_class; $ current_class = ($ current_class == 'odd')? 'incluso': 'impar'; devuelve $ clases;  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 a la par, y así sucesivamente.

Puede encontrar las clases pares e impares en el código fuente de su sitio. Simplemente lleve el mouse a un título de la 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 estilizarlos usando CSS. Puede agregar su CSS personalizado a la hoja de estilos de su hijo o mediante el uso del complemento CSS personalizado simple..

Aquí hay una muestra de CSS que puede usar como punto de partida:

 .incluso background: # f0f8ff;  .odd fondo: # f4f4fb;  

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

Si no sabes cómo usar CSS, entonces puedes revisar CSS Hero. Te permite agregar CSS a cualquier parte de tu sitio de WordPress sin escribir ningún código.

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

Si le ha gustado este artículo, suscríbase a nuestros tutoriales en video del Canal de YouTube para WordPress. También puedes encontrarnos en Twitter y Facebook..