[jquery] あなたのテーマのオプションのWordpressの3.5カスタムメディアのアップロード



1 Answers

意図しない方法でそれについてあなたの行くこと。 あなたの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();
});
Question

Wordpress 3.5は最近リリースされました。私はWordpressのメディアアップロードシステムをthickboxとwindow.send_to_editorでWordpressのテーマ(背景、ロゴなど)のいくつかのオプションに使用しました。

しかし、Wordpressが新しいMedia Managerを統合したことをご存知のように、私はこの新しい機能を使ってイメージ/ファイルをカスタムフィールドとしてアップロードしたいと思っていました。 だから、私は午前中に希望の結果を得る方法を見つけました。

私はこの解決策を見いだしました。これはあなたにとって役に立つものです。 コードの改善や改善点をお寄せいただきありがとうございます。

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)実行できます。




エディタを閉じるとカスタム関数を起動するものは何も見つかりませんでした。 私はこれを使う:

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
    });
}



Related