वर्डप्रेस 3.5 पर स्वयं प्लगिन में मीडिया अपलोडर प्रदर्शित करें

Question

मुझे नए वर्डप्रेस 3.5 में मीडिया अपलोडर के साथ थोड़ी समस्या है। मैंने खुद का प्लगइन बनाया जो चित्र अपलोड करता है। मैं इस कोड का उपयोग कर रहा हूँ JS:

<script type="text/javascript">
    var file_frame;

    jQuery('.button-secondary').live('click', function( event ){

        event.preventDefault();

        if ( file_frame ) {
            file_frame.open();
            return;
        }

        file_frame = wp.media.frames.file_frame = wp.media(
            {
                title: 'Select File',
                button: {
                    text: jQuery( this ).data( 'uploader_button_text' )
                },
                multiple: false
            }
        );

        file_frame.on('select', function() {
            attachment = file_frame.state().get('selection').first().toJSON();
            jQuery('#IMGsrc').val(attachment.url);
        });

        file_frame.open();
    });
</script>

कोड ठीक काम करता है, लेकिन दुर्भाग्य से फॉर्म अधूरे दिखाई देते हैं। जब मैं किसी भी चित्र का चयन करता हूं तो मुझे दाईं ओर 'अटैचमेंट डिस्प्ले सेटिंग्स' नहीं दिखाई देती हैं। मुझे पता नहीं क्यों। मैं मीडिया में विकल्प जोड़ने का प्रयास करता हूं:

displaySettings: true,
displayUserSettings: true

लेकिन यह भी काम नहीं करता है।

Comments

क्या आप कॉल कर रहे हैं wp_enqueue_media();?

— बैनेटर्न

Answer 1

केवल अपलोडर

एक उदाहरण कोड के नीचे, केवल पोस्ट एडिट पेज पर काम करता है। यदि आप अन्य पृष्ठ पर भी उपयोग करेंगे, तो फ़ंक्शन शामिल करें wp_enqueue_media(), अगली शीर्षक देखें।

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

  var _custom_media = true,
      _orig_send_attachment = wp.media.editor.send.attachment;

  $('.stag-metabox-table .button').click(function(e) {

    var send_attachment_bkp = wp.media.editor.send.attachment;
    var button = $(this);
    var id = button.attr('id').replace('_button', '');

    _custom_media = true;
    wp.media.editor.send.attachment = function(props, attachment) {

      if ( _custom_media ) {
        $("#"+id).val(attachment.url);
      } else {
        return _orig_send_attachment.apply( this, [props, attachment] );
      };

    }

    wp.media.editor.open(button);

    return false;
  });

  $('.add_media').on('click', function() {
    _custom_media = false;
  });

});

मीडिया मैनेजर की संक्षिप्त व्याख्या

1. सबसे पहले प्रासंगिक स्क्रिप्ट शामिल करें, कोर फ़ंक्शन का उपयोग करें: wp_enqueue_media(); फ़ंक्शन सभी प्रासंगिक सेटिंग्स सेट करता है, मेनू टेक्स्ट को स्थानीय करता है, और सभी उपयुक्त जावास्क्रिप्ट फ़ाइलों में लोड होता है।

   आप के माध्यम से कस्टम स्क्रिप्ट जोड़ सकते हैं wp_enqueue_script()।

   // Also adds a check to make sure `wp_enqueue_media` has only been called once.
   // @see: http://core.trac.wordpress.org/ticket/22843
   if ( ! did_action( 'wp_enqueue_media' ) )
       wp_enqueue_media();

   कस्टम हेडर के लिए एक डिफ़ॉल्ट स्क्रिप्ट भी जोड़ें: wp_enqueue_script( 'custom-header' ); यह एक छवि चयन फ्रेम बनाता है, और इसे एक इंटरफ़ेस तत्व से जोड़ता है, उदाहरण के लिए एक बटन या लिंक। यह तब चयनित छवि आईडी के साथ एक यूआरएल या हमारी पसंद कहता है। यह वही स्क्रिप्ट है जिसका उपयोग थीम कस्टम हेडर इमेज का चयन करते समय किया जाता है।

2. मीडिया मैनेजर में बटन जोड़ें:

   <?php
   $modal_update_href = esc_url( add_query_arg( array(
       'page'     => 'my_media_manager',
       '_wpnonce' => wp_create_nonce( 'my_media_manager_options' ),
   ), admin_url( 'upload.php' ) ) );
   ?>
   
   <p>
   <a id="choose-from-library-link" href="#"
       data-update-link="<?php echo esc_attr( $modal_update_href ); ?>"
       data-choose="<?php esc_attr_e( 'Choose a Default Image' ); ?>"
       data-update="<?php esc_attr_e( 'Set as default image' ); ?>"><?php _e( 'Set default image' ); ?>
   </a> |
   </p>

