Agregar metabox con cargador de medios en un tipo de entrada personalizada

1 abr 2014, 10:18:47
Vistas: 26.5K
Votos: 4

Necesito crear un "metabox con cargador de medios" y agregarlo a mi tipo de entrada personalizada. Ya he creado metaboxes normales, la función para agregarlos al tipo de entrada personalizada y la función para guardarlos, solo necesito usar el cargador de medios de WordPress pero no logro descubrir cómo hacerlo. Después de eso, me gustaría insertar algo como "Agregar más imágenes" que añada más metaboxes en la página.

Algo como esto: Ejemplo de metabox con cargador de medios de WordPress

8
Comentarios

¿Has intentado algo? Ahora mismo parece que quieres que hagamos tu trabajo por ti. Recursos: Tutorial sobre cómo usar el cargador de medios | Codex: Crear un Metabox | Campos repetitivos | Solución premium lista para usar

helgatheviking helgatheviking
1 abr 2014 10:39:13

No, solo necesito algo para empezar porque solo encontré tutoriales difíciles, pero revisaré el primero que me diste :)

dborghez dborghez
1 abr 2014 11:38:24

Bueno, lo que estás pidiendo es bastante complejo (campos de carga repetitivos), así que es normal esperar que los tutoriales sean desafiantes. Puedes ahorrarte muchos problemas por menos de $25 con la extensión de Advanced Custom Fields.

helgatheviking helgatheviking
1 abr 2014 12:19:08

Sí, pero estoy desarrollando un tema, no puedo incluir un plugin que cuesta :/

dborghez dborghez
1 abr 2014 12:54:17

Su sitio dice esto sobre la licencia "Puedes incluir este complemento en un tema o plugin premium (no gratuito) de WP". No digo que no vayas a obtener una respuesta aquí eventualmente (aunque tendrás que mostrar más esfuerzo), pero también vale la pena pensar en cuánto vale tu tiempo. ¿Qué tan rápido puedes construir algo tan complejo? Si me contrataras, ciertamente te cobraría mucho más de $25 por construir esto. Solo algunos pensamientos.

helgatheviking helgatheviking
1 abr 2014 13:09:10

Gracias por la respuesta. Revisé la documentación y leí que puedo ocultar el ACF para que nadie pueda ver en el panel de administración que lo estoy usando. Probablemente lo tomaré :) Mi "gran problema" es que no quería agregar ningún plugin, intentaría hacer todo por mi mismo leyendo tutoriales y preguntando, pero todavía soy demasiado novato para hacerlo.

dborghez dborghez
1 abr 2014 13:26:47

A veces un plugin es justo lo que necesitas. Estoy a favor de aprender, pero no siempre hay que reinventar la rueda. :) Buena suerte.

helgatheviking helgatheviking
1 abr 2014 13:29:30

Hay un script excelente para esto aquí. Puedes activarlo como un plugin descargable muy simple para verlo funcionar y luego tomar las líneas de js relevantes y usarlas en tu código.

Fanky Fanky
25 oct 2019 13:03:56
Mostrar los 3 comentarios restantes
Todas las respuestas a la pregunta 1
1

Estoy trabajando en algo similar. Esto es para un meta-box de carga de podcast. Devuelve la URL del archivo. Esto es lo que tengo hasta ahora:

//Agregar Metabox
add_action('add_meta_boxes', 'add_upload_file_metaboxes');

function add_upload_file_metaboxes() {
    add_meta_box('swp_file_upload', 'Subir Archivo', 'swp_file_upload', 'podcasts', 'normal', 'default');
}


