¿Desea agregar clases Peer y Peer a las publicaciones en su tema de WordPress? Agregar una clase par e impar le permite diseñar cada publicación de manera diferente. En este artículo, le mostraremos cómo agregar una clase par/impar a su publicación en temas de WordPress.
¿Por qué agregar clases pares/impares a tus publicaciones en temas de WordPress?
Muchos temas de WordPress usan una clase antigua o incluso más antigua para los comentarios de WordPress. Ayude a los usuarios a ver dónde termina un comentario y comienza el siguiente.
Del mismo modo, puede utilizar esta técnica para sus publicaciones de WordPress. Tiene una apariencia estéticamente agradable y ayuda a los usuarios a escanear páginas con mucho contenido rápidamente. Es especialmente útil para la página de inicio de revistas o sitios web de noticias.
Dicho esto, veamos cómo agregar una clase par e impar a tus publicaciones en el tema de WordPress.
Agregar clases pares/impares a las publicaciones en el tema de WordPress
WordPress genera clases CSS predefinidas y las agrega sobre la marcha a diferentes elementos de su sitio web. Estas clases de CSS ayudan a los desarrolladores de complementos y temas a agregar sus propios estilos para diferentes elementos.
WordPress también incluye una función llamada post_class, que utilizan los desarrolladores de temas para agregar clases al elemento de publicación. Consulte nuestra guía sobre cómo personalizar cada publicación de WordPress de manera diferente.
El post_class también es un filtro, lo que significa que puede conectarle sus propias funciones. Esto es exactamente lo que vamos a hacer aquí.
Simplemente agregue este código al archivo functions.php de su tema o un complemento específico del sitio.
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";
Esta función simplemente agrega impares a la primera publicación, luego pares, y así sucesivamente.
Puede encontrar las clases pares e impares en el código fuente de su sitio. Simplemente coloque el cursor sobre el título de una publicación y luego haga clic con el botón derecho para seleccionar Inspeccionar o Inspeccionar elemento.
Ahora que ha agregado clases pares e impares a sus publicaciones. El siguiente paso es diseñarlos usando CSS. Puede agregar su propio CSS personalizado a la hoja de estilo de su tema secundario o utilizando el complemento Simple Custom CSS.
Aquí hay un ejemplo de CSS que puede usar como punto de partida:
.even {
background:#f0f8ff;
}
.odd {
background:#f4f4fb;
}
Así es como se veía en nuestro sitio de prueba:
Si no sabe cómo usar CSS, puede consultar CSS Hero. Le permite agregar CSS a cualquier parte de su sitio de WordPress sin escribir ningún código.
Esperamos que este artículo te haya ayudado a aprender cómo agregar clases pares/impares a tus publicaciones en temas de WordPress. También puede consultar nuestra guía sobre cómo aplicar estilo a su diseño de comentarios de WordPress.
Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo Y Facebook.
Cómo agregar una clase impar/par a tu publicación en temas de WordPress
¿Desea agregar clases Peer y Peer a las publicaciones en su tema de WordPress? Agregar una clase par e impar le permite diseñar cada publicación de manera diferente. En este artículo, le mostraremos cómo agregar una clase par/impar a su publicación en temas de WordPress.
¿Por qué agregar clases pares/impares a tus publicaciones en temas de WordPress?
Muchos temas de WordPress usan una clase antigua o incluso más antigua para los comentarios de WordPress. Ayude a los usuarios a ver dónde termina un comentario y comienza el siguiente.
Del mismo modo, puede utilizar esta técnica para sus publicaciones de WordPress. Tiene una apariencia estéticamente agradable y ayuda a los usuarios a escanear páginas con mucho contenido rápidamente. Es especialmente útil para la página de inicio de revistas o sitios web de noticias.
Dicho esto, veamos cómo agregar una clase par e impar a tus publicaciones en el tema de WordPress.
Agregar clases pares/impares a las publicaciones en el tema de WordPress
WordPress genera clases CSS predefinidas y las agrega sobre la marcha a diferentes elementos de su sitio web. Estas clases de CSS ayudan a los desarrolladores de complementos y temas a agregar sus propios estilos para diferentes elementos.
WordPress también incluye una función llamada post_class, que utilizan los desarrolladores de temas para agregar clases al elemento de publicación. Consulte nuestra guía sobre cómo personalizar cada publicación de WordPress de manera diferente.
El post_class también es un filtro, lo que significa que puede conectarle sus propias funciones. Esto es exactamente lo que vamos a hacer aquí.
Simplemente agregue este código al archivo functions.php de su tema o un complemento específico del sitio.
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";
Esta función simplemente agrega impares a la primera publicación, luego pares, y así sucesivamente.
Puede encontrar las clases pares e impares en el código fuente de su sitio. Simplemente coloque el cursor sobre el título de una publicación y luego haga clic con el botón derecho para seleccionar Inspeccionar o Inspeccionar elemento.
Ahora que ha agregado clases pares e impares a sus publicaciones. El siguiente paso es diseñarlos usando CSS. Puede agregar su propio CSS personalizado a la hoja de estilo de su tema secundario o utilizando el complemento Simple Custom CSS.
Aquí hay un ejemplo de CSS que puede usar como punto de partida:
.even {
background:#f0f8ff;
}
.odd {
background:#f4f4fb;
}
Así es como se veía en nuestro sitio de prueba:
Si no sabe cómo usar CSS, puede consultar CSS Hero. Le permite agregar CSS a cualquier parte de su sitio de WordPress sin escribir ningún código.
Esperamos que este artículo te haya ayudado a aprender cómo agregar clases pares/impares a tus publicaciones en temas de WordPress. También puede consultar nuestra guía sobre cómo aplicar estilo a su diseño de comentarios de WordPress.
Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo Y Facebook.
