Ya hemos visto como crear y configurar un plugin, aunque hasta ahora la funcionalidad no ha sido precisamente demasiada, en está y las próximas entradas vamos a integrar nuestros plugins en WP. Comenzaremos explicando que es y como crear un metacuadro…

WordPress dispone de diferentes metacuadros en las pantallas para añadir páginas y entradas y se utilizan para añadir información adicional, contenido…

Podemos crear un metacuadro a través de la función add_meta_box() que tiene la siguiente sintaxis:

<?php add_meta_box($id, $titulo, $callback, $pagina, $contexto, $prioridad, $callback_args); ?>

Los parámetros que recibe nos serviran para definir dónde y como mostrar el metacuadro y su significado es:

• $id: El atributo de ID CSS
• $titulo: El título de encabezado del cuadro
• $callback: El nombre de la funcion personalizada para mostrar la información del cuadro
• $page: La página en la que se mostrará el cuadro, puede ser ‘post’, ‘page’ o el nombre de un tipo de entrada personalizado
• $contexto: La parte de la página en la que mostrar el cuadro que puede ser ‘normal’, ‘advanced’ o ‘side’ 
• $prioridad: La prioridad del contexto en el que mostrar el cuadro ‘high’, ‘core’, ‘default’ o ‘low’
• $callback_args: Los argumentos que se pasan a la función de retrollamada

De este modo y conociendo los argumentos de la función ya podemos crear un metacuadro de ejemplo:

add_action('add_meta_boxes', 'prowp_meta_box_init');
//funciones de metacuadro para añadir el metacuadro y guardar los datos
function prowp_meta_box_init(){
	//crea el metacuadro
	add_meta_box('prowp-meta', 'Información', 'prowp_meta_box', 'post', 'side', 'default');
}

Con este código, aunque ya aparezca el metacuadro, nos dará un error al no haber definido la función del callback, pero ya se puede jugar con él para ir viendo como funcionan los parámetros de contexto y prioridad.

Como de costumbre el primer paso consiste en usar el conector de acción add_meta_boxes para ejecutar nuestra función personalizada que es la que construirá nuestro metacuadro.

Una vez ya dentro de los atributos declaramos la ID CSS como prowp-meta, introducimos el título del metacuadro (Información), después la función personalizada (prowp_meta_box), el tipo de página donde queremos que aparezca el metacuadro, en que parte de la página de creación de la entrada y el orden de prioridad.

A continuación creamos la función personalizada que hemos introducido para mostrar los campos del cuadro:

function prowp_meta_box( $post, $box ) {
    
    //recuperamos los valores del cuadro
    $prowp_featured = get_post_meta( $post->ID, '_prowp_type', true );
    $prowp_price = get_post_meta( $post->ID, '_prowp_price', true );

    //nonce para seguridad
    wp_nonce_field( plugin_basename( __FILE__ ), 'prowp_save_meta_box' );
    
    //creamos los campos del metacuadro
    echo 'Precio: <input type="text" name="prowp_price" value="'.esc_attr( $prowp_price ).'" size="5" />\n';
    echo 'Tipo: 
        <select name="prowp_product_type" id="prowp_product_type">
<option value="0" ' .selected( $prowp_featured, 'normal', false ). '>Normal</option>
<option value="special" ' .selected( $prowp_featured, 'special', false ). '>Especial</option>
<option value="featured" ' .selected( $prowp_featured, 'featured', false ). '>Featured</option>
<option value="clearance" ' .selected( $prowp_featured, 'clearance', false ). '>Clearance</option>
        </select>\n';
    
}

Lo primero que hace nuestra función personalizada es recuperar los valores guardados para el cuadro, si se va a crear una nueva entrada todavía no habrá valores guardados.

Tras esto se muestran los elementos del formulario en el cuadro. Donde podemos observar que no son necesarias las etiquetas <form> ni un botón de envío, el propio WP se encarga de realizar estas funciones, ademas se utiliza la función wp_nonce_field() para crear un campo nonce personalizado en el formulario.

A estas alturas nuestro metacuadro ya aparece en pantalla de una forma elegante, tal y como vemos en la siguiente figura:

Una vez que tenemos creado el metacuadro y sus elementos, tenemos que guardar los datos al alamacenar la entrada, para lo que vamos a crear una función personalizada prowp_save_mea_box() que se activará por el conector de acción save_post 

//conector para guardar los datos del metacuadro al guardar la entrada
add_action( 'save_post', 'prowp_save_meta_box' );

function prowp_save_meta_box( $post_id ) {
    
    //si se establece $_POST, procesa los datos del formulario
    if( isset( $_POST['prowp_product_type'] ) ) {
	
		//si existe guardado automatico no guardar los datos del metacuadro
		if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) 
			return;

		//comprueba el nonce por motivos de seguridad
		check_admin_referer( plugin_basename( __FILE__ ), 'prowp_save_meta_box' );
        
        //guarda los datos del cuadro como entrada meta con el ID de la entrada como prefijo exclisivo
        update_post_meta( $post_id, '_prowp_type', sanitize_text_field( $_POST['prowp_product_type'] ) );
        update_post_meta( $post_id, '_prowp_price', sanitize_text_field( $_POST['prowp_price'] ) );
        
    }
    
}

El conector save_post se ejecuta siempre que guardemos la entrada.

Como solo vamos trabajar con los metadatos personalizados del cuadro, lo primero es verificar que se ha establecido el valor de $_POST[‘prowp_product_type’]. Tras ello comprobamos que la entrada guardada se haya guardado activamente y no por guardado automático, guardando los datos solo si se ha guardado de forma activa.

El siguiente paso consiste en comprobar que el valor de nonce es el esperado, si se han establecido los elementos del formulario, se guardan los datos. Una vez superadas todas las comprobaciones, se utiliza update_post_meta() para guardar los datos de cuadro como metadatos de la entrada.

Podemos observar, se envia la ID de la entrada en primer lugar como primer parámetro de update_post_meta(). Así le decimos a WP a que entrada se adjuntan los metadatos. Tras ello se pasa el nombre de la clave que actualizar, en el cual se utiliza un guión bajo como prefijo, impidiendose de este modo que esos valores aparezcan en lo campos personalizados del cuadro en la pantalla de edición de entradas, ya que hemos proporcionado un ID para editar estos valores no los necesita en el cuadro de campos personalizados. El último parámetro enviado es el nuevo valor de la clave, que se sanea con función sanitize_text_field().

De esta forma se crea un metacuadro totalmente funcional que guarda los datos.

Mostrando la información del metacuadro

Ahora bien, es muy probable que queramos mostrar la información guardada en nuestro metacuadro cuando se muestre la entrada, para ello debemos de utilizar la función get_post_meta() dentro del bucle de nuestro código, pero hay que tener en cuenta que hay que ponerlo en el tipo de entrada que estamos utilizando, ya sea un articulo, una página o una entrada personalizada.

En nuestro código sería algo sería algo parecido a lo siguiente:

<?php $prowp_type = $get_post_meta($post->ID, '_prowp_type', true);
	$prowp_price = $get_post_meta($post->ID, '_prowp_price', true);
	echo 'Precio: ' .esc_html($prowp_price).'\n';
	echo 'Tipo: ' .esc_html($prowp_type).'\n';
?>

De esta forma ya tendríamos el metacuadro activo y mostrando la información a los visitantes de la web.

Con esto ya empezamos a ver como se integran los plugins en wordpress y podemos tener multitud de opciones para nuestras webs…