function swp_file_upload() {
    global $post;
    // Noncename necesario para verificar de dónde se originaron los datos
    echo '<input type="hidden" name="podcastmeta_noncename" id="podcastmeta_noncename" value="'.
    wp_create_nonce(plugin_basename(__FILE__)).
    '" />';
    global $wpdb;
    $strFile = get_post_meta($post -> ID, $key = 'podcast_file', true);
    $media_file = get_post_meta($post -> ID, $key = '_wp_attached_file', true);
    if (!empty($media_file)) {
        $strFile = $media_file;
    } ?>


    <script type = "text/javascript">

        // Subiendo archivos
        var file_frame;
    jQuery('#upload_image_button').live('click', function(podcast) {

        podcast.preventDefault();

        // Si el marco de medios ya existe, reabrirlo.
        if (file_frame) {
            file_frame.open();
            return;
        }

        // Crear el marco de medios.
        file_frame = wp.media.frames.file_frame = wp.media({
            title: jQuery(this).data('uploader_title'),
            button: {
                text: jQuery(this).data('uploader_button_text'),
            },
            multiple: false // Establecer como true para permitir seleccionar múltiples archivos
        });

        // Cuando se selecciona un archivo, ejecutar un callback.
        file_frame.on('select', function(){
            // Establecemos multiple a false para obtener solo una imagen del cargador
            attachment = file_frame.state().get('selection').first().toJSON();

            // aquí están algunas de las variables que podrías usar para el adjunto;
            //var all = JSON.stringify( attachment );      
            //var id = attachment.id;
            //var title = attachment.title;
            //var filename = attachment.filename;
            var url = attachment.url;
            //var link = attachment.link;
            //var alt = attachment.alt;
            //var author = attachment.author;
            //var description = attachment.description;
            //var caption = attachment.caption;
            //var name = attachment.name;
            //var status = attachment.status;
            //var uploadedTo = attachment.uploadedTo;
            //var date = attachment.date;
            //var modified = attachment.modified;
            //var type = attachment.type;
            //var subtype = attachment.subtype;
            //var icon = attachment.icon;
            //var dateFormatted = attachment.dateFormatted;
            //var editLink = attachment.editLink;
            //var fileLength = attachment.fileLength;

            var field = document.getElementById("podcast_file");

            field.value = url; //establecer qué variable quieres que tenga el campo
        });

        // Finalmente, abrir el modal
        file_frame.open();
    });

    </script>



    <div>

        <table>
        <tr valign = "top">
        <td>
        <input type = "text"
    name = "podcast_file"
    id = "podcast_file"
    size = "70"
    value = "<?php echo $strFile; ?>" />
        <input id = "upload_image_button"
    type = "button"
    value = "Subir">
        </td> </tr> </table> <input type = "hidden"
    name = "img_txt_id"
    id = "img_txt_id"
    value = "" />
        </div>     <?php
    function admin_scripts() {
        wp_enqueue_script('media-upload');
        wp_enqueue_script('thickbox');
    }

    function admin_styles() {
        wp_enqueue_style('thickbox');
    }
    add_action('admin_print_scripts', 'admin_scripts');
    add_action('admin_print_styles', 'admin_styles');
}


//Guardando el archivo
function save_podcasts_meta($post_id, $post) {
    // verificar que esto vino de nuestra pantalla y con la autorización adecuada,
    // porque save_post puede activarse en otros momentos
    if (!wp_verify_nonce($_POST['podcastmeta_noncename'], plugin_basename(__FILE__))) {
        return $post -> ID;
    }
    // ¿Tiene el usuario permiso para editar la publicación?
    if (!current_user_can('edit_post', $post -> ID))
        return $post -> ID;
    // Necesitamos encontrar y guardar los datos
    // Lo pondremos en un array para facilitar el bucle.
    $podcasts_meta['podcast_file'] = $_POST['podcast_file'];
    // Agregar valores de $podcasts_meta como campos personalizados

    foreach($podcasts_meta as $key => $value) {
        if ($post -> post_type == 'revision') return;
        $value = implode(',', (array) $value);
        if (get_post_meta($post -> ID, $key, FALSE)) { // Si el campo personalizado ya tiene un valor, lo actualizará
            update_post_meta($post -> ID, $key, $value);
        } else { // Si el campo personalizado no tiene un valor, lo agregará
            add_post_meta($post -> ID, $key, $value);
        }
        if (!$value) delete_post_meta($post -> ID, $key); // Eliminar si el valor está en blanco
    }
}
add_action('save_post', 'save_podcasts_meta', 1, 2); // guardar los campos personalizados
2 abr 2014 04:50:36
Comentarios

Por favor: Reformatea ese código.

kaiser kaiser
2 abr 2014 05:49:04