Añadir botón de subida en metabox
Quiero añadir un botón para subir imágenes y recuperar su URL. ¿Alguien puede ayudarme? Llevo varios días intentándolo. Estoy usando código de este hilo Crear más Meta Boxes según sea necesario.
add_action( 'add_meta_boxes', 'dynamic_add_custom_box' );
/* Hacer algo con los datos ingresados */
add_action( 'save_post', 'dynamic_save_postdata' );
/* Añade un cuadro a la columna principal en las pantallas de edición de Entradas y Páginas */
function dynamic_add_custom_box() {
add_meta_box(
'dynamic_sectionid',
__( 'Información del Cliente', 'myplugin_textdomain' ),
'dynamic_inner_custom_box',
'page');
}
/* Imprime el contenido del cuadro */
function dynamic_inner_custom_box() {
global $post;
// Usar nonce para verificación
wp_nonce_field( plugin_basename( __FILE__ ), 'dynamicMeta_noncename' );
?>
<div id="meta_inner">
<?php
//obtener los metadatos guardados como un arreglo
$ourwork = get_post_meta($post->ID,'ourwork',true);
$c = 0;
if ( is_array( $ourwork ) ) {
foreach( $ourwork as $track ) {
if ( isset( $track['thumb'] ) || isset( $track['client-img1'] ) || isset( $track['client-img2'] ) || isset( $track['client-img3'] ) || isset( $track['client-img4'] ) || isset( $track['client-desc'] ) ) {
printf( '<p><strong>Imagen Miniatura</strong> : <input type="button" name="ourwork[%1$s][thumb]" value="%2$s" size="50" /><br/><br/><strong>Imagen Cliente 1</strong> : <input type="button" name="ourwork[%1$s][client-img1]" value="%3$s" size="50" /><br/><br/>
<strong>Imagen Cliente 2</strong> : <input type="button" name="ourwork[%1$s][client-img2]" value="%4$s" size="50"/><br/><br/>
<strong>Imagen Cliente 3</strong> : <input type="button" name="ourwork[%1$s][client-img3]" value="%5$s" size="50" /><br/><br/>
<strong>Imagen Cliente 4</strong> : <input type="button" name="ourwork[%1$s][client-img4]" value="%6$s" size="50" />
<br/><br/>
<strong>Enlace Cliente 1</strong> : <input type="text" name="ourwork[%1$s][client-link1]" value="%7$s" size="50" />
<br/><br/>
<strong>Descripción Cliente</strong> :<br/><textarea id="elm1" class="tinymce_data" name="ourwork[%1$s][client-desc]" cols="75" rows="6" >%8$s</textarea><br/>
<span class="remove">%9$s</span></p>', $c, $track['thumb'], $track['client-img1'], $track['client-img2'] , $track['client-img3'], $track['client-img4'], $track['client-link1'], $track['client-desc'], __( '<span class="button">Eliminar Sección</span>' ) );
$c = $c +1;
}
}
}
?>
<span id="here"></span>
<span class="add"><?php _e('<span class="button">Añadir Sección</span>'); ?></span>
<script>
var $ =jQuery.noConflict();
$(document).ready(function() {
var count = <?php echo $c; ?>;
$(".add").click(function() {
count = count + 1;
$('#here').append('<p><strong>Imagen Miniatura</strong> : <input type="button" name="ourwork['+count+'][thumb]" value="" size="50"/><br/><br/><strong>Imagen Cliente 1</strong> : <input type="type="button"" name="ourwork['+count+'][client-img1]" value="" size="50"/><br/><br/><strong>Imagen Cliente 2</strong> : <input type="button" name="ourwork['+count+'][client-img2]" value="" size="50"/><br/><br/><strong>Imagen Cliente 3</strong> : <input type="type="button"" name="ourwork['+count+'][client-img3]" value="" size="50"/><br/><br/><strong>Imagen Cliente 4</strong> : <input type="type="button"" name="ourwork['+count+'][client-img4]" value="" size="50"/><br/><br/><strong>Enlace Cliente 1</strong> : <input type="text" name="ourwork['+count+'][client-link1]" value="" size="50"/><br/><br/><strong>Descripción Cliente</strong> :<br/><textarea id="elm1" name="ourwork['+count+'][client-desc]" cols="75" rows="6"></textarea><br/><span class="remove"><span class="button">Eliminar Sección</span></span></p>' );
return false;
});
$(".remove").live('click', function() {
$(this).parent().remove();
});
});
</script>
</div><?php
}
/* Cuando se guarda la entrada, guarda nuestros datos personalizados */
function dynamic_save_postdata( $post_id ) {
// verificar si es una rutina de guardado automático
// Si lo es, nuestro formulario no ha sido enviado, así que no queremos hacer nada
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return $post_id;
// verificar que esto proviene de nuestra pantalla y con la autorización adecuada,
// porque save_post puede activarse en otros momentos
if ( !isset( $_POST['dynamicMeta_noncename'] ) )
return;
if ( !wp_verify_nonce( $_POST['dynamicMeta_noncename'], plugin_basename( __FILE__ ) ) )
return;
// OK, estamos autenticados: necesitamos encontrar y guardar los datos
$ourwork = $_POST['ourwork'];
update_post_meta($post_id,'ourwork',$ourwork);
}
así es como hago para crear un botón de subida en metabox:
ARCHIVO: template_dir/functions.php
agrega estas líneas:
wp_enqueue_script('custom-js', get_template_directory_uri().'/js/custom-js.js');
// Añadir el Meta Box
function add_custom_meta_box() {
add_meta_box(
'custom_meta_box', // $id
'Meta Box Personalizado', // $title
'show_custom_meta_box', // $callback
'post', // $page
'normal', // $context
'high'); // $priority
}
add_action('add_meta_boxes', 'add_custom_meta_box');
// Array de Campos
$prefix = 'custom_';
$custom_meta_fields = array(
array(
'name' => 'Imagen',
'desc' => 'Una descripción para el campo.',
'id' => $prefix.'image',
'type' => 'image'
)
);
// El Callback
function show_custom_meta_box() {
global $custom_meta_fields, $post;
// Usar nonce para verificación
echo '';
// Comenzar la tabla de campos y loop
echo '';
foreach ($custom_meta_fields as $field) {
// obtener valor de este campo si existe para este post
$meta = get_post_meta($post->ID, $field['id'], true);
// comenzar una fila de tabla con
echo '
'.$field['label'].'
';
switch($field['type']) {
// casos irán aquí
// imagen
case 'image':
$image = get_template_directory_uri().'/images/image.png';
echo ''.$image.'';
if ($meta) { $image = wp_get_attachment_image_src($meta, 'medium'); $image = $image[0]; }
echo '
<br/>
Eliminar Imagen
'.$field['desc'].'';
break;
} //fin switch
echo '';
} // fin foreach
echo ''; // fin tabla
}
// Guardar los Datos
function save_custom_meta($post_id) {
global $custom_meta_fields;
// verificar nonce
if (!wp_verify_nonce($_POST['custom_meta_box_nonce'], basename(__FILE__)))
return $post_id;
// comprobar autoguardado
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
return $post_id;
// comprobar permisos
if ('page' == $_POST['post_type']) {
if (!current_user_can('edit_page', $post_id))
return $post_id;
} elseif (!current_user_can('edit_post', $post_id)) {
return $post_id;
}
// recorrer campos y guardar los datos
foreach ($custom_meta_fields as $field) {
$old = get_post_meta($post_id, $field['id'], true);
$new = $_POST[$field['id']];
if ($new && $new != $old) {
update_post_meta($post_id, $field['id'], $new);
} elseif ('' == $new && $old) {
delete_post_meta($post_id, $field['id'], $old);
}
} // fin foreach
}
add_action('save_post', 'save_custom_meta');
ARCHIVO: template_dir/js/custom-js.js
jQuery(function(jQuery) {
jQuery('.custom_upload_image_button').click(function() {
formfield = jQuery(this).siblings('.custom_upload_image');
preview = jQuery(this).siblings('.custom_preview_image');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
classes = jQuery('img', html).attr('class');
id = classes.replace(/(.*?)wp-image-/, '');
formfield.val(imgurl); //obtener url de imagen y copiar al campo
preview.attr('src', imgurl);
tb_remove();
}
return false;
});
jQuery('.custom_clear_image_button').click(function() {
var defaultImage = jQuery(this).parent().siblings('.custom_default_image').text();
jQuery(this).parent().siblings('.custom_upload_image').val('');
jQuery(this).parent().siblings('.custom_preview_image').attr('src', defaultImage);
return false;
});
});
Si deseas añadir más tipos de campos puedes aprender más en: Cajas de Meta Personalizables Reutilizables Parte 1: Introducción y Campos Básicos

