INICIO

CREAR CAMPOS PERSONALIZADOS | AÑADIR META-BOXES EN WORDPRESS

Situación: Estás creando un contenido (post) en WordPress.

Problema: Necesitas que haya un campo extra, aparte de título y contenido.

Por ejemplo:

Vamos a ver cómo hacerlo paso a paso.

Breve descripción | Metadatos y Metaboxes

En tus posts, sean del tipo que sean, puedes asociar una serie de metadatos.

Meta-Datos

Los metadatos son informaciones extra que pueden ser de cualquier tipo y para cubrir cualquier necesidad.

Por eso en WordPress puedes añadir los metadatos que tú quieras.

Los metadatos se pueden añadir de forma manual en la base de datos, o de forma programacional mediante algún código en ciertas ocasiones, pero lo más natural es querer añadirlos de forma manual junto a la creación de cada contenido.

Meta-Boxes

Un meta-box es una caja para añadir metadatos.

Esta caja aparecerá en el editor de contenidos de WordPress.

Cómo añadir Meta-Boxes personalizados

Muy fácil.

Vamos a hacerlo paso a paso.

Paso 1: Elegir dónde añadir esta funcionalidad.

Lo recomendable es hacerlo mediante plugins, para tener el control absoluto sobre el mismo y no perderlo de vista a la hora de querer modificarlo.

Paso 2: Ejecutar las acciones en el momento oportuno.

El momento oportuno es exactamente cuando el motor de WordPress carga la pantalla de edición de un post (tanto de uno existente como de uno nuevo).

/* Ejecutar las funciones al cargar la pantalla de edición. */
add_action( 'load-post.php', 'super_post_meta_boxes' );
add_action( 'load-post-new.php', 'super_post_meta_boxes' );

Fácil.

Paso 3: Definir la función que se está llamando.

Hemos dicho que ejecutaremos la función super_post_meta_boxes(), y la hemos llamado así pero podría llamarse de otra forma.

Vamos a definirla.

/* La función de la que estamos hablando. */
function super_post_meta_boxes() {

  /* Acción para añadir todos los metaboxes que quiero. */
  add_action( 'add_meta_boxes', 'crear_mis_super_metaboxes' );

  /* Acción para guardar los datos al guardar el post. */
  add_action( 'save_post', 'guardar_mis_super_metaboxes', 10, 2 );
}

Bien.

Hasta aquí solo hemos dicho que hay que avisar a una función cuando estemos en la pantalla de edición.

Esa función super_post_meta_boxes() se encarga de hacer dos cosas:

Bien.

Paso 4: Proceder a la creación de los meta-boxes.

Yo voy a crear a modo de ejemplo, una caja para añadir HTML Personalizado al final del artículo.

Quiero que sea HTML propio que no esté filtrado por el editor de WordPress y que puedo tratar de forma independiente por si quiero mostrarlo en un sitio o en otro.

/* Función para crear todos los meta-boxes que necesito */
function crear_mis_super_metaboxes() {

  /* Función de creación de un meta-box para HTML PERSONALIZADO */
  add_meta_box(
    'super-html-personalizado',           // ID Único
    'HTML Personalizado',                 // Título
    'mostrar_metabox_html_personalizado', // Callback
    'post',     // Tipo de post
    'side',     // Sitio en el que aparece
    'default'   // Prioridad
  );

  /* Si necesitas más, pones más */

}

La descripción es bastante clara, copia-pega y sustituye valores para definir el metabox que quieres crear.

Si necesitas más de uno copia la función add_meta_box() varias veces con nuevos parámetros.

Para sitio y prioridad puedes usar los siguientes valores:

Sitio:

Prioridad:

También has visto que hay que definir una función callback.

Esta es necesaria para mostrar el metabox en la pantalla de edición.

Nosotros lo hemos creado, pero ahora hay que decir cómo queremos mostrarlo, y de eso se encarga la función que definiremos a continuación.

Paso 5: Mostrando el metabox en la pantalla de edición.

Mostraré un campo textarea porque es algo común y que viene al dedo para poner html personalizado en este metadato, pero puedes añadir lo que necesites.

