Metaboxes en WordPress: Cómo crear campos personalizados en las entradas

Una vez que hemos creado un Custom Post Type para nuestro WordPress podemos,  además, añadirle campos personalizados de una forma manual o mediante plugins. En este artículo, nos centraremos en la creación manual mediante código, un proceso que nos vale tanto  para los Custom Post Type como para las entradas por defecto.

Para los usuarios menos familiarizados con la programación,  también facilitamos el nombre de un par de plugins de WordPress que nos facilitarán la creación de estos campos personalizados.

Partiremos del ejemplo utilizado en el articulo de las Custom Post Type, creando campos personalizados  del tipo libro a la entrada. El código que necesitaremos para añadir un metabox es:

<?php add_meta_box( $id, $title, $callback, $page, $context, $priority, $callback_args ); ?>

En esta secuencia:

  • $id es el ID html del metabox
  • $title es el nombre que aparecerá al lado del campo
  • $callback es la función que dará uso a nuestro metabox
  • $page es donde queremos que se muestre el metabox
  • $context dentro de la entrada donde queremos que se muestre, si lo ponemos a normal le estamos diciendo que lo muestre justo debajo del editor de texto del campo descripción que viene por defecto en las entradas
  • $priority le dice a WordPress dónde cargar el metabox en el contenido. default por defecto
  • $callback_args temas mas complicados que no veremos en esta ocasión

Este código lo meteremos en el archivo functions.php de nuestro tema.

Para nuestro ejemplo en concreto quedaría algo así:

add_meta_box( 'my-meta-box-1', 'Datos adicionales del libro', 'gima_metabox_cb', 'libro', 'normal', 'default' );

Nos quedaría crear una función que nos cree nuestro metabox:

add_action( 'add_meta_boxes', 'gima_metabox_cb' );
function gima_metabox_cb()
{
add_meta_box( 'my-meta-box-3', 'Datos adicionales del libro', 'gima_metabox_cb', 'libro', 'normal', 'default' );
}

Con esto , ya tenemos nuestra metabox creada.

Veremos que nos ha creado una especie de recuadro pero todavía no tenemos ningún tipo de campo personalizado. Ahora es donde viene el código para generar cada tipo de campo.

Para ello, necesitamos hacer uso de la función callback. Dentro de ella meteremos los campos adicionales que necesitemos.

Vamos a ir creando esa función despacio, primero la cabecera de la función y un pequeño texto que añadiremos a modo de información en nuestro metabox.

metaboxes_1

En este código recogemos la información de la entrada en la variable $values y validamos su valor. A continuación insertamos su contenido dentro de $text.

Para añadir un campo de texto necesitaremos el código:

metaboxes_2

En este código añadimos, además del primer campo, un campo select con el tipo de encuadernación. En la comprobación inicial lo que hacemos es recoger los datos del select en la variable $select y comprobar que opción esta seleccionada.

Ahora, vamos a añadir un campo check-box para decir si hay stock o no de dicho libro.

metaboxes_3

Con estos tres ejemplos, podríamos crear cualquier tipo de campo que necesitemos, teniendo siempre en cuenta que hay que recoger la información que recibes de la base de datos y luego colocarla en el campo correspondiente.

Ahora tenemos que guardar los datos, para lo cual necesitamos enganchar con un hook nuestra función al save_post original de WordPress.

metaboxes_4

Este código crea una función que nos permitirá comprobar y guardar los datos introducidos a través de los campos personalizados.

Si no queremos enredar en el código, también hay plugins de WordPress que nos facilitarán la creación de estos campos personalizados, como Metabox  o WordPress Meta Box Plugin.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *