Téléchargement de média personnalisé Wordpress 3.5 pour vos options de thème

Question

wordpress 3.5 a été publié récemment, j'ai utilisé wordpress media système de téléchargement via thickbox et de la fenêtre.send_to_editor pour certaines options dans mon wordpress thème (fonds d'écran, logos, etc...).

Mais comme vous le savez wordpress a intégré un nouveau Gestionnaire de Médias, j'ai voulu utilisé cette nouvelle fonctionnalité permettant de télécharger des images/fichiers comme des champs personnalisés. J'ai donc passé la matinée à trouver un moyen d'obtenir le résultat désiré.

Je l'ai trouvé avec cette solution, qui peut être utile pour certains d'entre vous. Merci de me donner vos commentaires sur le code ou toutes les améliorations que vous avez à l'esprit !

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

jQuery Code :

$('.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 "pièce jointe" variable que vous pouvez faire une console.journal(pièce jointe) ou d'alerte(pièce jointe).

Une bonne journée !

Answer 1

Vous y parvenez d'une manière imprévue. 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();
});
 

Answer 2

N'oubliez pas d'utiliser wp_enqueue_media (nouveauté de la version 3.5) si vous n'êtes pas sur la page d'édition

Pour utiliser l'ancienne boîte de téléchargement de contenu multimédia, procédez 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');
}
 

Answer 3

J'ai modifié ce code un peu plus 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;       
    });

});
 

Answer 4

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
    });
}
 

Answer 5

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

C'est juste un point de départ - il seulement fournit une liste séparée par des virgules de l'id de l'image, mais qui devrait être assez 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>

Ceci remplira le champ de saisie avec une liste séparée par des virgules de l'id de l'image, dans l'ordre qu'ils ont été fixés dans l'éditeur (à l'aide de la nouvelle fonctionnalité de glisser-déposer).

La fonction attend le shortcode à renvoyer pour le placement dans l'éditeur, mais nous ne voulons pas le faire, donc nous créons un nouvel objet qui renvoie une chaîne vide pour l'insertion.

A noter aussi, ce n'est pas la poignée de l'insertion d'une seule image comme décrit ci-dessus - il vous suffit de mettre dans le post de l'éditeur. Donc, essayez de combiner les deux auditeurs, ou de supprimer les onglets appropriés.

MODIFIER

Après avoir passé un certain temps à la recherche, à la base, je pense que l'ensemble de ce processus peut être fait facilement en utilisant la technique énoncée ici, mais comme vous allez le lire, je n'ai pas encore appris comment pour pré-sélectionner les images lorsque vous rouvrez le gestionnaire de médias.