Cómo añadir clases pares e impares a tu mensaje en temas de WordPress

¿Quieres añadir clases pares e impares a los mensajes en tu tema de WordPress? Agregar una clase impar y pareja te permite cambiar el estilo de cada uno de los mensajes. En este artículo, le mostraremos cómo añadir clases impares/iguales a su mensaje en temas de WordPress.

¿Por qué añadir clases impares o pares a tus mensajes en temas de WordPress?

Muchos temas de WordPress utilizan una clase antigua o incluso una clase para los comentarios de WordPress. Ayuda a los usuarios a visualizar dónde termina un comentario y dónde 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.

Dicho esto, veamos cómo añadir una clase impar y par a tus mensajes en el tema de WordPress.

Adición de clases pares e impares a los mensajes en el tema de WordPress

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

WordPress también viene con una función llamada post_class, que es utilizada por los desarrolladores de temas para añadir clases al elemento de post. Vea nuestra guía sobre cómo estilizar cada post de WordPress de forma diferente.

La post_clase es también un filtro, lo que significa que puede conectar sus propias funciones a ella. Esto es exactamente lo que haremos aquí.

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

123456789functionoddeven_post_class ( $classes) { global$current_class; $classes[] = $current_class; $current_class= ($current_class===odd) ? par»: «impar»; devolver clases$; añadir filtro («postclass», «oddeven_post_class»); global$current_class; $current_class= odd;

Esta función simplemente añade impar al primer mensaje, luego par, y así sucesivamente.

Puedes encontrar las clases impares y pares en el código fuente de tu sitio. Simplemente lleva el ratón al título de un artículo y luego haz clic con el botón derecho para seleccionar Inspeccionar o Inspeccionar Elemento.

Ahora que has añadido clases pares e impares a tus mensajes. El siguiente paso es estilizarlos usando CSS. Puede añadir su CSS personalizado a la hoja de estilos del tema hijo o utilizando el plugin Simple Custom CSS.

Aquí hay un ejemplo de CSS que puede utilizar como punto de partida:

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

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

Si no sabes cómo usar CSS, es posible que quieras ver CSS Hero. Le permite agregar CSS a cualquier parte de su sitio WordPress sin necesidad de escribir ningún código.

Esperamos que este artículo le haya ayudado a aprender a añadir clases impares o pares a sus mensajes en temas de WordPress. También puedes ver nuestra guía sobre cómo estilizar el diseño de tus comentarios de WordPress.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.

Deja un comentario