web-dev-qa-db-ja.com

How to：同じオプションページに複数のワードプレスメディアアップローダボタンをJQueryするには？


私のテーマオプションページのボタンを使って、ワードプレスのメディアアップローダを呼び出したいです。つまり、同じページに3つのメディアアップロードボタンが必要です。私はjQueryの複数IDセレクタを使ってそれをやろうとしています。ボタンをクリックするとメディアアップローダーが起動しますが、最初の入力フィールドに何かをアップロードすると、アップロードしたメディアがページ内の他の入力フィールドに渡されます。それらが一緒に結合されたように。ばかげた質問ですみません、私は多くのJavaScriptを知りません。しかし、とにかく、どうすればこれを修正できますか？

jQuery(document).ready(function( $) {
var mediaUploader;
$('#upload-button-1, #upload-button-2, #upload-button-3').on('click', function(e) {
e.preventDefault();
if( mediaUploader ){
mediaUploader.open();
return;
}
mediaUploader = wp.media.frames.file_frame = wp.media({
title: 'Upload', 
button: {
    text: 'Upload'
},
multiple: false
});

mediaUploader.on('select', function () {
attachment = mediaUploader.state().get('selection').first().toJSON();
$('#preview-fav, #preview-grav, #preview-thumb').val(attachment.url);
$('.favicon-preview, .gravatar-preview, .thumbnail-preview')
.css('background','url(' + attachment.url + ')');

});

mediaUploader.open();

});
});
theme-developmentjqueryjavascripttheme-options
1
Lola Bittencourt

現時点で起こっているのは、選択したメディアアイテムを次の行の3つの入力すべてに割り当てているということです。

j('#preview-fav, #preview-grav, #preview-thumb').val(attachment.url);

そのうちの1つだけに値を渡すには、ボタンに設定されているある種のマーカーに反応するようにその行を変更する必要があります。以下の例では、JavaScriptで参照されているボタンにdata属性を設定しました。

このHTMLがあるとします。

<!-- upload buttons -->
<input type="button" class="upload-button" data-target="input_1" value="Upload button 1" />
<input type="button" class="upload-button" data-target="input_2" value="Upload button 2" />
<input type="button" class="upload-button" data-target="input_3" value="Upload button 3" />

<!-- inputs to receive the value -->
<input type="text" id="input_1" value="" />
<input type="text" id="input_2" value="" />
<input type="text" id="input_3" value="" />

これをjsで実行できます。

jQuery(function($) {

    $(document).ready(function () {

            var mediaUploader;

            // we can now use a single class name to reference all upload buttons
            $('.wp-admin').on('click', '.upload-button', function(e) {

                e.preventDefault();                

                // store the element that was clicked for use later
                trigger = $(this);

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

                mediaUploader = wp.media.frames.file_frame = wp.media({
                    title: 'Upload', 
                    button: {
                        text: 'Upload'
                    },
                    multiple: false
                });

                mediaUploader.on('select', function() {

                    attachment = mediaUploader.state().get('selection').first().toJSON();

                    // we're replacing this line:
                    //$('#preview-fav, #preview-grav, #preview-thumb').val(attachment.url);

                    // assign the value of attachment to an input based on the data-target value
                    // of the button that was clicked to launch the media browser
                    $('#' + trigger.data('target') ).val(attachment.url);

                    $('.favicon-preview, .gravatar-preview, .thumbnail-preview').css('background','url(' + attachment.url + ')');
                });

                mediaUploader.open();

            });            

    });

});

更新

貼り付けたコードに基づいて、次のようにもっと効率的にすることができます。

function sweetlola_images(){

    $imgs = array(
        'gravatar'  => 'img_1',
        'thumbnail' => 'img_2',
    );

    foreach( $imgs as $name => $id ){

        // get the image
        $url = esc_attr( get_option( $name ) );

        // if there isn't one, set $gravatar as empty string
        $url = $url ? $url : '';

        //upload button
        echo '<input type="button" data-target="' . $id . '"  value="Upload" class="button button-secondary upload-button" />';

        //input text field
        echo '<input type="text" id="' . $id . '" name="' . $name . '" value="' . $url . '" />';

        if( empty( $url ) ){ //if the value is empty this will show a just the upload button
            echo '<input type="button" value="Remove" data-remove_target="' . $id . '" class="button button-secondary" />';
        }

        // note
        echo '<p><i>Idem.<br />Resolução: 89px X 89px</i></p>'; 

    }
}

3つの画像タイプを$imgs配列に入れて、それらすべてを単一の関数で生成します。

0
shahar

私は実際にphp関数の中にHTMLを持っています：

function sweetlola_blog_gravatar(){
$gravatar = esc_attr( get_option( 'gravatar_img' ));
if ( empty ($gravatar) ){ //if the value is empty this will show a just the upload button
echo '<input type="button" value="Upload" id="upload-button-2" class="button button-secondary" /> //upload buton
<input type="text" id="preview-grav" name="gravatar_img" value="" />
<p><i>Idem.<br />Resolução: 89px X 89px</i></p>';//input text field
} else { //otherwise it will show an upload and a remove button
echo '<input type="button" value="Upload" id="upload-button-2" class="button button-secondary" /> //upload button
<input type="text" id="preview-grav" name="gravatar_img" value="'.$gravatar.'" /> //input text field
<input type="button" value="Remove" id="remove-button-2" class="button button-secondary" /><p><i>Idem.<br />Resolução: 89px X 89px</i></p>'; //remove button
}
}

function sweetlola_blog_gravatar(){
$gravatar = esc_attr( get_option( 'gravatar_img' ));
if ( empty ($gravatar) ){
echo '<input type="button" value="Upload" id="upload-button-2" class="button button-secondary" />
<input type="text" id="preview-grav" name="gravatar_img" value="" />
<p><i>Idem.<br />Resolução: 89px X 89px</i></p>';
} else {
echo '<input type="button" value="Upload" id="upload-button-2" class="button button-secondary" />
<input type="text" id="preview-grav" name="gravatar_img" value="'.$gravatar.'" />
<input type="button" value="Remove" id="remove-button-2" class="button button-secondary" />
<p><i>Idem.<br />Resolução: 89px X 89px</i></p>';
}
}

function sweetlola_blog_thumbnail(){
$thumbnail = esc_attr( get_option( 'thumbnail_img' ));
if ( empty ($thumbnail) ){
echo '<input type="button" value="Upload" id="upload-button-3" class="button button-secondary" id="upload-button-3" />
<input type="text" id="preview-thumb" name="thumbnail_img" value="" />
<p><i>Resolução-mínima(imagens menores<br /> ficarão desfocadas): 118px X 118px</i></p>';
} else {
echo '<input type="button" value="Upload" id="upload-button-3" class="button button-secondary" id="upload-button-3" />
<input type="text" id="preview-thumb" name="thumbnail_img" value="'.$thumbnail.'" />
<input type="button" value="Remove" id="remove-button-3" class="button button-secondary" /><p><i>Resolução-mínima(imagens menores<br /> ficarão desfocadas): 118px X 118px</i></p>';
}
}
0
Lola Bittencourt