Cómo agregar clases impar/par a tus publicaciones en temas de WordPress

¿Quieres añadir un toque de interés visual a las entradas de tu blog de WordPress? Añadir clases impares y pares puede hacer que tu diseño sea más atractivo, rompiendo largas listas de entradas con sutiles cambios de diseño que llaman la atención.

Con frecuencia recibimos preguntas de nuestros lectores sobre cómo aplicar esta técnica. Si bien muchos temas de WordPress no ofrecen una opción integrada para clases de entradas impares y pares, encontramos una forma rápida y sencilla de añadirlas tú mismo utilizando el plugin gratuito WPCode.

En este artículo, te mostraremos cómo añadir una clase impar/par a tus entradas en temas de WordPress.

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

Muchos temas de WordPress utilizan una clase impar o par para los comentarios de WordPress. Ayuda a los usuarios a visualizar dónde termina un comentario y dónde comienza el siguiente.

De manera similar, puedes usar esta técnica para tus entradas 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 sitios web de revistas o noticias.

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

Añadir clases impares/pares a las entradas en el tema de WordPress

WordPress genera clases CSS predeterminadas y las agrega sobre la marcha a diferentes elementos de tu sitio web. Estas clases CSS ayudan a los desarrolladores de plugins 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 la publicación. Consulta nuestra guía sobre cómo estilizar cada publicación de WordPress de manera diferente.

La post_class es también un filtro, lo que significa que puedes conectar tus propias funciones a él. Esto es exactamente lo que haremos aquí.

Simplemente agrega este código al archivo functions.php de tu tema, en un plugin específico del sitio, o en un plugin de fragmentos de código como WPCode.

function oddeven_post_class ( $classes ) {
   global $current_class;
   $classes[] = $current_class;
   $current_class = ($current_class == 'odd') ? 'even' : 'odd';
   return $classes;
}
add_filter ( 'post_class' , 'oddeven_post_class' );
global $current_class;
$current_class = 'odd';

Recomendamos usar el plugin WPCode para agregar este código. Es la forma más segura y sencilla de administrar código personalizado en tu sitio sin tener que editar directamente el archivo functions.php de tu tema.

Usamos WPCode para manejar todos los fragmentos de código personalizados en nuestra cartera de sitios web. Mantiene todo organizado y evita que el código se borre durante las actualizaciones del tema.

Para obtener más información sobre este complemento de fragmentos de código, consulta nuestra reseña completa de WPCode.

Para empezar, necesitas instalar y activar el complemento gratuito WPCode. Para obtener instrucciones, consulta esta guía sobre cómo instalar un complemento de WordPress.

Tras la activación, ve a la página Fragmentos de código » + Añadir fragmento desde el panel de WordPress.

Luego, haz clic en el botón '+ Agregar fragmento personalizado' debajo de la opción 'Agregar tu código personalizado (Nuevo fragmento)'.

A continuación, debes seleccionar un tipo de código de la lista de opciones que aparecen en la pantalla.

Para este tutorial, elige ‘Fragmento PHP’ como tipo de código.

Ahora serás dirigido a la página Crear fragmento personalizado.

Desde aquí, añade un título para tu fragmento de código, que puede ser cualquier cosa para ayudarte a recordar para qué es el código.

Después de eso, pega el código de arriba en el cuadro 'Vista previa del código'.

Una vez hecho esto, simplemente cambia el interruptor de ‘Inactivo’ a ‘Activo’ y haz clic en el botón ‘Guardar fragmento’.

Esta función simplemente agrega impar a la primera publicación, luego par, y así sucesivamente.

Puedes encontrar las clases impar y par en el código fuente de tu sitio. Simplemente lleva el mouse a un título de publicación y luego haz clic derecho para seleccionar Inspeccionar o Inspeccionar Elemento.

Ahora que has agregado las clases par e impar a tus publicaciones. El siguiente paso es darles estilo usando CSS. Puedes agregar tu CSS personalizado a la hoja de estilos de tu tema hijo, al personalizador de temas, o usando el plugin WPCode.

Aquí tienes un CSS de ejemplo que puedes usar como punto de partida:

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

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

Si no sabes cómo usar CSS, quizás quieras consultar nuestra guía sobre cómo agregar fácilmente CSS personalizado a tu sitio de WordPress.

Recursos Adicionales para Personalizar Páginas y Publicaciones de WordPress

Esperamos que este artículo te haya ayudado a aprender cómo agregar la clase impar/par a tus publicaciones en temas de WordPress. También es posible que desees consultar estos otros artículos para personalizar aún más el diseño de tu sitio:

• Cómo agregar estados de contenido personalizado para publicaciones de blog en WordPress
• Cómo cambiar el número de publicaciones que se muestran en la página de tu blog de WordPress
• Cómo mostrar u ocultar widgets en páginas específicas de WordPress
• 15 de los mejores constructores de páginas de WordPress de arrastrar y soltar comparados
• Cómo agregar extractos a tus páginas en WordPress (Paso a paso)

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.