X

Cómo agregar una clase a la primera publicación en el bucle

Snippets de IsItWP

¿Estás buscando una forma de agregar una clase a la primera publicación en The Loop? Este fragmento agregará una clase first a la primera publicación en The Loop, lo que te permitirá agregar un estilo único a la primera publicación.

Instrucciones:

Todo lo que tienes que hacer es agregar este código al archivo functions.php de tu tema o a un plugin específico del sitio:

add_filter( 'post_class', 'wps_first_post_class' );
function wps_first_post_class( $classes ) {
    global $wp_query;
    if( 0 == $wp_query->current_post )
        $classes[] = 'first';
        return $classes;
}

Nota: Si es la primera vez que agregas fragmentos de código en WordPress, consulta nuestra guía sobre cómo copiar / pegar fragmentos de código correctamente en WordPress, para que no rompas accidentalmente tu sitio.

Si te gustó este fragmento de código, considera echar un vistazo a nuestros otros artículos en el sitio como: Reseña de CSS Hero.

Comentarios   Deja una respuesta

  1. Marek Jakubčík April 18, 2021 at 9:59 pm

    ¿Alguna idea de por qué esto no funciona con el shortcode de woo? Agrega una clase a cada producto en el loop. Funciona bien en la página de la tienda.

    1. ¿Qué shortcode estás usando?

  2. Hola,

    Esto ha funcionado muy bien, sin embargo, si tengo paginación y voy, digamos, a la página 2, agrega la clase a la primera publicación de la página 2, lo cual no quiero particularmente. ¿Cómo podría actualizar el código para agregar la clase 'first' a la primera publicación de todas las publicaciones, incluso contando las paginadas?

    ¡Muchas gracias por el artículo, ha sido de gran ayuda! 🙂

    1. solo agrega esta condición if( 0 == $wp_query->current_post && get_query_var(‘paged’) == 0 ) : ?>

  3. ¡Sí! para agregar una clase 'last' a la publicación, solo necesitas agregar una condición como $wp_query->current_post === $wp_query->found_posts?

    1. Algo como esto debería funcionar,
      if( $wp_query->current_post == $wp_query->post_count-1 )

      1. Gracias, hombre, no estaba seguro de que found_posts comenzara desde 0 (mi error). Sin embargo, en algunos casos, post_count no es la opción correcta porque contiene el número total de publicaciones que se muestran. El uso de found_posts o post_count depende de qué consulta se haya realizado, post_count tiene el mismo valor que "posts_per_page" si se define en una consulta o el valor predeterminado definido en la configuración de lectura (perdón por mi inglés).

        1. Hola Widzo, creo que depende de los resultados que quieras. Si quieres agregar la clase a la última publicación en cada página, usarías “post_count”. Si solo quieres agregarla a la última publicación, usarías “found_post”.

  4. ¡Genial! ¿Y si quiero agregar una clase siempre a la cuarta columna del bucle? Por ejemplo, tengo un bucle que muestra mis publicaciones en 4 columnas y necesito agregar esta clase a la columna de la derecha. ¿Cómo puedo hacerlo?

    Gracias

    1. Hola Fabio, necesitaría ver tu bucle de columnas para ver qué habría que hacer.

Agrega un comentario

Nos complace que hayas elegido dejar un comentario. Ten en cuenta que todos los comentarios se moderan de acuerdo con nuestra política de privacidad, y todos los enlaces son nofollow. NO uses palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.

Lista de verificación para lanzar WordPress

La lista de verificación definitiva para lanzar WordPress

Hemos recopilado todos los elementos esenciales de la lista de verificación para el lanzamiento de tu próximo sitio web de WordPress en un práctico ebook.
¡Sí, envíame el eBook gratis!