68

WordPress 3.5が最近リリースされました。私は、thickboxを介してWordPress Media Uploadシステムをwindow.send_to_editor使用し、WordPressテーマのいくつかのオプション（背景、ロゴなど）に使用しました。

しかし、WordPressが新しいメディアマネージャーを統合したことをご存知のように、私はこの新機能を使用して画像/ファイルをカスタムフィールドとしてアップロードしたいと思いました。それで、私は希望する結果を得る方法を見つけるために朝を過ごしました。

私はこの解決策で見つけました、それはあなたの何人かのために役立つことができます。コードや考えている改善点についてフィードバックをお寄せいただきありがとうございます。

HTMLサンプル：

<a href="#" class="custom_media_upload">Upload</a>
<img class="custom_media_image" src="" />
<input class="custom_media_url" type="text" name="attachment_url" value="">
<input class="custom_media_id" type="text" name="attachment_id" value="">

jQueryコード：

$('.custom_media_upload').click(function() {

    var send_attachment_bkp = wp.media.editor.send.attachment;

    wp.media.editor.send.attachment = function(props, attachment) {

        $('.custom_media_image').attr('src', attachment.url);
        $('.custom_media_url').val(attachment.url);
        $('.custom_media_id').val(attachment.id);

        wp.media.editor.send.attachment = send_attachment_bkp;
    }

    wp.media.editor.open();

    return false;
});

変数に含まれるすべての設定を確認したい場合は、またはattachmentを実行できます。console.log(attachment)alert(attachment)

4

5 に答える 5

35

意図しない方法でそれについて行っています。javascriptコードはおそらく次のようになります。

$('.custom_media_upload').click(function(e) {
    e.preventDefault();

    var custom_uploader = wp.media({
        title: 'Custom Title',
        button: {
            text: 'Custom Button Text'
        },
        multiple: false  // Set this to true to allow multiple files to be selected
    })
    .on('select', function() {
        var attachment = custom_uploader.state().get('selection').first().toJSON();
        $('.custom_media_image').attr('src', attachment.url);
        $('.custom_media_url').val(attachment.url);
        $('.custom_media_id').val(attachment.id);
    })
    .open();
});
于 2013-04-17T21:24:24.280 に答える
33

wp_enqueue_media投稿編集ページを表示していない場合は、（3.5の新機能）を使用することを忘れないでください。

古いメディアアップロードボックスを使用するには、次のようにします。

if(function_exists( 'wp_enqueue_media' )){
    wp_enqueue_media();
}else{
    wp_enqueue_style('thickbox');
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
}
于 2012-12-13T11:48:32.973 に答える
7

このコードをもう少し変更して、一度に複数のフィールドで使用できるようにしました。

HTML：

<!-- Image Thumbnail -->
<img class="custom_media_image" src="" style="max-width:100px; float:left; margin: 0px     10px 0px 0px; display:inline-block;" />

<!-- Upload button and text field -->
<input class="custom_media_url" id="" type="text" name="" value="" style="margin-bottom:10px; clear:right;">
<a href="#" class="button custom_media_upload">Upload</a>

jQuery：

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

$('.custom_media_upload').click(function() {

        var send_attachment_bkp = wp.media.editor.send.attachment;
        var button = $(this);

        wp.media.editor.send.attachment = function(props, attachment) {

            $(button).prev().prev().attr('src', attachment.url);
            $(button).prev().val(attachment.url);

            wp.media.editor.send.attachment = send_attachment_bkp;
        }

        wp.media.editor.open(button);

        return false;       
    });

});
于 2013-01-22T16:03:30.400 に答える
4

エディターを閉じた場合にカスタム関数をトリガーするものは何も見つかりませんでした。私はこれを使用します：

wp.media.editor.open();
$('.media-modal-close, .media-modal-backdrop').one('click', function(){
    //do some stuff
});

以上：

var id = wp.media.editor.id();
var editor = wp.media.editor.get( id );
if('undefined' != typeof( editor )) editor = wp.media.editor.add( id );

if ( editor ) {
    editor.on('close', function(){
        //do some stuff
    });
}
于 2012-12-14T11:15:09.650 に答える
3

私はこれで遊ぶ機会があまりありませんでしたが、ギャラリー要素を活用しようとしている人にとっては、このコードはあなたをあなたの道に導くはずです。

これは単なる出発点であり、画像IDのコンマ区切りのリストのみを提供しますが、クリエイティブになり始めるにはそれで十分です。

<input id="custom_media_id" type="text" name="attachment_id" value="">
<a href="#" class="button custom_media_upload" title="Add Media">Add Media</a>

<script type="text/javascript">
  jQuery('.custom_media_upload').click(function() {
    var clone = wp.media.gallery.shortcode;
    wp.media.gallery.shortcode = function(attachments) {
    images = attachments.pluck('id');
    jQuery('#custom_media_id').val(images);
    wp.media.gallery.shortcode = clone;
    var shortcode= new Object();
    shortcode.string = function() {return ''};
    return shortcode;
  }
jQuery(this).blur(); // For Opera. See: http://core.trac.wordpress.org/ticket/22445
wp.media.editor.open();
return false;       
});
</script>

これにより、（新しいドラッグアンドドロップ機能を使用して）エディターで設定された順序で、画像IDのコンマ区切りリストが入力フィールドに入力されます。

この関数は、メインエディターに配置するためにショートコードが返送されることを想定していますが、これは望まないため、挿入用の空白の文字列を返す新しいオブジェクトを作成します。

また、これは上記のように単一の画像の挿入を処理しないことに注意してください-それは単に投稿エディタに配置されます。したがって、2つのリスナーを組み合わせるか、適切なタブを削除してみてください。

編集

コアを見て時間を費やしたので、このプロセス全体は、ここで説明した手法を使用すると実際には簡単に実行できると思いますが、読んでいるように、画像を再度開いたときに画像を事前に選択する方法はまだわかりません。メディアマネージャー。

于 2012-12-16T12:29:47.813 に答える