web-dev-qa-db-ja.com

画像アップロード機能をウィジェットに追加するのに役立ちます

私は小さなWordPressウィジェットに取り組んでいて、ユーザーが画像をアップロードできる場所に設定しようとしています。これまでのところ、必要なスクリプトはロードされていますが、 "Media Library Image"ボタンをクリックしても画像アップローダーはポップアップしません。

これが私のjavascriptファイルです。

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

var formfield = null;

$('#upload_image_button').click(function() {
    $('html').addClass('Image');
    formfield = $('#wp-ss-image').attr('name');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
    return false;
});


// user inserts file into post. only run custom if user started process using the above process
// window.send_to_editor(html) is how wp would normally handle the received data

window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function(html){
    var fileurl;

    if (formfield != null) {
        fileurl = $('img',html).attr('src');

        $('#wp-ss-image').val(fileurl);

        tb_remove();

        $('html').removeClass('Image');
        formfield = null;
    } else {
        window.original_send_to_editor(html);
    }
};

});

これがスクリプトを呼び出すための私の関数です。

add_action('admin_print_scripts-widgets.php', 'wp_ss_image_admin_scripts');

function wp_ss_image_admin_scripts() {
    wp_enqueue_script( 'wp-ss-image-upload', plugins_url( '/WP-Simple-Social/wp-simple-social-image.js' ), array( 'jquery','media-upload','thickbox' ) );
}

add_action('admin_print_styles-widgets.php', 'wp_ss_admin_styles');

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

そして、これが入力ボックスと画像アップロードボタンを表示するためのHTMLです：

<p>Upload Photo: <input id="wp-ss-image" class="widefat" type="text" size="75" name="<?php echo $this->get_field_name( 'image' ); ?>" value="<?php echo esc_url( $image ); ?>" />
        <input id="upload_image_button" type="button" value="Media Library Image" class="button-secondary" />

必要なファイル/スクリプトがすべてロードされているので、これはjQueryの問題になり得ますか？

他に役立つ情報がある場合はお知らせください。助けてくれてありがとう。

plugin-developmentwidgetsjquery
3
user715564

私はまたmedia-upload.php?type=image&amp&TB_iframe=1というURLの誤字に気づいた。たぶんこれは問題です。

また実用的な例：

jQuery( 'input[id^=my_field]' ).live( 'click', function($) {

     formfield = $( 'input[id^=my_image]', $(this).closest('.widget') ).attr( 'name' );
     tb_show( '', 'media-upload.php?type=image&amp;TB_iframe=1' );

     return false;
} );
1
bueltge