¿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 una respuesta