Labarta

vista-12

 

Campos personalizados en WordPress (Metabox)

 

Si siempre vamos a usar los mismos campos personalizados en WordPress, lo lógico es crear un "Metabox". 

 

Para definir que es Metabox de una manera muy rápida, podríamos decir que es una caja con metadatos (una sección que agrupa nuestros campos personalizados en WordPress) .

Ver imagen:

 

meta-box

 

Seguimos con nuestro ejemplo anterior y vamos a poner como título del metabox "Información de los libros".

Para crear el metabox vamos a usar la información que hay en en el codex de WordPress .

Nos hará falta agregar este código al  functions.php  de nuestro tema. 

Pero yo voy crear un Snippet , para ello tenemos que subir el plugin Code Snippets   y activarlo. Creamos un  snippet  que podemos darle el nombre de "Metabox" ,  pegamos el código y activamos el Snippet.

 

code-snippet

 

Código a insertar :


function jml_metabox() {
add_meta_box( 'libros-metabox', 'Información de los libros', 'campos_libros', 'post', 'normal', 'high' );
}
add_action( 'add_meta_boxes', 'jml_metabox' );

Ahora ya está disponible en el escritorio, pero nos falta añadir los campos.

 

metabox-2

 

En nuestro ejemplo vamos a poner los tres:

  • Libro 
  • Autor 
  • Formato

añadimos el siguiente código: 


function campos_libros($post) {
$libro = get_post_meta( $post->ID, 'libro', true );
$autor = get_post_meta( $post->ID, 'autor', true );
$formato = get_post_meta( $post->ID, 'formato', true );

Pero también tenemos que añadir todos los nombres de los campos, definir que tipos de datos entraremos, ya sea texto, área de texto, checkbox, de selección, etc.

En nuestro ejemplo usaremos dos campos de texto, uno para  Libro y otro para  Autor.  Y un campo de selección para  Formato.

En este campo de selección haremos un array con los siguientes valores a seleccionar:

  • ePub
  • Mobi
  • Papel
  • Pdf
  • Txt

 

Como ahora los datos a mostrar siempre serán los mismos lo más apropiado es hacerlo con código en el mismo archivo que el metabox.

En esta ocasión no vamos a usar shortcodes, esto es muy útil cuando los campos son muy diferentes en cada entrada.

Para mostrar los campos añadiremos el siguiente código:

 

add_filter( 'the_content', 'jml_add_custom_fields_to_content' );
function jml_add_custom_fields_to_content( $content ) {
$custom_fields = get_post_custom();
$content .= "<div class='campos'>";
if( isset( $custom_fields['libro'] ) ) {
$content .= '<li>Libro: '. $custom_fields['libro'][0] . '</li>';
}
if( isset( $custom_fields['autor'] ) ) {
$content .= '<li>Autor: ' . $custom_fields['autor'][0] . '</li>';
}
if( isset( $custom_fields['formato'] ) ) {
$content .= '<li>Formato: ' . $custom_fields['formato'][0] . '</li>';
$content .= '</div>';
}
return $content;

 

vista-snippet

 

Con todo el código añadido a nuestro  snippet  aunque actualicémos el tema o que hagamos un cambio de tema, no vamos a perder nada.

Perfecto funciona bien y además podemos maquetarlo usando etiquetas html desde el editor en la pestaña HTML, modificando: tamaño letra, color, etc. etc.

Una opción fácil y que funciona a las mil maravillas, tanto en entradas como en páginas.

 

vista-campos

 

Espero con este artículo poder ayudar a alguna persona que esté lidiando con este tema de ver la forma de mostrar los campos personalizados en WordPress.

En una próxima entrada veremos cómo añadir campos, en nuestro metabox,  de imágenes y archivos para su descarga.

 

Descargar el código de este artículo.

También puedes descargar desde el repositorio de WordPress el plugin WP Documents Library y modificarlo a tu gusto. 

Si te ha gustado este artículo, por favor, comparte - Gracias -


Artículos Relacionados