Existe un excelente framework para interactuar con Metaboxes que es razonablemente fácil de usar (bien documentado) e incluye soporte para múltiples opciones de metaboxes, incluyendo carga de imágenes/archivos. Está en Github: Custom Metaboxes and Fields (CMB). Si decidieras usar CMB, este sería un enfoque para implementar un campo de carga.
Necesitarías registrar el metabox para carga de archivos y agregar una llamada al archivo init.php
de CMB usando el siguiente código en tu archivo functions.php
:
function be_sample_metaboxes( $meta_boxes ) {
$prefix = '_cmb_'; // Prefijo para todos los campos
$meta_boxes['test_metabox'] = array(
'id' => 'test_metabox',
'title' => 'Metabox de Prueba',
'pages' => array('post'), // tipo de post (ej. post, page, etc.)
'context' => 'normal',
'priority' => 'high',
'show_names' => true, // Mostrar nombres de campos a la izquierda
'fields' => array(
array(
'name' => __( 'Imagen de Prueba', 'cmb' ),
'desc' => __( 'Sube una imagen o ingresa una URL.', 'cmb' ),
'id' => $prefix . 'test_image',
'type' => 'file',
),
),
);
return $meta_boxes;
}
add_filter( 'cmb_meta_boxes', 'be_sample_metaboxes' );
// Inicializar la clase de metabox
add_action( 'init', 'be_initialize_cmb_meta_boxes', 9999 );
function be_initialize_cmb_meta_boxes() {
if ( !class_exists( 'cmb_Meta_Box' ) ) {
require_once( './metabox/init.php' );
}
}
La línea require_once( './metabox/init.php' );
en la segunda función asume que has colocado los archivos de CMB Metabox en una carpeta dentro de tu directorio de tema llamada metabox
. Luego, para llamar esta opción en tu plantilla (ej. single.php
) podrías usar la siguiente función:
$file = get_post_meta( $post->ID, '_cmb_test_image', true );
