En este HowTo aprenderás a crear cajas de contenido (Meta Boxes) dentro de cualquier tipo de Post. Los meta box nos ayudan a no depender de los campos personalizados ya que son más versátiles y más atractivos de usar para el usuario.
Los meta box son campos personalizados que nos permiten agregar contenido a un post o página ya sea esta propia de WordPress o personalizada por el usuario.
Para crear y guardar meta datos adicionales dentro de una página vamos a tener que seguir una serie de pasos:
- Crear la caja de contenido donde usarás el Hook «add_meta_boxes» y la función add_meta_box()
- Incluir el contenido que aparecerá dentro de la caja (textos, campos de formulario, etc …).
- Proceso de salvado de datos usando el Hook «save_post» y la función update_post_meta()
- Recuperar los datos desde el frontend usando las funciones get_post_meta() y get_post_custom().
Antes de empezar a explicar cómo realizar cada paso vamos a editar el fichero functions.php donde incluiremos el siguiente código para así modular y organizar la página. Tendremos que crear el fichero meta_boxes.php en el directorio admin/ de nuestro template para así separar este tipo de contenido que vamos a incluir y tener algo más organizado nuestro código.
|
1 2 3 4 |
<?php if ( is_admin() ) { require_once locate_template('admin/meta_boxes.php'); } |
1.- Creando Cajas de contenido (meta box)
El primer paso que vamos a realizar es crear la caja de contenido (vacía). Por un lado creamos la caja usando la función add_meta_box() y a continuación la registramos usando el Hook «add_meta_boxes«. Los parámetros que puede recibir la función add_meta_box() son los siguientes:
- id (obligatorio) atributo id para el meta box.
- title (obligatorio) título del meta box.
- función/callback (obligatorio) – la función encargada de completar y rellenar la caja.
- página (opcional) donde se va a mostrar la nueva caja que queremos incluir (post, page, custom_post_type, etc …).
- contexto (opcional) – la ubicación dentro de la página donde se situará la caja (advanced por defecto, normal|side).
- prioridad (opcional) la prioridad u orden respecto a los elementos del contexto donde está situada la caja (default por defecto, |low|high).
- argumentos (opcional) un array con los argumentos que queremos enviar a la función o callback.
En este caso vamos a crear una caja denrto de nuestros Post y que nos va a permitir incluir información adicional.
|
1 2 3 4 5 |
<?php function meta_box_post() { add_meta_box( 'my-post-info', __('Informacion adicional Post'), 'meta_box_fields', 'post', 'normal', 'high' ); } add_action( 'add_meta_boxes', 'meta_box_post' ); |
Si editamos un post veremos que se nos ha incluido una nueva caja de contenido (vacía) por lo que el siguiente paso será rellenarla con información.
2.- Incluir contenido dentro de las cajas (meta boxes)
Una vez hemos creado el contenedor o caja, ya podemos incluir contenido dentro de ella. En este caso vamos a crear un campo select para poder incluir coautores al post. Este proceso ya lo hicimos haciendo uso de campos personalizados pero será mucho más sencillo de usar y agradable para el usuario usando meta boxes:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<?php function meta_box_fields( $post ) { // continuamos si esta editando post $screen = get_current_screen();; if ( ! $screen->parent_base == 'edit' && $screen->post_type == "post" ) return; // valores rescatados de la tabla wp_postmeta $values = get_post_custom( $post->ID ); $text = isset( $values['campo_texto_prueba'] ) ? esc_attr( $values['campo_texto_prueba'][0] ) : ""; $coautores = maybe_unserialize($values['coautores'][0]); // si el dato esta serializado maybe_unserialize() lo convierte a un valor legible por el usuario. // usaremos un meta_box_nonce para guardar la información wp_nonce_field( 'coautores', 'meta_box_nonce' ); $query_users = [ 'fields' => 'all', 'order' => 'asc', 'role' => 'author' ]; $users = get_users( $query_users ); // https://developer.wordpress.org/reference/functions/get_users/ ?> <div class="form-group"> <label>Coautores: </label> <select name="coautores[]" id="coautores" multiple class="form-control"><?php foreach ($users as $user) { (in_array($user->ID, $coautores)) ? $selected = " selected" : $selected = ""; ?> <option value="<?php echo $user->ID; ?>"<?php echo $selected; ?>><?php echo $user->display_name; ?></option><?php } ?></select> </div><?php } |
Si comprobamos el código que hemos incluido hasta hora podremos ver que se están mostrando los autores pero aún no se esta guardando la información. En el siguiente paso lo explico.
3.- Guardar el Contenido (meta boxes)
La información se guarda en la tabla wp_postmeta a través de la función update_post_meta() como vimos anteriormente en el tutorial de «Uso y Creación de campos personalizados«. Para ello usaremos el Hook «save_post»
Recuerda que update_post_meta() acepta los siguientes parámetros:
- id (obligatorio) identificador del Post.
- meta key (obligatorio) corresponde al nombre del campo que queremos guardar.
- meta value (obligatorio) el valor del campo. Este campo es serializado automáticamente en caso de ser un array por lo que no tendremos que usar la función serialize()
- valor previo el valor previo que tenía dicho campo antes de actualizarlo.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function meta_boxes_save_post_data( $post_id ) { // comprobar el campo nonce (verificación de seguridad) if( !isset( $_POST['coautores'] ) || ! wp_verify_nonce( $_POST['meta_box_nonce'], 'coautores' ) ) return; // el usuario tiene que tener permisos de edición para poder continuar if( !current_user_can( 'edit_post' ) ) return; if( isset( $_POST['coautores'] ) ) update_post_meta( $post_id, 'coautores', $_POST['coautores'] ); } add_action( 'save_post', 'meta_boxes_save_post_data' ); |
Si probamos de nuevo verás que los datos se guardan correctamente en la base de datos. Los campos nonce que nos permiten validar el contenido introducido por el usuario los explicaré en otro post.
4.- Recuperación de datos (meta box) en el frontend
Para recuperar los datos desde el fronted vamos a usar las funciones get_post_meta() y get_post_custom() y que ya utilizamos anteriormente en el tutorial de «Uso y Creación de campos personalizados«. Recuerda que usan la misma tabla (wp_postmeta) para almacenarlos.
