Skip to content

Todo para WordPress, el desarrollo web — y mucho más

🛠 Cómo añadir meta boxes en WordPress con CMB2: una guía completa

🛠 Cómo añadir meta boxes en WordPress con CMB2: una guía completa

Estándar WordPress los campos son suficientes hasta su primer proyecto personalizado. En el momento en que necesita mostrar especificaciones de producto en una tarjeta, añadir una galería a una página o adjuntar un bloque de condiciones de envío, se topa con las limitaciones del editor: título, texto, categorías y nada más.

Existe una solución, y no es ACF Pro a $149 por año. Las cajas meta personalizadas añaden campos arbitrarios directamente a la interfaz de edición de entradas sin un constructor visual y sin una docena de módulos innecesarios. CMB2 hace exactamente eso: proporciona una API PHP para describir cajas meta en código que vive en el control de versiones, no en la base de datos.

A continuación, el flujo de trabajo completo: desde la instalación del plugin hasta la visualización de datos en el frontend. Al final de este artículo, usted tendrá un archivo de caja meta funcional que se adapta a cualquier tipo de contenido, desde páginas hasta productos de WooCommerce.

💡 Resumen rápido:

  • Instale CMB2 desde el directorio de WordPress.org: el plugin es gratuito y se instala en dos clics.
  • Cree un archivo metaboxes.php en la carpeta de su tema y describa los campos requeridos mediante el hook cmb2_admin_init.
  • Incluya el archivo en functions.php con una sola línea require_once y verifique la caja meta en el panel de administración.
  • Muestre los datos guardados en el frontend mediante get_post_meta() con el escape adecuado.

Qué es CMB2: código en lugar de un constructor visual

CMB2 es una librería para desarrolladores que crea cajas meta, campos personalizados y formularios en WordPress. De serie, soporta docenas de tipos de campo: texto, editor WYSIWYG, carga de archivos, selector de fecha, selector de color, botones de opción, listas desplegables, repetidores y grupos.

La principal diferencia con ACF: CMB2 no tiene constructor visual. Todas las cajas meta se describen en archivos PHP dentro de su tema. Para los desarrolladores, esto es una ventaja: la configuración vive en Git, no puede eliminarse accidentalmente a través del panel de administración y la migración entre staging y producción se reduce a un despliegue de código. Al mismo tiempo, CMB2 es completamente gratuito, mientras que ACF Pro le costará alrededor de $149 por año por los campos repetibles y los grupos.

La librería se mantiene activamente desde 2014. En WordPress.org, el plugin tiene una calificación de 5 estrellas y más de 300.000 instalaciones activas. El repositorio de GitHub recibe actualizaciones periódicas: la última versión abordó la compatibilidad con PHP 8.4 y WordPress 6.7. No es un proyecto abandonado que se dejará de lado en seis meses.

Paso 1: Instale el plugin

Vaya a Plugins → Añadir nuevo, escriba «CMB2» en el cuadro de búsqueda y haga clic en «Instalar». Tras la activación, el plugin carga su motor pero no cambia nada en el panel de administración por sí mismo: las cajas meta aparecerán solo después de que usted las describa en código.

Página del plugin CMB2 en el directorio de WordPress.org

Si incluye CMB2 manualmente dentro de su tema sin instalarlo a través del panel de administración, añada lo siguiente al inicio de functions.php:

1require_once __DIR__ . '/cmb2/init.php';

