Añadir botón de subida en metabox

7 ago 2013, 13:24:47
Vistas: 17.7K
Votos: 4

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> &nbsp;:&nbsp;<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 &nbsp;&nbsp;&nbsp;&nbsp;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> &nbsp;:&nbsp;<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 &nbsp;&nbsp;&nbsp;&nbsp;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);
}
2
Comentarios

Hice una publicación en el blog sobre esto, por favor revisa: http://www.derby-web-design-agency.co.uk/blog-post/how-to-create-multiple-wordpress-3-5-media-uploaders-in-theme-options/27/ Creo que esto es a lo que te refieres :)

Robert Robert
7 ago 2013 21:46:05

Posible duplicado de Agregar correctamente un botón de carga de medios en un campo de meta box

T.Todua T.Todua
1 sept 2016 16:38:13
Todas las respuestas a la pregunta 2
0

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

4 feb 2014 12:32:51
0

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 );
17 mar 2014 01:33:13