मेटा बॉक्स फ़ील्ड में "अपलोड मीडिया" बटन जोड़ें

Question

मेरे पास एक कस्टम पोस्ट है जिसमें एक मेटा टैग है जिसे फ़ाइल अपलोड (वीडियो फ़ाइलों के लिए) का उपयोग करने की आवश्यकता है। मैं सोच रहा हूं, "अपलोड" बटन को जोड़ने का सही तरीका क्या है जो वर्डप्रेस मीडिया अपलोडर को इंगित करता है और चयनित अपलोड किए गए फ़ाइल के यूआरएल को उस टेक्स्ट फ़ील्ड पर सेट करता है जो अपलोड बटन को संबद्ध करता है।

मैं वास्तविक मेटा टैग विकल्प बनाने के लिए कोड की तलाश नहीं कर रहा हूं, लेकिन वास्तव में एक Wordpress मीडिया अपलोड बटन को ठीक से जोड़ने का एक तरीका है।

Comments

ट्यूटोरियल और सरल प्लगइन देखें, जिसे आप यहाँ आज़मा सकते हैं । मेरी मदद की।

— फंकी

Answer 1

इस मीडिया अपलोडर कंकाल को देखें । आप इसे मेटा बॉक्स की तरह अपने कस्टम मार्कअप में भी उपयोग कर सकते हैं।

एक संकेत, जाँच, कि आप केवल पृष्ठ पर स्क्रिप्ट का उपयोग करते हैं, जहाँ आप अपना मेटा बॉक्स सक्रिय करते हैं। अन्यथा यह अक्सर डिफ़ॉल्ट पृष्ठों और अपलोडर पर एक समस्या है।

अब अपलोडर को अपने कस्टम भाग में शामिल करने के लिए महत्वपूर्ण भागों को साफ़ करने का प्रयास किया गया है।

पहले मेटा बॉक्स में एक बटन शामिल करें:

<input id="upload_image" type="text" size="36" name="upload_image" value="" />
<input id="upload_image_button" type="button" value="Upload Image" />

अब स्क्रिप्ट्स को एनक्यू करें:

function my_admin_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_styles() {

    wp_enqueue_style('thickbox');
}

// better use get_current_screen(); or the global $current_screen
if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {

    add_action('admin_print_scripts', 'my_admin_scripts');
    add_action('admin_print_styles', 'my_admin_styles');
}

अंतिम भाग आपके कस्टम स्क्रिप्ट को गाढ़ा बॉक्स और इसके अंदर अपलोडर का उपयोग करने के लिए है।

jQuery(document).ready( function( $ ) {

    $('#upload_image_button').click(function() {

        formfield = $('#upload_image').attr('name');
        tb_show( '', 'media-upload.php?type=image&TB_iframe=true' );
        window.send_to_editor = function(html) {
           imgurl = $(html).attr('src');
           $('#upload_image').val(imgurl);
           tb_remove();
        }

        return false;
    });

});

Comments

कोडेक्स पेज के माध्यम से थोड़ा सा रिमाइंडर admin_print_scriptsकहता है कि admin_print_scriptsमुख्य रूप से इनलाइन जावास्क्रिप्ट को इको किया जाता था। admin_print_scriptsव्यवस्थापक पृष्ठों पर शैलियों या लिपियों को समझने के लिए उपयोग नहीं किया जाना चाहिए। admin_enqueue_scriptsइसके बजाय उपयोग करें ।

— जूलियन

मैंने इस विधि की कोशिश की और पाठ इनपुट बॉक्स #upload_imageकभी भी आबाद नहीं हुआ

— श्री पाब्लो

यह उत्तर काम नहीं करता है। अन्य उत्तर देखें।

— टोडुआ

Answer 2

समाधान:

1) अपने कार्यों में । आवश्यक लिपियों को पंजीकृत करने के लिए ब्लॉक जोड़ें:

// add necessary scripts
add_action('plugins_loaded', function(){
  if($GLOBALS['pagenow']=='post.php'){
    add_action('admin_print_scripts', 'my_admin_scripts');
    add_action('admin_print_styles',  'my_admin_styles');
  }
});

function my_admin_scripts(){
  wp_enqueue_script('jquery');
  wp_enqueue_script('media-upload');
  wp_enqueue_script('thickbox');
}

// Proper way to enqueue
// wp_register_script(
//   'my-upload',
//   WP_PLUGIN_URL.'/my-script.js',
//   array('jquery','media-upload','thickbox') /* dependencies */
// );
//
// wp_enqueue_script('my-upload');

function my_admin_styles(){
  wp_enqueue_style('thickbox');
}

2) और फिर मेटाबेस ब्लॉक जोड़ें :

add_action(
  'add_meta_boxes',
  function(){
    add_meta_box(
      'my-metaboxx1', // ID
      'my-metaboxx1-title', // Title
      'func99999', // Callback (Construct function)
      get_post_types(), //screen (This adds metabox to all post types)
      'normal' // Context
    );
 },
 9
);
function func99999($post){
  $url = get_post_meta($post->ID, 'my-image-for-post', true); ?>
  <input id="my_image_URL" name="my_image_URL" type="text"
         value="<?php echo $url;?>" style="width:400px;" />
  <input id="my_upl_button" type="button" value="Upload Image" /><br/>
  <img src="<?php echo $url;?>" style="width:200px;" id="picsrc" />
  <script>
  jQuery(document).ready( function($) {
    jQuery('#my_upl_button').click(function() {
      window.send_to_editor = function(html) {
        imgurl = jQuery(html).attr('src')
        jQuery('#my_image_URL').val(imgurl);
        jQuery('#picsrc').attr("src", imgurl);
        tb_remove();
      }

      formfield = jQuery('#my_image_URL').attr('name');
      tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true' );
      return false;
    }); // End on click
  });
  </script>
<?php
}

add_action('save_post', function ($post_id) {
  if (isset($_POST['my_image_URL'])){
    update_post_meta($post_id, 'my-image-for-post', $_POST['my_image_URL']);
  }
});

---

यदि आपको कई क्षेत्रों की आवश्यकता है, तो आप आसानी से इस तरह कर सकते हैं: http://pastebin.com/raw/xpU1ch2W

Comments

एक आकर्षण की तरह काम करता है, लेकिन केवल छवियों के साथ। मैं वीडियो फ़ाइलों के साथ ऐसा कैसे कर सकता हूं?

— एलेक्स