Dos puntos importantes. Primero: init.php debe cargarse lo antes posible, fuera de cualquier hook. No lo envuelva en comprobaciones if ( ! class_exists(...; CMB2 gestiona los conflictos de carga duplicada por sí mismo. Segundo: con la inclusión manual, usted necesitará actualizar CMB2 manualmente, a diferencia de las actualizaciones automáticas a través del panel de administración.

Paso 2: Escriba el archivo de caja meta

Cree una carpeta cmb2-metaboxes en la raíz de su tema hijo y un archivo metaboxes.php dentro de ella. Este archivo contendrá todas las definiciones de sus campos.

A continuación, un código funcional que añade un editor de texto, una descripción breve y un selector de distintivo a los productos de WooCommerce. Cópielo en metaboxes.php:

1add_action( 'cmb2_admin_init', 'sdstudio_register_metaboxes' );
2
3function sdstudio_register_metaboxes() {
4
5 $prefix = '_sdstudio_';
6
7 $cmb = new_cmb2_box( array(
8 'id' => 'product_extra_info',
9 'title' => __( 'Дополнительная информация о товаре', 'cmb2' ),
10 'object_types' => array( 'product' ),
11 'context' => 'normal',
12 'priority' => 'high',
13 'show_names' => true,
14 ) );
15
16 $cmb->add_field( array(
17 'name' => __( 'Описание для карусели на главной', 'cmb2' ),
18 'desc' => __( 'Текст, который будет показан в слайдере товаров.', 'cmb2' ),
19 'id' => $prefix . 'carousel_desc',
20 'type' => 'wysiwyg',
21 'options' => array(
22 'textarea_rows' => 5,
23 ),
24 ) );
25
26 $cmb->add_field( array(
27 'name' => __( 'Короткое описание', 'cmb2' ),
28 'desc' => __( 'Одна строка — для карточки товара в сетке.', 'cmb2' ),
29 'id' => $prefix . 'short_desc',
30 'type' => 'textarea_small',
31 ) );
32
33 $cmb->add_field( array(
34 'name' => __( 'Бейдж товара', 'cmb2' ),
35 'desc' => __( 'Метка «Новинка», «Хит» или «Распродажа».', 'cmb2' ),
36 'id' => $prefix . 'badge',
37 'type' => 'select',
38 'show_option_none' => true,
39 'options' => array(
40 'new' => __( 'Новинка', 'cmb2' ),
41 'hit' => __( 'Хит', 'cmb2' ),
42 'sale' => __( 'Распродажа', 'cmb2' ),
43 ),
44 ) );
45
46}

Lo que sucede aquí: el hook cmb2_admin_init se dispara cuando el panel de administración carga y registra la caja meta en la página de edición de producto. new_cmb2_box() crea un contenedor con el título «Información adicional del producto» y tres llamadas a add_field() le añaden campos: un editor WYSIWYG, un campo de texto compacto y una lista desplegable con opciones predefinidas. Cada campo recibe un id único con el prefijo _sdstudio_ para evitar conflictos con otros plugins.

Banner del plugin CMB2 en WordPress.org

Si necesita páginas normales en lugar de WooCommerce, reemplace 'object_types' => array( 'product' ) por 'object_types' => array( 'page' ). Para múltiples tipos de contenido, enumérelos: array( 'page', 'post' ).

Para ver la lista completa de tipos de campo, consulte la documentación oficial de CMB2 en GitHub. Hay docenas de opciones disponibles de serie: desde texto simple y editores WYSIWYG hasta carga de archivos, selectores de color, botones de opción y taxonomías. Elija el tipo adecuado para su tarea específica basándose en la documentación, no en suposiciones.

Paso 3: Inclúyalo en functions.php

Ahora necesita cargar el archivo que creó. Abra functions.php en su tema hijo y añada una sola línea antes de la etiqueta de cierre ?>, o al final del archivo si no hay etiqueta de cierre:

1require_once __DIR__ . '/cmb2-metaboxes/metaboxes.php';

Antes de añadir el código, haga una copia de seguridad de functions.php. Un error de sintaxis en require_once hará que el sitio falle con un error fatal de PHP, y solo podrá restaurar el archivo mediante FTP o el panel de su hosting. Después de guardar, abra cualquier producto en el panel de administración y verifique que la caja meta «Información adicional del producto» aparece debajo del editor de contenido.

Rellene los campos de prueba y haga clic en «Actualizar». CMB2 guarda automáticamente los datos en la tabla wp_postmeta. No se requieren llamadas adicionales al hook save_post: la librería intercepta el guardado de la entrada y procesa sus campos por sí misma.

Paso 4: Muestre los datos en el frontend

Los datos están guardados en la base de datos; ahora necesita mostrarlos a los visitantes. Abra el archivo del tema responsable de la página de producto, generalmente single-product.php o content-single-product.php. Añada el código dentro del bucle de WordPress:

1<?php
2$carousel_desc = get_post_meta( get_the_ID(), '_sdstudio_carousel_desc', true );
3$badge = get_post_meta( get_the_ID(), '_sdstudio_badge', true );
4
5if ( ! empty( $carousel_desc ) ) : ?>
6 <div class="product-carousel-desc">
7 <?php echo wp_kses_post( $carousel_desc ); ?>
8 </div>
9<?php endif; ?>
10
11<?php if ( ! empty( $badge ) ) : ?>
12 <span class="product-badge product-badge--<?php echo esc_attr( $badge ); ?>">
13 <?php echo esc_html( $badge ); ?>
14 </span>
15<?php endif; ?>
16

Desglose: get_post_meta() recupera el valor por el ID del campo. Para un campo WYSIWYG, use wp_kses_post(), que permite etiquetas HTML permitidas y filtra las potencialmente peligrosas. Para texto simple o un select, esc_html() es suficiente: convierte caracteres especiales en entidades HTML y previene XSS.

Si la caja meta se crea para páginas ('object_types' => array( 'page' )), coloque este mismo código en page.php o content-page.php. La mecánica es la misma: get_post_meta() dentro del bucle, con escape según el tipo de campo.

Vídeo: CMB2 desde la instalación hasta una caja meta funcional

En este tutorial de 20 minutos, el autor recorre el flujo de trabajo completo: instalación, creación de campos, inclusión del archivo y visualización de datos en el frontend. Es útil verlo si las instrucciones de texto dejaron lagunas.

⁉️🤔 Preguntas frecuentes

¿En qué se diferencia CMB2 de ACF?

ACF proporciona un constructor visual de campos directamente en el panel de administración: usted puede montar una caja meta sin escribir una sola línea de código. CMB2 requiere describir los campos en archivos PHP dentro de su tema. Para los desarrolladores que almacenan la configuración en Git, CMB2 es más conveniente: las cajas meta no dependen del estado de la base de datos, no pueden eliminarse accidentalmente a través del panel de administración y la migración entre staging y producción se reduce a un despliegue de código. ACF Pro cuesta desde $149 por año por los campos repetibles y los grupos; CMB2 es gratuito.

¿Se puede usar CMB2 sin instalar el plugin?

Sí. Copie la carpeta de CMB2 dentro de su tema e incluya init.php en functions.php, como se muestra en el paso 1. Este enfoque es conveniente para temas premium que deben funcionar inmediatamente después de la activación sin requerir que el usuario instale un plugin de terceros. La desventaja: usted necesitará actualizar CMB2 manualmente con cada nueva versión.

¿Funcionan los campos de CMB2 en el editor Gutenberg?

Sí, las cajas meta de CMB2 se muestran debajo del editor Gutenberg de la forma habitual, en la sección inferior al contenido. Sin embargo, de serie, no se integran en los bloques del editor. Si necesita incrustar un campo directamente en un bloque, se requerirá desarrollo adicional mediante la API de CMB2 y register_block_type().

¿Qué debo hacer si la caja meta no aparece en el panel de administración?

Compruebe tres cosas. Primero: ¿coincide object_types con el tipo de entrada que se está editando? Para productos de WooCommerce, necesita 'product', no 'post'. Segundo: ¿hay un error de sintaxis PHP? Active WP_DEBUG en wp-config.php y revise el registro. Tercero: ¿está el prefijo del id del campo en conflicto con otro plugin? Use un prefijo único como _sdstudio_.

¿Puedo crear grupos de campos repetibles?

Sí. CMB2 soporta campos repetibles mediante la bandera 'repeatable' => true y grupos repetibles mediante $cmb->add_group_field(). Un grupo le permite añadir un bloque «Característica: valor» y crear nuevas instancias con un botón «Añadir fila» directamente en el panel de administración.

¿Funciona CMB2 con multisitio?

Sí, el plugin es totalmente compatible con WordPress Multisitio. Las cajas meta pueden registrarse globalmente en el functions.php del tema de red activo o individualmente para cada sitio. La llamada a get_post_meta() funciona igual en ambos modos.

CMB2 o ACF: qué enfoque elegir para su tarea

CMB2 resuelve exactamente una tarea: crear cajas meta personalizadas mediante código, con la configuración almacenada en archivos del tema en lugar de en la base de datos. La elección se reduce a su flujo de trabajo, no a un abstracto «cuál es mejor».

  • Si usted es desarrollador y almacena toda la configuración del proyecto en Git, opte por CMB2. Las cajas meta viven en metaboxes.php, se despliegan con su tema y no requieren sincronización de la base de datos entre staging y producción.

  • Si necesita un constructor visual, campos flexibles repetibles y bloques de Gutenberg listos para usar sin escribir código, opte por ACF Pro. La suscripción desde $149 anuales se amortiza en velocidad de prototipado.

  • Si su proyecto ya usa CMB2 y las cajas meta funcionan de forma fiable, quédese con él. La librería no está abandonada, no requiere una migración urgente y recibe actualizaciones de compatibilidad periódicamente.

Pruebe ambos enfoques en un sitio de pruebas: construya la misma caja meta en CMB2 y en ACF. La diferencia de enfoque se hará evidente en 20 minutos. ¿Qué herramienta usa usted? Compártalo en los comentarios.