3. अंतिम क्रिया को परिभाषित करें, आपको छवि आईडी को संसाधित करने के लिए कुछ कोड में जोड़ने की आवश्यकता है जिसे हम डेटा-अपडेट-लिंक यूआरएल में पास करेंगे।

   // Add to the top of our data-update-link page
   if ( isset($_REQUEST['file']) ) { 
       check_admin_referer( 'my_media_manager_options' );
   
           // Process and save the image id
       $options = get_option( 'my_media_manager_options', TRUE );
       $options['default_image'] = absint( $_REQUEST['file'] );
       update_option( 'my_media_manager_options', $options );
   }

स्रोत और संकेत:

• http://codestag.com/how-to-use-wordpress-3-5-media-uploader-in-theme-options/
• http://mikejolley.com/2012/12/using-the-new-wordpress-3-5-media-uploader-in-plugins/
• https://github.com/AgencyPMG/PMG-WP-Core/commit/6a5a1ee818b9a8f03bf7df6e9f16b118f999355c
• फ़िल्टर और एक्शन हुक: http://core.trac.wordpress.org/ticket/22186#comment:46

Comments

Widget.php के अनुसार, 'पेज' की विशेषता एक व्यवस्थापक पृष्ठ के लिए क्या होगी?

— AlxVallejo

वर्तमान व्यवस्थापक जानकारी प्लगइन का उपयोग करें और आप इस स्ट्रिंग, सभी हुक भी देखते हैं, आप इस पृष्ठ के बारे में उपयोग कर सकते हैं। आपके उदाहरण में यह है widgets.php।

— bueltge

Answer 2

मैंने stackoverflow.com साइट पर भी एक उत्तर दिया है और इससे मदद मिलेगी।

मैं अपने कस्टम प्लगइन में मीडिया अपलोडर का उपयोग करने के लिए इस विधि का उपयोग कर रहा हूँ। यह मदद होगी।

में मुख्य विषय फ़ाइल (index.php) इन जोड़ें।

wp_enqueue_style('thickbox'); // call to media files in wp
wp_enqueue_script('thickbox');
wp_enqueue_script( 'media-upload'); 


// load script to admin
function wpss_admin_js() {
     $siteurl = get_option('siteurl');
     $url = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/js/admin_script.js';
     echo "<script type='text/javascript' src='$url'></script>"; 
}
 add_action('admin_head', 'wpss_admin_js');

में admin_script.js फ़ाइल,

jQuery('#wpss_upload_image_button').click(function() {
    formfield = jQuery('#wpss_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('#wpss_upload_image').val(imgurl);
 tb_remove();

 jQuery('#wpss_upload_image_thumb').html("<img height='65' src='"+imgurl+"'/>");
}

व्यवस्थापक फ़ाइल (admin_settings.php),

<div id="wpss_upload_image_thumb" class="wpss-file">
    <?php if(isset($record->security_image) && $record->security_image !='') { ?>
       <img src="<?php echo $record->security_image;?>"  width="65"/><?php } else {    echo $defaultImage; } ?>
</div>
<input id="wpss_upload_image" type="text" size="36" name="wpss_upload_image" value="" class="wpss_text wpss-file" />
<input id="wpss_upload_image_button" type="button" value="Upload Image" class="wpss-filebtn" />

मेरे ब्लॉग में अधिक जानकारी

अधिक जानकारी http://webexplorar.com/how-to-use-media-uploader-in-wordpress-custom-plugin/

Comments

कृपया अपने उत्तर के उत्तर को यहाँ स्थानांतरित करें। यदि वह लिंक हटा दिया जाता है, तो यहां आपका उत्तर बेकार हो जाएगा।

— पीटर गोयन ने

मुझे लगता है कि इस समय का गाढ़ा बॉक्स अब इतना पुराना है।

— मूसा हैदरी

Answer 3

मीडिया अपलोडर के लिए इस कोड का उपयोग करें। आपको jquery प्रतिक्रिया में लिंक मिला।

<label for="upload_image">
    <input id="upload_image" type="text" size="36" name="ad_image" value="http://" /> 
    <input id="upload_image_button" class="button" type="button" value="Upload Image" />
    <br />Enter a URL or upload an image
</label>

<?php
add_action('admin_enqueue_scripts', 'my_admin_scripts');

function my_admin_scripts() {
    if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {
        wp_enqueue_media();
        wp_register_script('my-admin-js', WP_PLUGIN_URL.'/my-plugin/my-admin.js', array('jquery'));
        wp_enqueue_script('my-admin-js');
    }
}

?>

<script>
    jQuery(document).ready(function($){


    var custom_uploader;


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

        e.preventDefault();

        //If the uploader object has already been created, reopen the dialog
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }

        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: true
        });

        //When a file is selected, grab the URL and set it as the text field's value
        custom_uploader.on('select', function() {
            console.log(custom_uploader.state().get('selection').toJSON());
            attachment = custom_uploader.state().get('selection').first().toJSON();
            $('#upload_image').val(attachment.url);
        });

        //Open the uploader dialog
        custom_uploader.open();

    });


});
    </script>