X

Agregar clase de cuerpo personalizada para páginas específicas

Snippets de IsItWP

¿Estás buscando una forma de agregar una clase de cuerpo personalizada para páginas específicas? Si bien probablemente exista un plugin para esto, hemos creado un fragmento de código rápido que puedes usar para agregar una clase de cuerpo personalizada para páginas específicas en WordPress.

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( 'body_class', 'my_neat_body_class');
function my_neat_body_class( $classes ) {
     if ( is_page(7) || is_category(5) || is_tag('neat') )
          $classes[] = 'neat-stuff';

     return $classes; 
}

Agrega este fragmento de código al archivo header.php de tu tema de WordPress para reemplazar tu etiqueta de cuerpo HTML predeterminada.

<body <?php body_class(); ?>>

Nota: Si es la primera vez que agregas fragmentos de código en WordPress, consulta nuestra guía sobre cómo agregar 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: los 27 mejores temas de WordPress para negocios y los 7 mejores plugins de WordPress para GDPR.

Comentarios   Deja una respuesta

  1. ¿Es algo similar posible pero para un #id? No quiero la clase .id

    1. Todavía podrías usar la clase .page-id: https://developer.wordpress.org/reference/functions/body_class/

      Dicho esto, para IDs reales, podrías agregar un ID al propio archivo de plantilla y usar condicionales para controlar cuándo se muestra.

  2. ¡Genial! Me ayudó mucho.

  3. Freelance Web Designer June 3, 2014 at 3:30 pm

    ¿Dónde puedo agregar la clase una vez que se completan los pasos anteriores?

    1. cambia la clase en el código ‘neat-stuff’ a lo que desees. Incluso podrías agregar
      múltiples clases si fuera necesario.

      1. Freelance Web Designer June 3, 2014 at 3:39 pm

        Quiero un ID / clase diferente para cada página... ¿cómo lo asigno a una página específica?

        1. Este fragmento no es lo que necesitas, solo agregará una sola clase a

          “is_page(7) || is_category(5) || is_tag(‘neat’)”

          Una página con el ID 7 o la categoría 5 o una página que tenga la etiqueta 'neat'. Creo que lo que mejor se adaptaría a tus necesidades es lo siguiente.

          http://wpsnipp.com/index.php/functions-php/add-parent-page-slug-to-body_class/

          Esto agregará el slug de la página como clase para la página con un prefijo de parent-{page_slug}. Aparte de agregar este fragmento a functions.php, no se necesita nada más. También echa un vistazo a este resultado de búsqueda para ver más fragmentos relacionados con body_class http://wpsnipp.com/?s=body_class

          Estoy seguro de que puedes encontrar algunos que sean útiles.

          1. Freelance Web Designer June 3, 2014 at 4:24 pm

            ¡Gracias!

  4. ¡Funciona a la perfección para mí, buen trabajo!

  5. ¡Muchas gracias por esto, realmente apreciado!

  6. Gracias por esto, quería un nombre de clase de cuerpo más corto para una plantilla de página personalizada, usando is_page_template (‘template-name.php’) y esto funcionó perfecto.

  7. ¿Se puede combinar esto con el otro fragmento de clase de cuerpo para que si las páginas no se especifican, tengan por defecto su propia página como clase?

    1. Deberías poder hacerlo así:

           if ( is_page(7) || is_category(5) || is_tag(‘neat’) ){
                $classes[] = ‘neat-stuff’;          }else{
                $classes[] = ‘other-class’;

                }

  8. ¿Hay algo que necesites hacer después de agregar la clase? No veo ninguna forma de agregar una clase personalizada para una página...

    1. Hola Trevor,
      Sí, necesitarás agregar la función body_class(); dentro de la etiqueta body. Actualicé el fragmento para evitar confusiones.

  9. Muy útil. ¿Se puede hacer algo similar usando el padre de la página?

    1. Claro, podrías hacer algo como esto, sin embargo, si tus páginas solo tienen un padre, body_class ya agregará la clase “page-parent” al body. Esto solo es un problema si tienes muchas páginas hijas, ya que cada subpágina también puede ser una página padre. ¿Qué es lo que intentas hacer?

  10. Elliott the web design guy May 18, 2011 at 10:43 pm

    Ahora, ¡ese es un fragmento muy ordenado para diseños de página personalizados – ¡impresionante!

    1. ¡Genial, me alegra que te guste!

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!