/* Función para mostrar el meta-box creado en la pantalla de edición. */
function mostrar_metabox_html_personalizado( $object, $box ) {
?>

  <?php wp_nonce_field( basename( __FILE__ ), 'metakey_html_personalizado_nonce' ); ?>

  <p>
    <label for="metadato_html_personalizado">Añade HTML Personalizado al final del artículo.</label>
    <br />
    <textarea name="metadato_html_personalizado" id="metadato_html_personalizado"><?php echo esc_textarea( get_post_meta( $object->ID, 'metakey_html_personalizado', true ) );  ?></textarea>
  </p>
<?php
}

En el valor del textarea estamos llamando al antiguo valor del metadato, si es que este estaba definido.

Porque queremos que siga ahí al editar el contenido, ¿verdad?.

Puede extrañarte el concepto de meta_key.

Pues que no te asuste, ese es el nombre que recibe el identificador del metadato.

Será el identificador que usaremos para guardar ese metadato y para usarlo cuando nos haga falta.

También puede extrañarte la función que habla de nonce field.

Eso es un método de seguridad que va implementado en WordPress para evitar que alguien te cuele datos sin darte cuenta.

Si no sabes de qué trata no te asustes, basta con informarse.

Paso 6: Función de guardado de metadatos.

Hemos creado un metabox para añadir metadatos personalizados al artículo.

Pero de nada nos sirve si no guardamos la información al editarla.

Al pulsar el botón de actualizar o publicar el post, se ejecutará la segunda acción que hemos definido en el paso 3, que es una llamada a la función guardar_mis_super_metaboxes().

Vamos a construirla:

/* Actualizar los metadatos del post. */
function guardar_mis_super_metaboxes( $post_id, $post ) {

  /* Verificar el nonce antes de proceder. */
  if ( !isset( $_POST['metakey_html_personalizado_nonce'] ) || !wp_verify_nonce( $_POST['metakey_html_personalizado_nonce'], basename( __FILE__ ) ) )
    return $post_id;

  /* Obtener el tipo de post al que están asociados los metadatos. */
  $post_type = get_post_type_object( $post->post_type );

  /* Comprobar si el usuario actual tiene permisos para editar esos metadatos. */
  if ( !current_user_can( $post_type->cap->edit_post, $post_id ) )
    return $post_id;

  /* En este punto puedes filtrar los datos si necesitas filtrarlos para forzar algún tipo de valor. */
  $new_meta_value = ( isset( $_POST['metadato_html_personalizado'] ) ? $_POST['metadato_html_personalizado'] : '' );

  /* Cuál es la meta_key que estoy editando. */
  $meta_key = 'metakey_html_personalizado';

  /* Obtener el valor asociado a ese meta_key. */
  $meta_value = get_post_meta( $post_id, $meta_key, true );

  /* Si se ha añadido un metadato que no existía anteriormente, lo hacemos. */
  if ( $new_meta_value && '' == $meta_value )
    add_post_meta( $post_id, $meta_key, $new_meta_value, true );

  /* Si ya había un metadato para esa meta_key pero es nuevo, lo actualizamos. */
  elseif ( $new_meta_value && $new_meta_value != $meta_value )
    update_post_meta( $post_id, $meta_key, $new_meta_value );

  /* Si no se ha escrito nada para el metadato pero ya estaba definido antes, borramos el antiguo. */
  elseif ( '' == $new_meta_value && $meta_value )
    delete_post_meta( $post_id, $meta_key, $meta_value );
}

¡Muy bien!

¿Ahora qué falta?

Paso 7: Usando el contenido de ese metadato en cualquier sitio.

Muy sencillo.

$html_personalizado = get_post_meta( $post_id, 'metakey_html_personalizado', true );

El primer y el segundo parámetro son el id del post al que está asociado el metadato y el meta_key identificador del metadato.

El tercer parámetro especifica si devolver un valor único o una matriz.

Siempre vas a querer usarlo como true, a no ser que estés asociando múltiples valores a la misma meta_key, que tiene su utilidad en otros casos que quizás pueden resultar algo más complejos.

Descarga el ejemplo

He creado el plugin con todo el ejemplo para que no tengas que andar copiando y pegando.

Puedes descargarlo y editarlo a tu gusto.

Enlace: Descargar Super Meta Boxes.

No te pierdas el listado completo de recursos para desarrolladores web.