AprenderWP

Sitio especializado en Wordpress para principiantes

  • Principiantes
  • Tutoriales
  • Plugins
  • Temas
  • Blog
    • Novedades
    • Showcase
    • Opiniones
AprenderWP » Temas » Cómo añadir clases pares e impares a tu mensaje en temas de WordPress

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 una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Sobre mi

Mi nombre es Joaquin y llevo 12 años creando sitios web en wordpress. En este blog comparto todos mis conocimientos.

Necesito ayuda con ...


Empezar un
Blog

Optimizar
Wordpress

Seguridad
Wordpress

SEO
Wordpress

Errores
Worpdress

Crear una
Tienda Online
Política de Privacidad
Política de Cookies
Aviso Legal

Copyright © 2022 · AprenderWP