Vemos como crear los campos personalizados en las entradas de wordpress manualmente.
Cómo ya comentamos en el artículo sobre los Custom Post Type, una vez que creamos un tipo de entrada personalizada podemos además añadirle campos personalizados para darle un aspecto totalmente personalizado.
En Wordpress podemos hacer esto de una forma manual o mediante algunos plugins que ya comentamos en el artículo anterior. Pero hoy nos centraremos en la creación manual mediante código.
Antes de pasar a ver el código tenemos que aclarar que este proceso nos vale para los Custom Post Type y para las entradas por defecto (Entradas y Páginas).
Para el artículo partiremos del ejemplo utilizado en el articulo de las Custom Post Type. Vamos a crear campos personalizados a la entrada del tipo libro.
El código necesario para añadir un metabox es el siguiente:
<?php add_meta_box( $id, $title, $callback, $page, $context, $priority, $callback_args ); ?>Donde:
- $id es el ID html del metabox
- $title 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, en nuestro caso deberá ser libro
- $context dentro de la entrada donde queremos que se muestra, 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 todas las entradas
- $priority le dice a Wordpress dónde cargar el metabox en el contenido. Por defecto dejaremos a default
- $callback_args temas mas complicados que no necesitamos para nuestro cometido de hoy
Este código lo tenéis que meter en el archivo functions.php de nuestro tema y para nuestro ejemplo en concreto podría quedar 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 tenemos nuestra metabox creada pero si vamos a ver que ha pasado veremos que nos ha creado una especie de recuadro pero todavía no tenemos ningún tipo de campo personalizado. Bien pues ahora es donde viene el código para generar cada tipo de campo.
Para ello necesitamos hacer uso de la función callback que mencionamos anteriormente.
Dentro de ella meteremos todos los campos adicionales que necesitemos.
Por ejemplo vamos a ir creando esa función poco a poco. Lo primero la cabecera de la función y un pequeño texto que añadiremos a modo de información en nuestro metabox.
function gima_metabox_cb( $post )
{
?>
<p>Aquí pondremos todo el contenido de nuestro metabox</p>Campo de texto
Para añadir un campo de texto necesitaremos el siguiente código
function gima_metabox_cb( $post )
{
$values = get_post_custom( $post->ID );
$text = isset( $values['my_meta_box_text'] ) ? esc_attr( $values['my_meta_box_text'][0] ) : '';
?>
<p>
<label for="my_meta_box_text">ISBN</label>
<input type="text" name="my_meta_box_text" id="my_meta_box_text" value="<?php echo $text; ?/>" />
</p>
<?php
}En este código lo que hacemos es primero recoger la información de la entrada en la variable $values y validando su valor. A continuación insertamos su contenido dentro de $text.
Campo select
Para añadir un campo de texto necesitaremos el siguiente código
function gima_metabox_cb( $post )
{
$values = get_post_custom( $post->ID );
$text = isset( $values['my_meta_box_text'] ) ? esc_attr( $values['my_meta_box_text'][0] ) : '';
$selected = isset( $values['my_meta_box_select'] ) ? esc_attr( $values['my_meta_box_select'][0] ) : '';
?>
<p>
<label for="my_meta_box_text">ISBN</label>
<input type="text" name="my_meta_box_text" id="my_meta_box_text" value="<?php echo $text; ?/>" />
</p>
<p>
<label for="my_meta_box_select">Tipo de encuadernación</label>
<select name="my_meta_box_select" id="my_meta_box_select">
<option value="rustica" <?php selected( $selected, 'rustica' ); ?>>Rústica</option>
<option value="pegada" <?php selected( $selected, 'pegada' ); ?>>Pegada</option>
<option value="cosida" <?php selected( $selected, 'cosida' ); ?>>Cosida</option>
</select>
</p>
<?php
}En este código hemos añadido 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.
Check-box
Ahora vamos a añadir un campo check-box para decir si hay stock o no de dicho libro.
function gima_meta_box_cb( $post )
{
$values = get_post_custom( $post->ID );
$text = isset( $values['my_meta_box_text'] ) ? esc_attr( $values['my_meta_box_text'][0] ) : '';
$selected = isset( $values['my_meta_box_select'] ) ? esc_attr( $values['my_meta_box_select'][0] ) : '';
$check = isset( $values['my_meta_box_check'] ) ? esc_attr( $values['my_meta_box_check'] ) : '';
?>
<p>
<label for="my_meta_box_text">ISBN</label>
<input type="text" name="my_meta_box_text" id="my_meta_box_text" value="<?php echo $text; ?/>" />
</p>
<p>
<label for="my_meta_box_select">Tipo de encuadernación</label>
<select name="my_meta_box_select" id="my_meta_box_select">
<option value="rustica" <?php selected( $selected, 'rustica' ); ?>>Rústica</option>
<option value="pegada" <?php selected( $selected, 'pegada' ); ?>>Pegada</option>
<option value="cosida" <?php selected( $selected, 'cosida' ); ?>>Cosida</option>
</select>
</p>
<p>
<input type="checkbox" id="my_meta_box_check" name="my_meta_box_check" <?php checked( $check, 'on' ); ?/> />
<label for="my_meta_box_check">Libro disponible en Stock</label>
</p>
<?php
}Cómo puedes ver el código no varía mucho y con estos tres ejemplos podrías crear cualquier tipo de campo que necesites. Siempre tienes que tener en cuenta que hay que recoger la información que recibes de la base de datos y luego colocarlo en el campo correspondiente.
Ahora que ya tenemos nuestra estructura creada tenemos que guardar los datos que le pasemos para ello tenemos que hacer una serie de acciones que paso a detallar.
Guardado de datos
Para guardar estos datos necesitamos enganchar con un hook nuestra función al save_post original de Wordpress.
add_action('save_post','gima_metabox_save');
function gima_metabox_save( $post_id )
{
// Bail if we're doing an auto save
if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
// if our current user can't edit this post, bail
if( !current_user_can( 'edit_post' ) ) return;
// now we can actually save the data
$allowed = array(
'a' => array( // on allow a tags
'href' => array() // and those anchors can only have href attribute
)
);
if( isset( $_POST['my_meta_box_text'] ) )
update_post_meta( $post_id, 'my_meta_box_text', wp_kses( $_POST['my_meta_box_text'], $allowed ) );
if( isset( $_POST['my_meta_box_select'] ) )
update_post_meta( $post_id, 'my_meta_box_select', esc_attr( $_POST['my_meta_box_select'] ) );
$check = isset( $_POST['my_meta_box_check'] ) && $_POST['my_meta_box_select'] ? 'on' : 'off';
update_post_meta( $post_id, 'my_meta_box_check', $check );
}Este código lo que hace es crear una función que nos permite comprobar y guardar los datos que introducen a través de los campos personalizados.
Hay partes del código que puedes encontrar en el codex de wordpress y que están perfectamente explicadas.