Comment puis-je utiliser Multi Media Uploader dans les plugins WordPress?

J'essaie d'ajouter les options de téléchargement multiples dans les plugins wordpress J'ai répété ce code dans le plugin (deux fois) en changeant le nom d'identifiant.

<script language="JavaScript"> jQuery(document).ready(function($) { jQuery('#upload_image_button').click(function() { formfield = jQuery('#upload_image').attr('name'); tb_show('', 'media-upload.php?type=image&TB_iframe=true'); return false; }); window.send_to_editor = function(html) { imgurl = jQuery('img', html).attr('src'); jQuery('#upload_image').val(imgurl); tb_remove(); }; }); </script> <input id="upload_image" style=" margin-left:303px;" type="text" size="36" name="upload_image_template" value="<?php echo get_option('upload_image_template'); ?>" /> <input id="upload_image_button" type="button" value="Browse" /> 

Chaque fois que j'essaie de télécharger une image que vient le cadre média et que le processus de téléchargement est effectué avec succès. Mais Insert Into Post récupère l'URL correcte mais collé dans une boîte de saisie différente. Par exemple:

 1) [text box1] [browse Button] 2) [text box2] [browse button] 

Lorsque je télécharge l'image avec le Text Box One qui [insert post] ce chemin d'image est affiché dans [text box 2] Je ne suis pas sûr que le problème soit le mien ou que ce script ne prenait pas en charge l'option de chargement de fichiers multiples.

Voici l'exemple de la façon dont vous pouvez utiliser le chargeur multimédia wordpress pour plus d'un champ ou autant de champs. Le code JS et le code html ressemblent à ceci

Comment ça marche

Ajoutez la classe upload_image_button sur chaque bouton de téléchargement en fonction de cette classe, click les déclencheurs de la fonction pour récupérer le chargeur multimédia wordpress, voir j'ai utilisé la propriété prev() pour obtenir l'élément précédent dans le formfieldID=jQuery(this).prev().attr("id"); Et ensuite j'ai assigné l'URL d'image renvoyée par le chargeur pour formfieldID

  <input id="upload_image1" type="text" name="upload_image1" value="<?php echo $upload_image1;?>" /> <input class="upload_image_button" type="button" value="Upload image 1" /> <input id="upload_image2" type="text" name="upload_image2" value="<?php echo $upload_image2;?>" /> <input class="upload_image_button" type="button" value="Upload image 2" /> <script type="text/javascript"> //tb_show('', 'media-upload.php?TB_iframe=true'); var upload_image_button=false; jQuery(document).ready(function() { jQuery('.upload_image_button').click(function() { upload_image_button =true; formfieldID=jQuery(this).prev().attr("id"); formfield = jQuery("#"+formfieldID).attr('name'); tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true'); if(upload_image_button==true){ var oldFunc = window.send_to_editor; window.send_to_editor = function(html) { imgurl = jQuery('img', html).attr('src'); jQuery("#"+formfieldID).val(imgurl); tb_remove(); window.send_to_editor = oldFunc; } } upload_image_button=false; }); }) </script> 

Assurez-vous également d'avoir inclus les fichiers JS et CSS nécessaires du chargeur pour cela, vous devez ajouter une action

 <?php function my_admin_uploader_scripts() { wp_enqueue_script('media-upload'); wp_enqueue_script('thickbox'); wp_register_script('my-upload', WP_PLUGIN_URL.'/my-script.js', array('jquery','media-upload','thickbox')); wp_enqueue_script('my-upload'); } function my_admin_uploader_styles() { wp_enqueue_style('thickbox'); } add_action('admin_print_scripts', 'my_admin_uploader_scripts'); add_action('admin_print_styles', 'my_admin_uploader_styles'); ?> 

Remarque: prenez également en charge une chose lorsque vous affectez les champs de saisie de téléchargement aux champs de saisie, le contrôle de l'uploader attribue maintenant aux champs, de sorte que, lorsque le chargeur sera appelé, il assignera l'URL de l'image à votre champ de texte, donc c'est le problème lorsque vous Déclenche le chargeur, vous ne pouvez pas insérer les images dans la zone de contenu de la publication pour cette solution, vous devez mémoriser le contrôle précédent dans certains endroits où et quand vous avez terminé avec le chargeur, puis réaffectez le contrôle du chargé de chargement à la fonction précédente que j'ai Fourni dans mon code JS voir ci-dessous comment cela fonctionne

  var oldFunc = window.send_to_editor; window.send_to_editor = function(html) { imgurl = jQuery('img', html).attr('src'); jQuery("#"+formfieldID).val(imgurl); tb_remove(); window.send_to_editor = oldFunc; } 

J'ai utilisé cette technique à plusieurs reprises et ça me parfait.

J'espère que cela a du sens

Ce n'était pas si difficile …

