Función body_class() en WordPress

La función body_class() es una de las funciones más útiles de WordPress. Gracias a él, es fácil cambiar los estilos de los elementos en el sitio según la página o publicación actual, la categoría, la etiqueta, el autor, el tipo de publicación y muchos otros factores.

La función body_class() agrega una lista de clases a la etiqueta en un tema de WordPress. Estas clases se pueden usar para determinar fácilmente el tipo de la página actual usando CSS o JavaScript, por ejemplo, la clase iniciada sesión significa que el visitante actual ha iniciado sesión y la clase búsqueda — que el visitante está en la página de resultados de búsqueda.

Usando body_class()

La mayoría de los temas de WordPress ya usan la función body_class(), por lo que no tiene que cambiar nada en las plantillas de tema en sí. Si está desarrollando su propio tema para WordPress, entonces la función body_class() debe usarse dentro de la etiqueta :

>  

Tenga en cuenta que el uso de esta función es obligatorio para todos los temas en el directorio oficial de WordPress.org. También vale la pena señalar que la función body_class() puede tomar un argumento, donde puede pasar una lista de clases adicionales, por ejemplo:

 

Dentro de la función misma hay una función del mismo nombre filtro

body_class, que es fácil de conectar y cambiar la lista de clases desde cualquier complemento.


Clases

Actualmente, la función body_class() admite más tipos de clase. En esta sección, consideraremos los más interesantes y populares. Puede ver la lista completa y la lógica de selección de clases en el archivo principal wp-includes/post-template.php.

Estas clases se pueden usar en su Editor CSS

en WordPress o en

 

tema secundario

, por ejemplo de la siguiente manera:

/Fondo rojo en la página de resultados de búsqueda */ body.search { background: red;  }  Clases individuales y pag
  • Clases única y página se encuentran entre los más útiles. Están presentes cuando la página actual contiene una sola entrada. La clase single se usa para publicaciones individuales de cualquier tipo, excepto archivos adjuntos y páginas, y la clase page se usa para páginas .

    Por ejemplo, el siguiente código CSS aumenta el título en páginas con una sola publicación o página:

    body.single h1 , body.page h1 { tamaño de fuente: 50%;  }

    La clase single-{post_type} se usa para publicaciones individuales de un determinado tipo , y puede ser útil para aquellos que usan tipos de publicaciones personalizadas.

    El postid-y la página- id-clases

    Usando estas clases, puede determinar la publicación o página específica en la que se encuentra el usuario. La página se identifica por su identificador, que se puede ver en el panel de administración.

    Por ejemplo, en algunas secciones importantes del sitio (registro, formulario de pedido, etc.) puede ocultar la columna lateral, para no distraer al visitante:

    body.page-id-263 #secundario, cuerpo.página-id-456 #secundario { mostrar: ninguno;  }   Las clases de archivo, inicio y blog

    Estas clases le permiten determinar si la página actual es un archivo, la página estática principal del sitio o la página principal página con una lista de registros.

    En el caso de archivos, también existen las siguientes clases:

    
    
  • fecha se utiliza cuando se muestran archivos por fecha
  • 
    
  • post -type-archive-{post_type} para archivos de un tipo de publicación específico
  • autor para archivo de un solo autorautor-{id }
      • y

    autor-{nombre}

      para un archivo de un autor específico por ID o nombre de usuario
  • etiqueta-{id} y etiqueta-{slug} para archivos por etiquetas
  • categoría-{id}
      • y

    categoría-{slug}

      para archivos por categoría

    • término-{id} y término-{slug} para archivos por término de taxonomías arbitrarias 2013

    Por ejemplo, cambie el color de fondo del menú de navegación según la categoría actual:

    body.category-politics #menu- primario { fondo: azul;  } body.category-business #menu-primary { fondo: rojo;  } body.category-technology #menu-primary { fondo: verde;  }   Las clases de inicio de sesión y barra de administración 

    La clase registrada se utiliza cuando el visitante actual está registrado . La barra de administración de clase aparece cuando se muestra la barra superior de WordPress. Puede cambiar el color de fondo del widget de suscripción para usuarios registrados como este:

    body.logged-in .widget-area .widget_subscribe { background: amarillo;  }

    Por cierto, si estás buscando una forma de ocultar la barra superior, no lo hagas con CSS. Hay un filtro especial para la barra superior, con el que puede deshabilitarlo completamente para todos a través del complemento:

    add_filter( 'show_admin_bar', '__return_false');  
    Filtro body_class

    Como mencionamos , hay un filtro especial en la función body_class() que permite que los complementos de WordPress cambien la lista de clases utilizadas.

    Por ejemplo, para no usar la clase logged-in independientemente de si el usuario está logueado, podemos usar el siguiente código en nuestro plugin:

    función my_body_class_filter( $clases ) { if ($clave = array_search( 'logged-in', $classes ) ) unset( $clases );  devolver $clases;  } add_filter( 'clase_cuerpo', 'mi_filtro_clase_cuerpo' );  

    También podemos agregar una nueva clase a la lista, por ejemplo, un campo arbitrario del registro único actual:

    función my_body_class_filter( $clases ) { if ( is_single() ) $clases[] = sanitize_html_class( get_post_meta( get_the_ID, 'my-custom-key', true ) );  devolver $clases;  } add_filter( 'clase_cuerpo', 'mi_filtro_clase_cuerpo' );  

    Si no está seguro de cuándo se usa una clase en particular en body_class() , siempre puede ver el código fuente HTML de la página o utilizar las herramientas de desarrollo en Chrome o Firefox.

    2014 //body_class-wordpress-chrome.png?fit=1032x150 768w" tamaños="(ancho máximo: 766 píxeles) vw , 768px "/>

    Comprobando body_class en Chrome

    2013

    Además de clase_cuerpo() WordPress también tiene una función similar post_class() que se usa para mostrar las clases de una publicación en particular y se puede usar para averiguar el tipo de publicación, su estado, formato, Presencia de miniaturas, etiquetas, categoría y más.

    Más información sobre las funciones body_class() y post_class(), y una lista completa de todas las clases posibles, puede encontrarlas en el archivo principal de wp -includes/post-template.php Si tiene alguna pregunta o dificultad mientras trabaja con estas funciones - deja un comentario.

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Subir

Utilizamos cookies para asegurarnos de brindarle la mejor experiencia en nuestro sitio web. Si continúa utilizando este sitio, asumiremos que está satisfecho con él. Más información