Usando Custom Fields con Meta Box

Los Custom Fields o Campos Personalizados en WordPress son cajas adicionales de contenido que podemos agregar al editor de nuestros posts, páginas o inclusive a nuestros post type si lo requerimos, estos nuevos campos nos ayudaran a expandir las funcionalidades de cada uno de estos.

WordPress trae consigo una version básica de lo que son los campos personalizados, seguramente alguna vez dentro de la edición de las páginas o post has observado una caja como la siguiente:

Es en esta sección podemos configurar los campos que deseemos y luego mostrarlos desde nuestro frontend usando la siguiente linea de código como lo indica su documentación en el codex de WordPress.

<?php echo get_post_meta($post->ID, 'key', true); ?>

El problema está en que la manera como se crean estos tipos de campos es realmente deficiente y por esta razón tratamos en lo posible de utilizar herramientas externas que nos mejoren el panorama permitiéndonos además de crear campos de texto otro tipos como fechas, mapas, select, entre otros.

En que caso se pueden utilizar los Custom Fields

WordPress no coloca limitantes en el uso de esta herramienta, puede ser utilizada en las páginas, post, post type del tipo que hallas creado, pero por lo general su mayor uso esta dado en los post type, de los cuales ya hablamos en un artículo anterior acerca de su creación y gestión.

Les coloco un ejemplo, supongamos que tenemos una librería creada con los post type y dentro de cada libro queremos agregarle datos como un código, autor, fechas de ingreso y salida, campos que por defecto el admin de WordPress no esta optimizado para tenerlos y es en la creación de estos donde nos ayudan los plugins para tener un mayor orden en nuestros proyectos.

En el mercado de plugins que nos permiten interactuar con los Custom Fields aparecen varios como por ejemplo CMB2, Advanced Custom Fields, Meta Box y muchos otros más, estos tienen pocas diferencias entre ellos y todos sirven para el mismo fin.

Yo en mi experiencia he trabajado con todos pero hoy quiero explicar el funcionamiento de uno en especifico llamado Meta Box, el cual es uno de los mas utilizados por su facilidad y documentación.

Este ejemplo lo trabajaré sobre el código realizado en https://andres-dev.com/creando-un-post-type-con-wordpress/ donde ya había creado un tipo de post type llamado Book y lo que realizaremos sera adicionarle algunos campos necesarios para que nuestra biblioteca comience a funcionar.

Manos a la obra 💪

Comenzaremos descargando nuestro plugin con el cual queremos trabajar que sera el Meta Box, al momento de instalarlo este plugin no tiene ningún tipo de admin visual desde donde configurarlo adicionalmente, solo es necesario instalarlo y comenzar a trabajar a código.

Luego de esto necesitamos irnos a la documentación, la cual nos mostrara cada uno de los paso de como proceder desde el inicio.

El código que agregaremos al functions.php no es nada de que preocuparse y se los explicare de forma muy sencilla.

// Registrando Meta Box para post type Book
add_filter( 'rwmb_meta_boxes', 'your_prefix_meta_boxes' ); // Función declarada en el filtro rwmb_meta_boxes propia de Meta Box 
function your_prefix_meta_boxes( $meta_boxes ) { // Función para crear los Custom Fields
    $meta_boxes[] = array(
        'title'      => __( 'Datos del libro', 'textdomain' ), // Nombre de todo el grupo
        'post_types' => 'book', // Lo mostraremos en nuestro pos type llamado book
        'fields'     => array(
        	// Inicio de cada uno de los campos que agregaremos
        	array(
                'id'   => 'codigo',
                'name' => __( 'Código', 'textdomain' ),
                'type' => 'number',
            ),
            // Fin de cada uno de los campos que agregaremos
            array(
                'id'   => 'autor',
                'name' => __( 'Autor', 'textdomain' ),
                'type' => 'text',
            ),
            array(
                'id'      => 'tapa',
                'name'    => __( 'Tapa', 'textdomain' ),
                'type'    => 'radio',
                'options' => array(
                    'blanda' => __( 'Blanda', 'textdomain' ),
                    'dura' => __( 'Dura', 'textdomain' ),
                ),
            ),
            array(
                'id'   => 'fecha',
                'name' => __( 'Fecha de creación', 'textdomain' ),
                'type' => 'date',
            ),
            array(
                'id'   => 'resumen',
                'name' => __( 'Resumen', 'textdomain' ),
                'type' => 'textarea',
            ),
            array(
        'id' => 'select_1',
        'name' => esc_html__( 'Select', 'metabox-online-generator' ),
        'type' => 'select',
        'placeholder' => esc_html__( 'Select an Item', 'metabox-online-generator' ),
        'options' => array(
          'Español' => 'Español',
          'Ingles' => 'Ingles',
        ),
        'std' => 'Español',
      ),
        ),
    );
    return $meta_boxes; // Retornamos la variable de toda la función.
}

En nuestro código primero llamaremos el filtro de Meta Box que permite pasar nuestra función creada, luego creamos la función que sera llamada, la cual internamente por medio de diferentes Array configuramos el titulo del grupo, donde se mostrara y los diferentes campos que necesitamos.

Como lo mostramos en nuestra página

La forma mas básica de mostrar nuestros campos creados es por medio de una función propia de Meta Box pasándole a la vez el id creado para cada campo, recuerda que este código es necesario pasarlo dentro del loop de la plantilla que se este usando que en mi caso seria single-book.php como la habíamos creado en el artículo de las Categorías y tags en los post type de WordPress.

Por ejemplo en el caso de nuestro código se hace de la siguiente forma.

<?php echo rwmb_meta( 'codigo' ); ?>

Cada tipo de campo tiene una forma distinta de ser mostrado por eso dejare por acá el link directo a la documentación que es realmente fácil.

Meta Box nos permite crear diferentes tipos de campos con los cuales podemos interactuar:

• Autocomplete
• Checkbox list
• Color
• Custom HTML
• Date
• Datetime
• File
• File Advanced – File Upload
• Image Advanced – Image Upload
• Map
• Number
• Post
• Radio
• Select
• Select Advanced
• Taxonomy
• Taxonomy Advanced
• Text
• Textarea
• Text List
• Time
• User
• Video
• WYSIWYG (Editor)

Una de las ventajas que destaco de este plugin es su generador online, que nos permite con unos pocos clics crear nuestros custom fields y solo copiando y pegando el código generado en nuestro functions.php, te invito a utilizarlo en cuanto puedas.

Y de esta forma hemos terminado de crear campos personalizados dentro de nuestro WordPress con el plugin Meta Box, cuéntame que otro plugin utilizas para la creación de este tipo de campos. 🔔