Voir cet historique de révision pour voir comment je l'ai fait … Fondamentalement, ce que j'ai fait était de l'ajouter à mon plugin:

 function wp_gear_manager_admin_scripts() { wp_enqueue_script('media-upload'); wp_enqueue_script('thickbox'); wp_enqueue_script('jquery'); } function wp_gear_manager_admin_styles() { wp_enqueue_style('thickbox'); } add_action('admin_print_scripts', 'wp_gear_manager_admin_scripts'); add_action('admin_print_styles', 'wp_gear_manager_admin_styles'); And later this part: <script language="JavaScript"> jQuery(document).ready(function() { jQuery('#upload_image_button').click(function() { formfield = jQuery('#upload_image').attr('name'); tb_show('', 'media-upload.php?type=image&TB_iframe=true'); return false; }); window.send_to_editor = function(html) { imgurl = jQuery('img',html).attr('src'); jQuery('#upload_image').val(imgurl); tb_remove(); } }); </script> <tr valign="top"> <td>Upload Image</td> <td><label for="upload_image"> <input id="upload_image" type="text" size="36" name="upload_image" value="<?php echo $gearimage; ?>" /> <input id="upload_image_button" type="button" value="Upload Image" /> <br />Enter an URL or upload an image for the banner. </label> </td> </tr> 

Vous pouvez simplement copier et coller ce code dans votre plugin et voir la magie.

Ici, pour que l'image d'édition fonctionne, aussi pour afficher d'autres filtres, espérons que cela vous aidera.

 pa_uploader = wp.media({ title: 'Choose Images', multiple: true, //frame: 'select', library: { filterable: 'all', editable: true, contentUserSetting: false }, states: [ new wp.media.controller.Library({ id: 'library', title: 'Select Images', priority: 40, // toolbar: 'gallery', filterable: 'all', multiple: 'add', editable: true, contentUserSetting: false, library: wp.media.query( _.defaults({ type: 'image' }, {} ) ) }), new wp.media.controller.EditImage({model: {}}) ] }); // pa_uploader.states.add([ // new wp.media.controller.EditImage({model: {}}) // ]); pa_uploader.on('content:render:edit-image', function() { var controller = pa_uploader.modal.controller; image = pa_uploader.state().get('image'), view = new wp.media.view.EditImage( { model: image, controller: controller } ).render(); pa_uploader.content.set( view ); // after creating the wrapper view, load the actual editor via an ajax call view.loadEditor(); }); pa_uploader.on('select', function(e){ // This will return the selected image from the Media Uploader, the result is an object var selected_images = pa_uploader.state().get('selection'); }); }); }); 

La réponse de M Khalid Junaid est géniale mais dépassée.

Consultez la page du codex sur wp.media: https://codex.wordpress.org/Javascript_Reference/wp.media .

Voici mon code basé sur Codex wp.media Exemple

Javascript

 var sfieldGroup= '.field-group'; // top level parent var wpMediaUploader = { sBtnAdd : ".upload-custom-wp-media", sBtnRemove : ".remove-custom-wp-media", sMediaData: ".media-data", sInput : ".custom-wp-media" }; function wpMedia() { $(wpMediaUploader.sBtnAdd).on("click", function (event) { event.preventDefault(); var self = $(this); var fieldGroup = self.parents(sfieldGroup); // Create a new media frame var frame = wp.media({ title: "Select or Upload Media Of Your Chosen Persuasion", button: { text: "Use this media" }, multiple: false // Set to true to allow multiple files to be selected }); frame.on("select", function () { var attachment = frame.state().get("selection").first().toJSON(); switch(attachment.mime){ case "image/jpeg" : case "image/png" : case "image/bmp" : case "image/gif" : fieldGroup.find(wpMediaUploader.sMediaData) .append("<img src=\"" + attachment.url + "\" alt=\"\" />"); break; } $("<p/>",{ text: attachment.filename }).appendTo(fieldGroup.find(wpMediaUploader.sMediaData)); fieldGroup.find(wpMediaUploader.sInput).val(attachment.id); fieldGroup.find(wpMediaUploader.sBtnAdd).addClass("hidden"); fieldGroup.find(wpMediaUploader.sBtnRemove).removeClass("hidden"); frame.close(); }); frame.open(); }); $(wpMediaUploader.sBtnRemove).on("click", function (event) { event.preventDefault(); var self = $(this); var fieldGroup = self.parents(sfieldGroup); // Clear out the preview image fieldGroup.find(wpMediaUploader.sMediaData).html(""); // Un-hide the add image link fieldGroup.find(wpMediaUploader.sBtnAdd).removeClass("hidden"); // Hide the delete image link fieldGroup.find(wpMediaUploader.sBtnRemove).addClass("hidden"); // Delete the image id from the hidden input fieldGroup.find(wpMediaUploader.sInput).val(""); }); } 

HTML

 <div class="field-group"> <div class="media-data"></div> <p class="hide-if-no-js"> <a class="button upload-custom-wp-media" href="javascript:void(0)">Upload Media</a> <a class="button remove-custom-wp-media hidden" href="javascript:void(0)">Remove Selected Media</a> </p> <input id="test" name="test" class="custom-wp-media" value="" type="hidden"> </div> 

Pointe
Si vous console.log, vous serez exposé à l'API 🙂

  var frame = wp.media({ title: "Select or Upload Media Of Your Chosen Persuasion", button: { text: "Use this media" }, multiple: false // Set to true to allow multiple files to be selected });