¿Desea agregar clases pares e impares a los artículos en su tema de WordPress? Agregar una clase par e impar le permite diseñar artículos de manera diferente. En este artículo, le mostraremos cómo agregar una clase par / impar a su publicación en temas de WordPress.
¿Por qué agregar una clase par / impar a sus publicaciones en temas de WordPress?
Muchos temas de WordPress usan una clase antigua o incluso una para los comentarios de WordPress. Ayuda a los usuarios a ver el final de un comentario y el comienzo del siguiente. Asimismo, puede utilizar esta técnica para sus publicaciones de WordPress. Se ve bien 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 clases pares e impares a sus publicaciones en el tema de WordPress.
Agregar una clase par / impar a las publicaciones en el tema de WordPress
WordPress genera clases CSS de forma predeterminada y las agrega a diferentes elementos de 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 los desarrolladores de temas utilizan para agregar clases al elemento de publicación. Consulte nuestra guía sobre cómo diseñar cada publicación de WordPress de manera diferente. Post_class también es un filtro, lo que significa que puede conectarle sus propias funciones. Esto es exactamente lo que vamos a hacer aquí. Simplemente agregue este código al archivo functions.php de su tema oa un complemento específico del sitio. function oddeven_post_class ($ clases) {global $ current_class; $ curso[] = $ clase_actual; $ clase_actual = ($ clase_actual == ‘impar’)? ‘incluso raro’; return $ clases; } add_filter (‘post_class’, ‘oddeven_post_class’); global $ current_class; $ current_class = «impar»; Esta función simplemente agrega impar al primer mensaje, luego par, y así sucesivamente. Puede encontrar clases pares e impares en el código fuente de su sitio. Simplemente coloque el cursor sobre el título de un artículo, luego haga clic derecho para seleccionar Inspeccionar o Inspeccionar artículo.
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 usar el complemento CSS personalizado simple. Aquí hay un ejemplo de CSS que puede usar como punto de partida: .even {background: # f0f8ff; } .odd {fondo: # f4f4fb; } Así es como se veía en nuestro sitio de prueba:
Si no sabe cómo usar CSS, puede consultar 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 el diseño de sus comentarios de WordPress. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.
