वर्डप्रेस 3.5 कस्टम मीडिया आपके थीम विकल्पों के लिए अपलोड करें

Question

वर्डप्रेस 3.5 हाल ही में जारी किया गया है, मैंने अपने वर्डप्रेस थीम (पृष्ठभूमि, लोगो इत्यादि) में कुछ विकल्पों के लिए मैडबॉक्स और window.send_to_editor के माध्यम से वर्डप्रेस मीडिया अपलोड सिस्टम का उपयोग किया था।

लेकिन जैसा कि आप जानते हैं कि वर्डप्रेस ने एक नया मीडिया प्रबंधक एकीकृत किया है, मैं कस्टम फ़ील्ड के रूप में छवियों/फ़ाइलों को अपलोड करने के लिए इस नई सुविधा का उपयोग करना चाहता था। इसलिए मैंने सुबह को बिताए परिणाम प्राप्त करने के लिए एक रास्ता खोजने के लिए बिताया।

मुझे इस समाधान के साथ मिला, जो आप में से कुछ के लिए उपयोगी हो सकता है। मुझे कोड या आपके मन में होने वाले किसी भी सुधार पर आपकी प्रतिक्रिया देने के लिए धन्यवाद!

एचटीएमएल नमूना:

<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 कोड:

$('.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; 
}); 

आप attachment चर में निहित हर सेटिंग्स आप एक console.log(attachment) या alert(attachment) कर सकते हैं देखना चाहते हैं।

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

Answer 1

(3.5 में नया) wp_enqueue_media उपयोग करने के लिए अगर you'r नहीं पोस्ट संपादन पृष्ठ पर

पुराने मीडिया अपलोड बॉक्स आप यह कर सकते हैं का उपयोग करने के लिए मत भूलना संपादक बंद होने पर कस्टम फ़ंक्शन ट्रिगर करने के लिए कुछ भी नहीं मिला।

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

या बेहतर:: मैं इस का उपयोग करता है

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 2

मैं:

Answer 3

मैं इस के साथ खेलने के लिए बहुत मौका नहीं मिला है, लेकिन गैलरी तत्व का लाभ उठाने के लिए देख उन लोगों के लिए, इस कोड को आप पर स्थापित करना चाहिए अपने मार्ग।

यह सिर्फ एक प्रारंभ बिंदु है - यह केवल छवि आईडी की अल्पविराम से अलग सूची प्रदान करता है, लेकिन यह रचनात्मक होने के लिए पर्याप्त होना चाहिए।

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

इस छवि को पहचान-पत्र की एक अल्पविराम से अलग सूची के साथ इनपुट क्षेत्र से स्थापित हो जाएगा, ताकि वे संपादक में स्थापित किए गए थे में (नई खींचें का उपयोग कर और ड्रॉप कार्यक्षमता)।

फ़ंक्शन मुख्य संपादक में प्लेसमेंट के लिए शोर्ट को वापस भेजने की अपेक्षा करता है, लेकिन हम ऐसा नहीं करना चाहते हैं, इसलिए हम एक नई ऑब्जेक्ट बनाते हैं जो सम्मिलन के लिए रिक्त स्ट्रिंग देता है।

यह भी ध्यान दें, यह ऊपर वर्णित एक छवि को सम्मिलित नहीं करता है - यह इसे केवल पोस्ट संपादक में रखेगा। तो दो श्रोताओं के संयोजन का प्रयास करें, या उचित टैब को हटा दें।

संपादित

कुछ समय बिताया करने के बाद मूल में देख, मैं इस पूरी प्रक्रिया वास्तव में तकनीक here बाहर रखी का उपयोग कर आसान किया जा सकता है, लेकिन जैसा कि आप पढ़ सकते हैं कि मैं अभी तक पता लगा नहीं किया है लगता है जब आप मीडिया प्रबंधक को फिर से खोलें तो छवियों को प्री-सिलेक्ट कैसे करें।

Answer 4

मैं थोड़ा अधिक एक ही बार में यह कई क्षेत्रों के लिए उपयोगी बनाने के लिए इस कोड को संशोधित:

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 5

आपका इस बारे में एक तरह से जा रहा वह अनजान था। आपका जावास्क्रिप्ट कोड शायद इस तरह कुछ दिखना चाहिए:

$('.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(); 
});