Mostrar campos personalizados en WordPress (Metabox 2)

Campos personalizados en WordPress, insertar imágenes y archivos al "Metabox".

Seguimos con nuestro ejemplo anterior de campos personalizados en WordPress y vamos a ver cómo insertamos imágenes dentro del metabox "Información de los libros".

En el Snippet  que ya tenemos creado con el nombre de "Metabox" ,  añadiremos el código que nos hará falta para las imágenes:

Para insertar la imagen nos hará falta el siguiente Código :

Esta primera línea será para añadir el campo imagen.


$imagen = get_post_meta( $post->ID, 'imagen', true );

Estas otras líneas de código son para crear un campo de texto donde pondremos la "URL de la imagen", que habremos subido previamente a la Biblioteca de medios.


<tr>
<td><strong>Imagen : </strong></td>
<td><input type="text" name="imagen" value="<?php echo sanitize_text_field($imagen);?>" class="large-text" placeholder="URL de la imagen" /></td>
</tr>


Y estas otras son para mostrar la imagen, con html, la mostraremos  usando  <img src="URL">  y el tamaño que definimos en width:

if( isset( $custom_fields['imagen'] ) ) {
$content .= '<img class="imagen" width="150px;" height="auto" src="'. $custom_fields['imagen'][0] .'" </li><br>';
}


Para subir el archivo descargable nos hará falta el siguiente Código :

Esta primera línea será para añadir el campo archivo.

$archivo = get_post_meta( $post->ID, 'archivo', true );

Estas otras líneas de código son para crear un campo de texto donde pondremos la "URL del archivo", que habremos subido previamente a la Biblioteca de medios.

<tr>
<td><strong>Archivo : </strong></td>
<td><input type="text" name="archivo" value="<?php echo sanitize_text_field($archivo);?>" class="large-text" placeholder="URL del archivo" /></td>
</tr>

Y estas otras son para mostrar el link para la descarga del archivo, con html usando  <a href="URL">  y el texto que queremos que se vea para la descarga.

if( isset( $custom_fields['archivo'] ) ) {
$content .= '<a class="boton"style="color:blue" href="'. $custom_fields['archivo'][0] . '">Descargar libro</a>';


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.

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 un próximo post veremos cómo crear Custom Post Type (tipos de entradas personalizadas).

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.