Cómo crear metaboxes personalizados con CMB2

Hace un par de años, estaba buscando una forma de consultar publicaciones y mostrar la ubicación donde se escribió una publicación en un mapa de Google. En mi investigación, encontré una publicación de blog sobre cómo crear un localizador de tiendas usando CMB2 y Google Maps. Desde entonces, CMB2 se ha convertido en uno de mis complementos favoritos y se utiliza en la mayoría de mis proyectos.

Primero, ¿Qué es CMB2?

CMB es un acrónimo de Custom Meta Boxes y, según la descripción en la página del complemento, "CMB2 es un metabox, campos personalizados y una biblioteca de formularios para WordPress que te dejará boquiabierto". Fue desarrollado por Justin Sternberg de WebDevStudios y estuvo en el repositorio de complementos durante poco más de dos años. Sin embargo, en febrero pasado, la buena gente del repositorio de complementos de WordPress reconoció que se equivocaron y aprobaron CMB2 como un complemento cuando no deberían haberlo hecho.

Mira, los complementos generalmente pueden hacer algo de inmediato; tienen alguna funcionalidad inherente. CMB2 es en realidad un marco. Como Sternberg explicó una vez, "Es un marco de desarrollo para desarrollar fácilmente formularios y campos para sus temas y complementos". De hecho, cuando instale CMB2, no pasará nada. No obtendrá una página de administración y no hay una interfaz de usuario de administrador. Para usar CMB2, debe poder escribir código y agregarlo a su archivo functions.php . Por esa razón, lo llamo un complemento 'sin complemento'.

La buena noticia es que el equipo de aprobación del complemento acordó dejarlo en el repositorio, para que pueda continuar descargándolo y actualizándolo desde allí. Puedes leer todo sobre la historia aquí en el sitio de Justin.

Cómo configurar CMB2

Para comenzar, deberá encontrar el archivo example-functions.php del directorio de complementos y copiarlo en su tema. Se puede copiar directamente en la carpeta raíz del tema, pero para mantener su proyecto bien organizado, sugiero copiarlo en una carpeta como /lib/ o /includes/ . Si ya sabe cómo le gustaría usar CMB2, puede continuar y cambiar el nombre del archivo a algo más apropiado. Por ejemplo, si quisiera usarlo para crear campos personalizados para una página de testimonios, podría llamarlo testimonial-functions.php .

A continuación, deberá asegurarse de que WordPress encuentre el nuevo archivo agregando una declaración require_once a su archivo functions.php . Eso se verá algo como esto:

 require_once( dirname(__FILE__) . '/lib/testimonial-functions.php');

Ahora es el momento de profundizar realmente. Abra el archivo testimonial-functions.php (o como lo haya llamado). Notará que Justin no solo creó un ejemplo de casi todos los tipos de campos posibles, sino que también creó funciones para mostrar los campos por página de inicio, categoría, ID de publicación, etc.

Nota: este artículo pretende presentarle CMB2; no va a ser un tutorial completo sobre cómo usar cada aspecto del mismo, y debido a que es un marco y fue desarrollado para ayudar a los programadores, debe tener una comprensión básica de PHP y el funcionamiento interno de WordPress. Si está buscando un complemento Meta Box personalizado que tenga una interfaz de usuario de administrador, es posible que desee consultar el complemento Campos personalizados avanzados.

Por lo tanto, volvamos a la creación de algunos metacuadros personalizados para algo simple, como un testimonio. Primero, determine la cantidad y los tipos de campos que necesitará. En aras de mantenerlo simple, digamos que necesitamos tres campos. Uno para el testimonio real, otro para el nombre de la persona que da el testimonio y otro para una imagen de la persona.

Al trabajar en el archivo testimonial-functions.php , deberá encontrar la sección para registrarse y agregar su nueva función. Ese código se parece a esto.

 add_action( 'cmb2_admin_init', 'yourprefix_register_demo_metabox' );

