如何在wordpress插件中添加媒体上传器

Question

我读了一些关于如何在wordpress插件中集成媒体上传器的教程.我根据教程做了媒体上传器. http://wordpress.org/support/topic/howto-integrate-the-media-library-into-a-plugin?replies=4 我这样做,它完美地工作.当我再次尝试相同的脚本多次媒体上传时,这是我试过的小提琴只是改变了特定文本字段的ID. http://jsfiddle.net/UrXPe/1/ 不过当我点击上传一切都是为了是做到了完美.唯一的事情,如果我点击insert into post它的图像的网址出现在第二个浏览字段中.这是我完全面对的截图.

当我在插入帖子后点击第一个上传字段(上传过程成功)时,相应的媒体网址出现在第二个字段中,而不是第一个.我不知道问题在哪里,任何建议都会很棒.

Answer 1

更新 - 向下滚动

经过大量的努力和研究以及一些定制,我在下面编写了紧凑的几行代码,以便在wordpress中的任何地方使用媒体上传器.只需将代码放入某个函数中,然后在任何需要的地方调用该函数.上传/选定文件的路径将被复制到文本框,然后您可以使用它.

希望这有助于某人.

// jQuery
wp_enqueue_script('jquery');
// This will enqueue the Media Uploader script
wp_enqueue_media();
?>
    <div>
    <label for="image_url">Image</label>
    <input type="text" name="image_url" id="image_url" class="regular-text">
    <input type="button" name="upload-btn" id="upload-btn" class="button-secondary" value="Upload Image">

</div>
<script type="text/javascript">
jQuery(document).ready(function($){
    $('#upload-btn').click(function(e) {
        e.preventDefault();
        var image = wp.media({ 
            title: 'Upload Image',
            // mutiple: true if you want to upload multiple files at once
            multiple: false
        }).open()
        .on('select', function(e){
            // This will return the selected image from the Media Uploader, the result is an object
            var uploaded_image = image.state().get('selection').first();
            // We convert uploaded_image to a JSON object to make accessing it easier
            // Output to the console uploaded_image
            console.log(uploaded_image);
            var image_url = uploaded_image.toJSON().url;
            // Let's assign the url value to the input field
            $('#image_url').val(image_url);
        });
    });
});
</script>

更新:只是添加.您可能需要在插件/主题文件中添加函数包装器.这是以下内容:

// UPLOAD ENGINE
function load_wp_media_files() {
    wp_enqueue_media();
}
add_action( 'admin_enqueue_scripts', 'load_wp_media_files' );

如果WP无法加载上传管理器,这将调用相关的JS文件和CSS文件.这也会删除控制台警告.

Answer 2

我正在使用这种方法将媒体上传器用于我的自定义插件中。可能会有所帮助。

在主主题文件（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" />

我的博客中有更多详细信息