Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo añadir impares / pares de clase a su entrada en temas de WordPress

¿Quieres añadir un toque de interés visual a las entradas de tu blog de WordPress? Añadir clases pares e impares puede ayudarte a conseguir un diseño único y atractivo al dar un estilo diferente a cada entrada.

Con frecuencia recibimos preguntas de nuestros lectores acerca de cómo aplicar esta técnica. Aunque muchos temas de WordPress no ofrecen una opción integrada para las clases de entradas pares e impares, añadirlas es un proceso relativamente sencillo.

En este artículo, le mostraremos cómo añadir la clase par/impar a sus entradas en los temas de WordPress.

Adding Odd/Even class to your posts in WordPress themes

¿Por qué añadir la clase par/impar a tus entradas en los temas de WordPress?

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

Del mismo modo, puede utilizar esta técnica para sus entradas de WordPress. Resulta estéticamente agradable y ayuda a los usuarios a explorar 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, vamos a ver cómo añadir una clase par e impar a sus entradas en el tema de WordPress.

Añadir clase par/impar a entradas en un tema de WordPress

WordPress genera clases CSS por defecto y las añade a diferentes elementos de su sitio web sobre la marcha. Estas clases CSS ayudan a los desarrolladores de plugins y temas a añadir sus propios estilos a los distintos 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 / artículo de la entrada. Consulte nuestra guía sobre cómo dar un estilo diferente a cada entrada de WordPress.

El post_class es también un filtro, lo que significa que usted puede gancho de sus propias funciones a la misma. Esto es exactamente lo que vamos a hacer aquí.

Simplemente añada este código al archivo functions. php de su tema, en un plugin específico del sitio o en un plugin de fragmentos de código.

1
2
3
4
5
6
7
8
9
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 añadir este código usando el plugin WPCode. Es el mejor plugin de fragmentos de código que hace que sea seguro y fácil de añadir código personalizado en WordPress.

WPCode

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

Una vez activado, vaya a la página Fragmentos de código ” + Añadir fragmento desde el escritorio de WordPress.

A continuación, haga clic en el botón “+ Añadir fragmento de código personalizado” situado debajo de la opción “Añadir su código personalizado (nuevo fragmento de código)”.

Adding Custom Code in WPCode

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

Para este tutorial, elija ‘PHP Snippet’ como tipo de código.

Select PHP Snippet as the code type

Ahora será dirigido a la página Crear fragmento de código personalizado.

A partir de aquí, añada un título para su fragmento de código, que puede ser cualquier cosa que le ayude a recordar para qué sirve el código.

A continuación, pegue el código anterior en el cuadro “Vista previa del código”.

Paste the code to add odd/even class to your posts

Una vez hecho esto, basta con cambiar el conmutador de “Inactivo” a “Activo” y hacer clic en el botón “Guardar fragmento de código”.

Activate and save your custom code snippet

Esta función simplemente añade impares a la primera entrada, luego pares, y así sucesivamente.

Puede encontrar las clases pares e impares en el código fuente de su sitio. Basta con llevar el ratón al título de una entrada y hacer clic con el botón derecho para seleccionar Inspeccionar o Inspeccionar elemento.

Odd and Even classes in source code

Ahora que has añadido clases pares e impares a tus entradas. El siguiente paso es darles estilo usando CSS. Puedes añadir tu CSS personalizado a la hoja de estilos de tu tema hijo, al personalizador de temas o usando el plugin WPCode.

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

1
2
3
4
5
6
.even {
background:#f0f8ff
}
.odd {
 background:#f4f4fb;
}

Así se ve en nuestro sitio de prueba:

Posts using alternate background colors with even/odd css classes in WordPress

Si usted no sabe cómo utilizar CSS, entonces es posible que desee comprobar nuestra guía sobre cómo añadir fácilmente CSS personalizado a su sitio de WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo añadir la clase par/impar a tus entradas en los temas de WordPress. Puede que también quieras ver nuestra guía práctica sobre cómo dar estilo a la estructura / disposición / diseño / plantilla de tus comentarios en WordPress y nuestra selección de los mejores maquetadores de páginas para WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

16 comentariosLeave a Reply

  1. Sarmad Gardezi

    I want to use it with CPT then how i can use it ?

    • WPBeginner Support

      It should automatically affect custom post types :)

      Admin

  2. Vera

    Hello,
    I was trying to make this work on my test site, where I work with Elementor and Astra. For some reason, once I add the code – everything colors with the “odd” color, and I don’t understand why.
    Can you help me sort it out, please?
    Vera

    • WPBeginner Support

      For that question, you would want to check with Elementor to ensure their page builder is not overriding the function and they should be able to assist :)

      Admin

  3. Oliur

    My Blog Name WayTrick. It a Blogger Blog. Now I want to my blog Tansfer to wordpress. How do it?

  4. kaluan

    This seems not working in Genesis framework? Any additional code needed to add?

  5. onkar

    how to add odd even class in posts for particular page

  6. Bucur

    Ok good function, but css style?

    . post {
    / / Rest of the css
    }

    .odd { } ???

  7. Simon

    Thanks for this. Just what I needed.

  8. Samuel

    How could I take this a step further and target a specific post category?

    I have a custom post type – testimonial, and I only want odd/even styling in that section.

    Thanks!

  9. Eric

    This is by far the easiest method of creating odd and even posts for wordpress!! Thanks so much for sharing!

  10. Christine

    As, sadly, css3 selectors are not well supported by all browsers…

    I just tried your code for a new twenty eleven child theme i’m customizing, it works so fine,

    Thanks a Lot for sharing this ! !

    • wpbeginner

       @Daniele Zamboni These are CSS classes that you can add for styling purposes.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.