web-dev-qa-db-ja.com

wordpressプラグインでメディアアップローダーを追加する方法

wordpressプラグインでメディアアップローダーを統合する方法についてのチュートリアルの一部を読みました。チュートリアルに基づいてメディアアップローダーを行います。 http://wordpress.org/support/topic/howto-integrate-the-media-library-into-a-plugin？replies = 4 これを行うと、完全に機能します。複数回のメディアアップローダーで同じスクリプトをもう一度試したところ、 fiddle特定のテキストフィールドのIDを変更するだけでした http://jsfiddle.net/UrXPe/1/ それでもアップロードをクリックすると、すべてが完璧に行われます。 insert into post画像のURLが2番目の参照フィールドに表示されます。ここに私が正確に直面するスクリーンショットがあります。 enter image description here

ポストに挿入した後、最初のアップロードフィールドをクリックすると（アップロードプロセスが成功します）、対応するメディアURLが最初ではなく2番目のフィールドに表示されます。問題がどこにあるのかわからない。

jquerywordpress-pluginwordpress
27
Vignesh Pichamani

更新-下にスクロール

多大な労力と研究といくつかのカスタマイズの後、ワードプレスのどこでもメディアアップローダーを使用するために、以下のコンパクトな数行のコードをコーディングしました。何らかの関数にコードを入れて、その関数を好きな場所で呼び出すだけです。アップロード/選択されたファイルのパスがテキストボックスにコピーされ、それを使用できます。

これが誰かを助けることを願っています！

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

[〜＃〜] update [〜＃〜]：追加するだけです。プラグイン/テーマファイルに関数ラッパーを追加する必要がある場合があります。これは次のとおりです。

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

WPがアップロードマネージャーの読み込みに失敗すると、関連するJSファイルとCSSファイルが呼び出されます。これにより、コンソールの警告も削除されます。

78
Rushabh Dave

このメソッドを使用して、メディアアップローダーをカスタムプラグインに使用しています。これが役立つかもしれません。

メインテーマファイル（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+"'/>");
}

管理ファイル（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" />

詳細 私のブログで

5
Sumith Harshan

カスタムプラグインでこれを使用します

<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>
0
Rutunj sheladiya