¿Desea agregar clases pares e impares a los artículos sobre el tema de su blog de WordPress ? Agregar una clase le permitirá mostrar un estilo particular para cada artículo.

En este tutorial, le mostraremos cómo mostrar clases pares o impares en WordPress.

para mostrar clases impares recuperadas de WordPress

¿Por qué agregar clases? pares "O" impar » sobre el tema de su blog de WordPress ?

Muchos Temas de WordPress use una clase antigua o la misma para los comentarios de WordPress. Permite a los usuarios ver dónde termina un comentario y comienza otro.

Asimismo, puede utilizar esta técnica para sus artículos. Parece estéticamente agradable para permitir a los usuarios escanear rápidamente páginas grandes. Esto es particularmente útil para la página de inicio de sitios de periódicos o revistas.

Dicho esto, veremos cómo agregar una clase en los artículos de tu blog de WordPress.

Cómo agregar una clase par / impar en WordPress

WordPress genera clases CSS predeterminadas y las agrega a diferentes artículos en su sitio web sobre la marcha. Estas clases de CSS ayudan a los desarrolladores de complementos y temas a agregar sus propios estilos a cada artículo diferente.

WordPress también ofrece una función llamada " Clase post El cual es utilizado por los desarrolladores de temas para agregar clases a los artículos.

La funcion " Clase post También es un filtro, lo que significa que puede manipular eso con. Eso es exactamente lo que haremos aquí.

Simplemente agregue este código a su archivo functions.php. tema de WordPress.

oddeven_post_class función (clase $) {$ current_class mundial; Clases $ [] = $ current_class; Current_class $ = ($ current_class == 'extraña')? 'Incluso' 'extraño'; devolver $ clases; } Add_filter ( 'post_class', 'oddeven_post_class'); $ Current_class mundial; $ Current_class = 'impar';

Esta función se limita a añadir una clase para igualar y elementos extraños.

Encontrará clases pares e impares en el código fuente de su sitio. Simplemente lleve el mouse al título de un artículo, luego haga clic derecho para Inspeccionar el artículo.

previsualizar incluso el artículo de WordPress

Ahora que ha agregado las clases pares e impares a sus artículos. El siguiente paso es darles un estilo único con CSS. Puede agregar su código CSS personalizado en el tema de su hijo o usando un simple complemento CSS.

Aquí hay un ejemplo de código CSS que puede usar como punto de partida:

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

Así es como puede ser el resultado:

artículos de WordPress de colores alternativos

Necesitará un poco de práctica para obtener buenos resultados, pero para esto necesitará dominar CSS o simplemente usar una herramienta como CSS héroe.

Es tan simple como eso. Espero que este tutorial te sea de gran ayuda. No dude en hacernos preguntas o compartir este tutorial con sus amigos en sus redes sociales favoritas.