ওয়ার্ডপ্রেস 3.5 তে নিজস্ব প্লাগইনে মিডিয়া আপলোডার প্রদর্শন করুন

10

নতুন ওয়ার্ডপ্রেস ৩.৫ এ মিডিয়া আপলোডারের সাথে আমার খুব কম সমস্যা আছে। আমি নিজের প্লাগইন তৈরি করেছি যা ছবি আপলোড করে। আমি এই কোডটি ব্যবহার করছি জেএস:

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

কোডটি দুর্দান্ত কাজ করে তবে দুর্ভাগ্যক্রমে ফর্মগুলি অসম্পূর্ণ বলে মনে হচ্ছে appears আমি যখন নির্বাচন করি কোনও চিত্র আমাকে ডানদিকে 'সংযুক্তি প্রদর্শন সেটিংস' প্রদর্শন করে না। কেন জানি না। আমি মিডিয়াতে বিকল্পগুলি যুক্ত করার চেষ্টা করি:

displaySettings: true,
displayUserSettings: true

তবে এটিও কাজ করে না।

jquery media

— user1320276
সূত্র

আপনি ফোন করছেন wp_enqueue_media();?

— বেন্টারনেট

7

কেবলমাত্র আপলোডার

উদাহরণ কোডের নীচে, কেবল পোস্ট সম্পাদনা পৃষ্ঠায় কাজ করে। আপনি যদি অন্য পৃষ্ঠায়ও ব্যবহার করেন তবে ফাংশনটি অন্তর্ভুক্ত করুন 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;
  });

});

মিডিয়া ম্যানেজারের সংক্ষিপ্ত ব্যাখ্যা

প্রথমে প্রাসঙ্গিক স্ক্রিপ্টগুলি অন্তর্ভুক্ত করুন, মূল ফাংশনটি ব্যবহার করুন: 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' ); এটি একটি চিত্র নির্বাচনের ফ্রেম তৈরি করে এবং একটি ইন্টারফেস উপাদানটির সাথে এটি যুক্ত করে, উদাহরণস্বরূপ একটি বোতাম বা লিঙ্ক। এটি নির্বাচিত চিত্র আইডি সহ একটি url বা আমাদের পছন্দকে কল করে। এটি একই স্ক্রিপ্ট যা থিম কাস্টম শিরোনাম চিত্র নির্বাচন করার সময় ব্যবহৃত হয়।

মিডিয়া পরিচালকের বোতামটি যুক্ত করুন:

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

অ্যাকশন ফাংশনটি সর্বশেষে সংজ্ঞায়িত করুন, আপনাকে চিত্র-আইডি প্রক্রিয়াকরণের জন্য কিছু কোড যুক্ত করতে হবে যা আমরা ডেটা-আপডেট-লিঙ্ক url এ প্রেরণ করব।

// 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# কমেন্টস

— bueltge
সূত্র

অ্যাডমিন পৃষ্ঠার জন্য 'পৃষ্ঠা' বৈশিষ্ট্যটি কী হবে, উইজেটস.এফপি বলুন?

— অ্যালেক্সভ্যালিজো

বর্তমান প্রশাসন তথ্য প্লাগইনটি ব্যবহার করুন এবং আপনি এই স্ট্রিংটি দেখতে পাবেন এবং সমস্ত হুকও আপনি এই পৃষ্ঠাটি সম্পর্কে ব্যবহার করতে পারেন। আপনার উদাহরণ এ widgets.php।

— 8:25

0

আমি স্ট্যাকওভারফ্লো ডটকম সাইটেও একটি উত্তর রেখেছি এবং এটি সহায়তা হবে।

আমি আমার কাস্টম প্লাগইনটিতে মিডিয়া আপলোডারটি ব্যবহার করতে এই পদ্ধতিটি ব্যবহার করছি thisআমাই হবেন এই সাহায্য হবে।

মধ্যে মূল থিমটি ফাইল (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&amp;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+"'/>");
}

অ্যাডমিন ফাইল (প্রশাসন_সেটিংস.এফপি),

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

— সুমিত হৃষ্ণ
সূত্র

দয়া করে আপনার উত্তরটি উত্তরটি এখানে স্থানান্তর করুন। যদি সেই লিঙ্কটি সরিয়ে ফেলা হয়, তবে এখানে আপনার উত্তর অকেজো হবে।

— পিটার গুজন

আমার মনে হয় এই মুহুর্তে এখন পুরুবাক্সটি এত পুরানো।

— মুসা হায়দারি

0

মিডিয়া আপলোডারের জন্য কেবল এই কোডটি ব্যবহার করুন। আপনি 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>

— রুতুঞ্জ শেলাদিয়া
সূত্র