web-dev-qa-db-ja.com

Wordpressのメディアアップローダを使用して複数の画像URLを設定する

私のクライアントが入れることができる追加情報を入れるために私はメタボックスを設定しました、そしてそれはページの異なるセクションに現れるでしょう。

このページはhttp://96.125.170.106/~prestonp/?project=360に表示されます。

データはページの右側に表示されますが、このデータにも、下の画像のようにページの上部と右側に表示される写真を含めたいと思います。

enter image description here

これまでのところ、私はselect image systemを追加しました、そして、それは働きます...種類...私が2つのセットアップを持っているならば私が2つを持っているならばたとえば、[Upload Image]をクリックして画像を選択すると、画像のURLがThumb 1ではなくMain Imageに配置されます。

enter image description here

enter image description here

私の問題はjQueryにあると確信していますが、jQueryについてはあまり知識がありません。誰かが私の問題がどこにあるのか私がわかるのを手伝ってくれる？私のコードは以下の通りです。

<?php

function wp_gear_manager_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_enqueue_script('jquery');
}

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

add_action('admin_print_scripts', 'wp_gear_manager_admin_scripts');
add_action('admin_print_styles', 'wp_gear_manager_admin_styles');

?>

<script language="JavaScript">
jQuery(document).ready(function() {
jQuery('#upload_image_button_main').click(function() {
formfield = jQuery('#_my_meta_upload_image_main').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('#_my_meta_upload_image_main').val(imgurl);
tb_remove();
}

});
</script>
<script language="JavaScript">
jQuery(document).ready(function() {
jQuery('#upload_image_button_1').click(function() {
formfield = jQuery('#_my_meta_upload_image_1').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('#_my_meta_upload_image_1').val(imgurl);
tb_remove();
}

});
</script>


<div class="my_meta_control">
    <p>Fill out this box to complete the project data section of the project page.</p>
    <label>Project Name</label>
    <p><input type="text" name="_my_meta[name]" value="<?php if(!empty($meta['name'])) echo $meta['name']; ?>"/></p>
    <label>Project Location</label>
    <p><input type="text" name="_my_meta[location]" value="<?php if(!empty($meta['location'])) echo $meta['location']; ?>"/></p>
    <label>Project Client</label>
    <p><input type="text" name="_my_meta[client]" value="<?php if(!empty($meta['client'])) echo $meta['client']; ?>"/></p>
    <label>Project Data</label>
    <p><input type="text" name="_my_meta[stories]" value="<?php if(!empty($meta['stories'])) echo $meta['stories']; ?>"/> <span>Stories</span><br />
    <input type="text" name="_my_meta[units]" value="<?php if(!empty($meta['units'])) echo $meta['units']; ?>"/> <span>Units</span><br />
    <input type="text" name="_my_meta[acres]" value="<?php if(!empty($meta['acres'])) echo $meta['acres']; ?>"/> <span>Acres</span><br />
    <input type="text" name="_my_meta[unitsPerAcres]" value="<?php if(!empty($meta['unitsPerAcres'])) echo $meta['unitsPerAcres']; ?>"/> <span>Units/Acres</span><br />
    <input type="text" name="_my_meta[website]" value="<?php if(!empty($meta['website'])) echo $meta['website']; ?>"/> <span>Website</span><br /><br /><br /><br />
    <input id="_my_meta_upload_image_main" type="text" size="36" name="_my_meta[upload_image_main]" value="<?php if(!empty($meta['upload_image_main'])) echo $meta['upload_image_main']; ?>" /><input id="upload_image_button_main" type="button" value="Upload Image" /> <span>Main Image</span><br />

    <input id="_my_meta_upload_image_1" type="text" size="36" name="_my_meta[upload_image_1]" value="<?php if(!empty($meta['upload_image_1'])) echo $meta['upload_image_1']; ?>" /><input id="upload_image_button_1" type="button" value="Upload Image" /> <span>Thumb 1</span><br />
    <input id="_my_meta_upload_image_2" type="text" size="36" name="_my_meta[upload_image_2]" value="<?php if(!empty($meta['upload_image_2'])) echo $meta['upload_image_2']; ?>" /><input id="upload_image_button_2" type="button" value="Upload Image" /> <span>Thumb 2</span><br />
    <input id="_my_meta_upload_image_3" type="text" size="36" name="_my_meta[upload_image_3]" value="<?php if(!empty($meta['upload_image_3'])) echo $meta['upload_image_3']; ?>" /><input id="upload_image_button_3" type="button" value="Upload Image" /> <span>Thumb 3</span><br />
    <input id="_my_meta_upload_image_4" type="text" size="36" name="_my_meta[upload_image_4]" value="<?php if(!empty($meta['upload_image_4'])) echo $meta['upload_image_4']; ?>" /><input id="upload_image_button_4" type="button" value="Upload Image" /> <span>Thumb 4</span><br />
    <input id="_my_meta_upload_image_5" type="text" size="36" name="_my_meta[upload_image_5]" value="<?php if(!empty($meta['upload_image_5'])) echo $meta['upload_image_5']; ?>" /><input id="upload_image_button_5" type="button" value="Upload Image" /> <span>Thumb 5</span><br />
    <input id="_my_meta_upload_image_6" type="text" size="36" name="_my_meta[upload_image_6]" value="<?php if(!empty($meta['upload_image_6'])) echo $meta['upload_image_6']; ?>" /><input id="upload_image_button_6" type="button" value="Upload Image" /> <span>Thumb 6</span><br />
    <input id="_my_meta_upload_image_7" type="text" size="36" name="_my_meta[upload_image_7]" value="<?php if(!empty($meta['upload_image_7'])) echo $meta['upload_image_7']; ?>" /><input id="upload_image_button_7" type="button" value="Upload Image" /> <span>Thumb 7</span><br />
    <input id="_my_meta_upload_image_8" type="text" size="36" name="_my_meta[upload_image_8]" value="<?php if(!empty($meta['upload_image_8'])) echo $meta['upload_image_8']; ?>" /><input id="upload_image_button_8" type="button" value="Upload Image" /> <span>Thumb 8</span><br />
    <input id="_my_meta_upload_image_9" type="text" size="36" name="_my_meta[upload_image_9]" value="<?php if(!empty($meta['upload_image_9'])) echo $meta['upload_image_9']; ?>" /><input id="upload_image_button_9" type="button" value="Upload Image" /> <span>Thumb 9</span></p>
</div>
metaboxuploads
1
BrettAdamsGA

考慮すべきことが2つあります。

  1. clickコールバック内のsend_to_editorを変更します。これは必要なときだけこの機能を変更します。アップローダーが表示されたとき。これは、グローバル変数を使った不要なことも防ぎます。

  2. あなたは常にsend_to_editorをバックアップするべきです。

これが私のサンプルコードです（notテスト済み）：

jQuery(document).ready(function($) {
    $('#upload_image_button_main').click(function() {
        var backup = window.send_to_editor;

        window.send_to_editor = function(html) {
            imgurl = $('img', html).attr('src');
            jQuery('#_my_meta_upload_image_main').val(imgurl);
            tb_remove();
        };

        tb_show('', 'media-upload.php?type=image&TB_iframe=true');

        window.send_to_editor = backup;
        return false;
    });
});
1
Anh Tran

これは少し古いですが、解決策をどこかに投稿する必要がありました。私が見たところはどこでもThickboxモーダルとmedia-upload.php iframeの使用を示していました。あなたが挿入画像を注目の画像選択モーダルのように表示させたい場合、これは間違っています。あなたが実際に使う必要があるのは、組み込みのjsクラスwp.mediaです。これが私が実装した実用的な解決策です。明らかにあなたはあなた自身のニーズに微調整する必要があります。

これにより、複数の画像を選択してから各機能で結果を処理できます。参照用にこのリンクを参照してください。 https://codex.wordpress.org/Javascript_Reference/wp.media

JavaScript：

jQuery(function($){

  var frame;
  // ADD IMAGE LINK
  $('#gmls_add_images').on( 'click', function( event ){
    event.preventDefault();
    // If the media frame already exists, reopen it.
    if ( frame ) {
      frame.open();
      return;
    }
    // Create a new media frame
    frame = wp.media({
      title: 'Select or Upload Property Images',
      button: {
        text: 'Add Images to property'
      },
      multiple: true  // Set to true to allow multiple files to be selected
    });
    // When an image is selected in the media frame...
    frame.on( 'select', function() {
        // Get media attachment details from the frame state
        var attachments = frame.state().get('selection').toJSON();
        $(attachments).each(function(key,attachment){
            jQuery('#image_list').append('<div class="image_box">'+
                '<input type="hidden" name="images[]" value="'+attachment.url+'" />'+
                '<img src="'+attachment.url+'" height="100px;" /><br>'+
                '<a title="Remove Image" onclick="jQuery(this).parent().remove();">Remove Image</a>'+
                '</div>');
        });
        $('#TB_overlay').trigger('click');
    });

    // Finally, open the modal on click
    frame.open();
  });
});

HTML：

<input type="button" id="gmls_add_images" value="Add Images">
<div class="sortable" id="image_list"></div>
0
gliffen

以下はここにあるコード の改造です 。

ノート：

  • Modは@Rilwisの提案と元のコードを組み合わせます（テストと研究が必要です）。
  • アップロードボタンは、IDではなくクラスで参照されます。
  • jQuery('#'+formfield).val(fileurl);のターゲットはあなたのコードに合わせなければなりません。
  • 未検証。
jQuery(document).ready(function() {
    var formfield;
    window.original_send_to_editor = window.send_to_editor;
    jQuery('.upload_image_button').click(function() {
        jQuery('html').addClass('Image');
        formfield = jQuery(this).prev().attr('name');

        window.send_to_editor = function(html){
            if (formfield) {
                fileurl = jQuery('img',html).attr('src');
                jQuery('#'+formfield).val(fileurl);
                tb_remove();
            } else {
                window.original_send_to_editor(html);
            }
        };

        tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');

        return false;
    });
});
0
screeneyes