Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
meta boxes

Añade una clase CSS personalizada a tus meta boxes

En esta entrada vamos a ver como añadir una clase CSS a los meta boxes de WordPress.

Utilizamos los meta boxes en WordPress para agrupar custom fields, y hacer la gestión de un contenido un poco más ordenada. Cuando haces un desarrollo a medida, normalmente juegas con los meta boxes para ponérselo fácil a un cliente.

En este juego, puedes agruparlos por pestañas, ocultarlos según que rol, asignarlos a un tipo de contenido específico o a una categoría concreta… Si en alguna ocasión te has visto metido en alguna de estas, es probable que hayas necesitado o echado en falta que la función add_meta_box() no incluya entre sus parámetros la opción de asignar una clase.

Recordemos que esta función permite:

donde:

  • $id: Atributo ID (identificador único del meta box)
  • $title: El nombre o título que aparecerá en la cabecera del meta box
  • $callback: La función a la que llamaremos para pintar el contenido del meta box
  • $screen: La pantalla o pantallas donde aparecerá el meta box
  • $context: Dónde aparecera el meta box
  • $priority: Prioridad para mostrar el meta box dentro del contexto
  • $callback_args: Parámetros que pasaremos a la función de callback

 

Como verás, podemos asignar un ID, pero no una clase. Y en algunas ocasiones, sobre todo cuando debes gestionar multitud de meta boxes, puede ser muy útil disponer de una clase CSS común a ciertos meta boxes. De este modo podremos “agrupar” varios de ellos con la misma clase, y actuar sobre ella mediante CSS o JavaScript.

Existe un filtro en WordPress, postbox_classes_{$page}_{$id} que nos permite inyectar nuestra propia clase:

En este ejemplo, myposttype sería el nombre del post type donde aparece el meta box, y mymetaboxid el identificador que hemos asignado.

Si no quieres añadir tantos filtros como meta boxes tengas, lo ideal es que te crees una clase para administrarlos. Puedes poner en un archivo de configuración toda la información de tus meta boxes. Así, de manera dinámica podrás generarlos y añadirles clases a tu conveniencia.

Puede que también te interese

He olvidado, perdido o borrado mi usuario o contraseña, o ambos
He olvidado, perdido o borrado mi usuario o contraseña, o ambos
A quien no le ha ocurrido alguna vez que nos hemos olvidado o perdido nuestro usuario o contraseña, o ambos para acceder a un sitio…
Cómo eliminar los Shortcodes huérfanos en WordPress
Cómo eliminar los Shortcodes huérfanos en WordPress
Los shortcodes son códigos cortos que habitualmente utilizamos en el editor de texto para obtener una funcionalidad avanzada en el contenido de nuestras entradas, páginas,…
Cómo añadir nuestras propias opciones multi-idioma en el personalizador de WordPress
Cómo añadir nuestras propias opciones multi-idioma en el personalizador de WordPress
En la entrada anterior veíamos cómo agregar nuestras propias opciones en el personalizador de WordPress. En ésta entrada vamos a ver cómo podríamos organizarlas por…
Creando un tema desde cero para WordPress parte 4: Acciones al activar/desactivar
Creando un tema desde cero para WordPress parte 4: Acciones al activar/desactivar
1. Creando un tema desde cero para WordPress: Consideraciones previas 2. Creando un tema desde cero para WordPress: Escribiendo el tema 3. Creando un tema…