A continuación, le sugiero que cambie el nombre de su función a algo relevante para su tema y proyecto.

 add_action( 'cmb2_admin_init', 'register_testimonial_metabox' ); /** * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook. */ function register_testimonial_metabox() {

También te sugiero que cambies el nombre del prefijo.

 // Start with an underscore to hide fields from custom fields list $prefix = '_yourprefix_'; //note, you can use anything you'd like here, but you need to remember what you use, because you will be using it again later.

Hay varios tipos de campos diferentes para elegir. voy a usar:

 'type' => 'textarea_small' // for the author field 'type' => 'wysiwyg' // for the testimonial in case we want to include html 'type' => 'file' // for the image of the project or author $cmb_demo->add_field( array( 'name' => __( 'Testimonial Author', 'cmb2' ), 'desc' => __( 'Who is the testimonial from', 'cmb2' ), 'id' => $prefix . 'author', //Note, I renamed this to be more appropriate 'type' => 'textarea_small', ) ); $cmb_demo->add_field( array( 'name' => __( 'Testimonial', 'cmb2' ), 'desc' => __( 'add the testimonial here', 'cmb2' ), 'id' => $prefix . 'testimonial', //Note, I renamed this to be more appropriate 'type' => 'wysiwyg', 'options' => array( 'textarea_rows' => 5, ), ) ); $cmb_demo->add_field( array( 'name' => __( 'Author Image', 'cmb2' ), 'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ), 'id' => $prefix . 'image', //Note, I renamed this to be more appropriate 'type' => 'file', ) );

Estos tres nuevos campos deben agregarse a la nueva función, por lo que se vería así:

 add_action( 'cmb2_admin_init', 'register_testimonial_metabox' ); /** * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook. */ function register_testimonial_metabox() { // Start with an underscore to hide fields from custom fields list $prefix = '_yourprefix_'; //note, you can use anything you'd like here /** * Start field groups here */ $cmb_demo->add_field( array( 'name' => __( 'Testimonial Author', 'cmb2' ), 'desc' => __( 'Who is the testimonial from', 'cmb2' ), 'id' => $prefix . 'author', //Note, I renamed this to be more appropriate 'type' => 'textarea_small', ) ); $cmb_demo->add_field( array( 'name' => __( 'Testimonial', 'cmb2' ), 'desc' => __( 'add the testimonial here', 'cmb2' ), 'id' => $prefix . 'testimonial', //Note, I renamed this to be more appropriate 'type' => 'wysiwyg', 'options' => array( 'textarea_rows' => 5, ), ) ); $cmb_demo->add_field( array( 'name' => __( 'Author Image', 'cmb2' ), 'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ), 'id' => $prefix . 'image', //Note, I renamed this to be more appropriate 'type' => 'file', ) ); }

¡Y eso es! Su código final debería verse así:

 <?php /** * Include and set up custom metaboxes and fields. (Make sure you copy this file outside the CMB2 directory) * * Be sure to replace all instances of 'yourprefix_' with your project's prefix. * http://nacin.com/2010/05/11/in-wordpress-prefix-everything/ * * @category YourThemeOrPlugin * @package Demo_CMB2 * @license http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later) * @link https://github.com/WebDevStudios/CMB2 */ /** * Get the bootstrap! If using the plugin from wordpress.org, REMOVE THIS! */ if ( file_exists( dirname( __FILE__ ) . '/CMB2/init.php' ) ) { require_once dirname( __FILE__ ) . '/CMB2/init.php'; } elseif ( file_exists( dirname( __FILE__ ) . '/CMB2/init.php' ) ) { require_once dirname( __FILE__ ) . '/CMB2/init.php'; } add_action( 'cmb2_admin_init', 'register_testimonial_metabox' ); /** * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook. */ function register_testimonial_metabox() { // Start with an underscore to hide fields from custom fields list $prefix = '_yourprefix_'; //note, you can use anything you'd like here /** * Start field groups here */ // This first field group tells WordPress where to put the fields. In the example below, it is set to show up only on Post_ID=10 $cmb_demo = new_cmb2_box( array( 'id' => $prefix . 'metabox', 'title' => __( 'Homepage Custom Fields', 'cmb2' ), 'object_types' => array( 'page', ), // Post type 'show_on' => array( 'id' => array( 10, ) ), // Specific post IDs to display this metabox ) ); $cmb_demo->add_field( array( 'name' => __( 'Testimonial Author', 'cmb2' ), 'desc' => __( 'Who is the testimonial from', 'cmb2' ), 'id' => $prefix . 'author', //Note, I renamed this to be more appropriate 'type' => 'textarea_small', ) ); $cmb_demo->add_field( array( 'name' => __( 'Testimonial', 'cmb2' ), 'desc' => __( 'add the testimonial here', 'cmb2' ), 'id' => $prefix . 'testimonial', //Note, I renamed this to be more appropriate 'type' => 'wysiwyg', 'options' => array( 'textarea_rows' => 5, ), ) ); $cmb_demo->add_field( array( 'name' => __( 'Author Image', 'cmb2' ), 'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ), 'id' => $prefix . 'image', //Note, I renamed this to be more appropriate 'type' => 'file', ) ); }

Cuando termine, debería tener una página similar a la siguiente:

Usar CMB2 es una excelente manera de darle a su sitio web exactamente lo que necesita, ya que las opciones son realmente infinitas. Por ejemplo, CMB2 se puede usar para crear una página de opciones de temas con metacuadros para logotipos, URL de sitios de redes sociales o videos. En el caso de crear un sitio web para un cliente, CMB2 es perfecto para personalizar el administrador para que el cliente no tenga que formatear el contenido para que coincida con los estilos de su tema. Y una vez que se ingresan los datos, puede mostrar el contenido con todo el estilo ya implementado en su HTML y CSS.

Una vez que haya dominado la adición de campos básicos con CMB2, intente agregar los grupos de campos repetibles. Con estos, podrá agregar tantos tipos de contenido como desee y, luego, usando un bucle for-each, puede comenzar a crear presentaciones de diapositivas o carruseles.

CMB2 me ha permitido llevar mis sitios de WordPress al siguiente nivel y espero que haga lo mismo por ti.