Wordpress 3.5 carga de medios personalizados para sus opciones de tema


Wordpress 3.5 ha sido lanzado recientemente, He utilizado el sistema de carga de medios de Wordpress a través de thickbox y window.send_to_editor para algunas opciones en mi tema de Wordpress (fondos, logotipos, etc...).

Pero como usted sabe Wordpress ha integrado un nuevo Gestor de medios, quería utilizar esta nueva característica para cargar imágenes/archivos como campos personalizados. Así que pasé la mañana para encontrar una manera de obtener el resultado deseado.

Encontré con esta solución, que puede ser útil para algunos de ustedes. Gracias por darme tu comentarios sobre el código o cualquier mejora que tenga en mente!

Ejemplo HTML:

<a href="#" class="custom_media_upload">Upload</a>
<img class="custom_media_image" src="" />
<input class="custom_media_url" type="text" name="attachment_url" value="">
<input class="custom_media_id" type="text" name="attachment_id" value="">

Código jQuery:

$('.custom_media_upload').click(function() {

    var send_attachment_bkp = wp.media.editor.send.attachment;

    wp.media.editor.send.attachment = function(props, attachment) {

        $('.custom_media_image').attr('src', attachment.url);
        $('.custom_media_url').val(attachment.url);
        $('.custom_media_id').val(attachment.id);

        wp.media.editor.send.attachment = send_attachment_bkp;
    }

    wp.media.editor.open();

    return false;
});

Si desea ver todas las configuraciones contenidas en la variable attachment, puede hacer un console.log(attachment) o alert(attachment).

Author: ROMANIA_engineer, 2012-12-13

5 answers

No olvides usar wp_enqueue_media (nuevo en 3.5) si no estás en la página de edición de publicaciones

Para usar el cuadro de carga de medios antiguos, puede hacer esto:

if(function_exists( 'wp_enqueue_media' )){
    wp_enqueue_media();
}else{
    wp_enqueue_style('thickbox');
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
}
 31
Author: Xaver,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-12-16 17:42:24

Lo estás haciendo de una manera que no fue intencionada. Su código javascript probablemente debería verse algo como esto:

$('.custom_media_upload').click(function(e) {
    e.preventDefault();

    var custom_uploader = wp.media({
        title: 'Custom Title',
        button: {
            text: 'Custom Button Text'
        },
        multiple: false  // Set this to true to allow multiple files to be selected
    })
    .on('select', function() {
        var attachment = custom_uploader.state().get('selection').first().toJSON();
        $('.custom_media_image').attr('src', attachment.url);
        $('.custom_media_url').val(attachment.url);
        $('.custom_media_id').val(attachment.id);
    })
    .open();
});
 34
Author: DiverseAndRemote.com,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-17 03:41:44

He modificado este código un poco más para hacerlo utilizable para múltiples campos a la vez:

HTML:

<!-- Image Thumbnail -->
<img class="custom_media_image" src="" style="max-width:100px; float:left; margin: 0px     10px 0px 0px; display:inline-block;" />

<!-- Upload button and text field -->
<input class="custom_media_url" id="" type="text" name="" value="" style="margin-bottom:10px; clear:right;">
<a href="#" class="button custom_media_upload">Upload</a>
[2]} jQuery:
jQuery(document).ready(function($){

$('.custom_media_upload').click(function() {

        var send_attachment_bkp = wp.media.editor.send.attachment;
        var button = $(this);

        wp.media.editor.send.attachment = function(props, attachment) {

            $(button).prev().prev().attr('src', attachment.url);
            $(button).prev().val(attachment.url);

            wp.media.editor.send.attachment = send_attachment_bkp;
        }

        wp.media.editor.open(button);

        return false;       
    });

});
 7
Author: Phil Johnston,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-11 06:08:49

No he encontrado nada para activar una función personalizada si el editor se cierra. Yo uso esto:

wp.media.editor.open();
$('.media-modal-close, .media-modal-backdrop').one('click', function(){
    //do some stuff
});

O mejor:

var id = wp.media.editor.id();
var editor = wp.media.editor.get( id );
if('undefined' != typeof( editor )) editor = wp.media.editor.add( id );

if ( editor ) {
    editor.on('close', function(){
        //do some stuff
    });
}
 4
Author: Xaver,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-12-16 17:41:25

No he tenido muchas oportunidades de jugar con esto, pero para aquellos que buscan aprovechar el elemento gallery, este código debería ponerte en camino.

Es solo un punto de inicio - solo proporciona una lista separada por comas de id de imagen, pero eso debería ser suficiente para comenzar a ser creativo.

<input id="custom_media_id" type="text" name="attachment_id" value="">
<a href="#" class="button custom_media_upload" title="Add Media">Add Media</a>

<script type="text/javascript">
  jQuery('.custom_media_upload').click(function() {
    var clone = wp.media.gallery.shortcode;
    wp.media.gallery.shortcode = function(attachments) {
    images = attachments.pluck('id');
    jQuery('#custom_media_id').val(images);
    wp.media.gallery.shortcode = clone;
    var shortcode= new Object();
    shortcode.string = function() {return ''};
    return shortcode;
  }
jQuery(this).blur(); // For Opera. See: http://core.trac.wordpress.org/ticket/22445
wp.media.editor.open();
return false;       
});
</script>

Esto llenará el campo de entrada con una lista separada por comas de los id de la imagen, en el orden en que se establecieron en el editor (utilizando la nueva funcionalidad de arrastrar y soltar).

La función espera que el shortcode sea enviado de vuelta para su colocación en el editor principal, pero no queremos hacer esto, por lo que creamos un nuevo objeto que devuelve una cadena en blanco para su inserción.

También tenga en cuenta que esto no maneja la inserción de una sola imagen como se describió anteriormente, solo la pondrá en el editor de publicaciones. Así que trate de combinar los dos oyentes, o eliminar las pestañas apropiadas.

EDITAR

Después de haber pasado algún tiempo mirando el núcleo, creo que todo este proceso en realidad se puede hacer es más fácil usar la técnica presentada aquí, pero como leerá aún no he averiguado cómo preseleccionar las imágenes cuando vuelva a abrir el administrador de medios.

 3
Author: Mark,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:34:21