web-dev-qa-db-fra.com

WordPress 3.5 téléchargement multimédia personnalisé pour vos options de thème

WordPress 3.5 a été publié récemment, j'ai utilisé le système WordPress Media Upload via thickbox et window.send_to_editor Pour certaines options de mon thème WordPress (arrière-plans) , logos etc ...).

Mais comme vous le savez WordPress a intégré un nouveau Media Manager, je voulais utiliser cette nouvelle fonctionnalité pour télécharger des images/fichiers en tant que champs personnalisés. J'ai donc passé la matinée à trouver un moyen d'obtenir les souhaits résultat.

J'ai trouvé avec cette solution, qui peut être utile pour certains d'entre vous. Merci de me faire part de vos commentaires sur le code ou les améliorations que vous envisagez!

Exemple 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="">

code 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 vous voulez voir tous les paramètres contenus dans la variable attachment, vous pouvez faire une console.log(attachment) ou alert(attachment).

jquerywordpressfile-uploadwordpress-3.5
66
Mattpx

N'oubliez pas d'utiliser wp_enqueue_media (nouveau dans la version 3.5) si vous n'êtes pas sur la page de modification des articles

Pour utiliser l'ancienne boîte de téléchargement des médias, vous pouvez procéder comme suit:

if(function_exists( 'wp_enqueue_media' )){
    wp_enqueue_media();
}else{
    wp_enqueue_style('thickbox');
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
}
33
Xaver

Vous y allez d'une manière qui n'était pas intentionnelle. Votre code javascript devrait probablement ressembler à ceci:

$('.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
DiverseAndRemote.com

J'ai modifié un peu plus ce code pour le rendre utilisable pour plusieurs champs à la fois:

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>

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
Phil Johnston

Je n'ai rien trouvé pour déclencher une fonction personnalisée si l'éditeur se ferme. J'utilise ceci:

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

ou mieux:

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
Xaver

Je n'ai pas eu beaucoup de chance de jouer avec cela, mais pour ceux qui cherchent à tirer parti de l'élément galerie, ce code devrait vous mettre sur la bonne voie.

Ce n'est qu'un point de départ - il ne fournit qu'une liste d'ID d'image séparés par des virgules, mais cela devrait suffire pour commencer à être créatif.

<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>

Cela remplira le champ de saisie avec une liste séparée par des virgules des identifiants d'image, dans l'ordre dans lequel ils ont été définis dans l'éditeur (en utilisant la nouvelle fonctionnalité de glisser-déposer).

La fonction s'attend à ce que le shortcode soit renvoyé pour être placé dans l'éditeur principal, mais nous ne voulons pas le faire, nous créons donc un nouvel objet qui renvoie une chaîne vide pour l'insertion.

Notez également que cela ne gère pas l'insertion d'une seule image comme décrit ci-dessus - il suffit de la mettre dans l'éditeur de publication. Essayez donc de combiner les deux écouteurs ou supprimez les onglets appropriés.

[~ # ~] modifier [~ # ~]

Après avoir passé un certain temps à regarder le cœur, je pense que tout ce processus peut être fait plus facilement en utilisant la technique présentée ici , mais comme vous le lirez, je n'ai pas encore compris comment pré- sélectionnez les images lorsque vous rouvrez le gestionnaire de médias.

3
Mark