2013-07-04 10 views
9

私はカスタム設定ページでワードプレステーマを構築しています。設定の中には、ユーザーが画像のセット(1以上)をアップロード/追加する必要があるものがあります。メディアアップローダのデフォルトの動作は、1つの画像をアップロードおよび/または選択して投稿に挿入することです。ワードプレス3.5メディアアップローダ複数ファイル選択

私はメディアアップローダを利用してthis excellent guideに従っています。これは、複数をtrueに設定できるはずだと示唆していますが、1つのファイルのみをアップロードまたは選択することもできます。ここで

は私のコードです:必要なスクリプトで

ロードこれは、カスタム設定ページですので、:

if(function_exists('wp_enqueue_media')){ 
    wp_enqueue_media(); 
}else{ 
    wp_enqueue_style('thickbox'); 
    wp_enqueue_script('media-upload'); 
    wp_enqueue_script('thickbox'); 
} 

Javascriptを/ jQueryのメディアアップローダーを表示し、選択した画像を処理するための:

var tgm_media_frame; 

$('.upload-images').click(function() { 

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

    tgm_media_frame = wp.media.frames.tgm_media_frame = wp.media({ 
    multiple: true, 
    library: { 
     type: 'image' 
    }, 
    }); 

    tgm_media_frame.on('select', function(){ 
    var selection = tgm_media_frame.state().get('selection'); 
    selection.map(function(attachment) { 
     attachment = attachment.toJSON(); 
      console.log(attachment); 
      // Do something with attachment.id and/or attachment.url here 
    }); 
    }); 

    tgm_media_frame.open(); 

}); 

誰もが複数のファイル選択を正しく動作させることができましたか?何か不足していますか?ありがとう!

答えて

11

更新

私は質問が尋ねたと答えたので、メディアアップローダーが更新されていると思います。私はワードプレスの以前のバージョンではmultiple: 'add'オプションは他のユーザーによって提案されていないと思います。私は十分ではない。


すべてがコードに適しています。ちょっとした欠けている部分。 attachment

selection.map(function(attachment) { 
    attachment = attachment.toJSON(); 
    $("#something").after("<img src=" +attachment.url+">"); 
}); 

は、マニュアルで述べたように、あなたがそれを使用することができtoJSONを変換します。画像URLをサーバーにポストしている隠しフィールドに配置して、選択した画像をユーザーに同時に表示することができます。

私は変な感じほんの少しの事は、我々は画像を選択するCTRL +クリックを押す必要があり、ということです。それはむしろチェックボックスなどでなければなりません。


更新

CTRL +クリックまたはシフト複数の画像を選択するための + クリックは、ワードプレスを与えている方法です。 toggleSelectionHandler - よく見ると、

オープン... \の\ JS \メディアviews.js

をWP-含ん用に定義された関数があります。ユーザーが押したキーの組み合わせをリッスンし、特定のクラスを変更して実際の選択を引き起こす他の関数を呼び出します。青の太い枠線で(

  1. selected
  2. details

detailsクラスが現在のクリック/アクティブな選択のスタイルを定義する -

firbugに検査した後、次の2つのクラスが適用されている見ることができます)、selectedは実際には画像を選択済みとしてマークし、選択配列に返します。

この動作をそのファイル自体から変更することも、選択を処理する独自の関数を書き込むこともできます。最初のアプローチは良くありません。

PS:Wordpressは上記のファイルを実際に使用していません。同じファイルの圧縮されたバージョンを選択します。したがって、圧縮されていないファイルを読み込んで再生したいことがあります。あなたはwp-config.php

define('SCRIPT_DEBUG', true); 

を設定することにより、非圧縮のjsファイルを使用するようにワードプレスを強制することができます。これにより、load-scripts.phpの動作がスキップされます(すべてのjsファイルのバージョンがマージされて1つのファイルに圧縮されます)。

+0

SachinGのおかげで、私はあなたがメディアアップローダで複数の画像を選択するためにShift +クリックを押さなければならないということを知らなかった。私はすでに、複数の画像を選択したときに動作する「何か」の代わりに実装されたコードを持っています。私はちょうど人々がそれをするためにシフトをクリックしてクリックする必要はなかったことを望む!それ以外の方法はないと思いますか? – Cory

+0

@Cory最新の回答をご覧ください。 – SachinGutte

+0

WP Coreファイルの変更を伴わないバージョンを確認できますか? –

1

誰でもこれを行う方法を知りたい場合は、1つの方法です。実装されているスコープ内のデフォルト動作を完全に上書きすることに注意してください。 multipletrueに設定されている

wp.media.view.Attachment.prototype.toggleSelectionHandler = function(event) { 
    var method = 'between'; 
    if (event.shiftKey) { 
     method = 'between'; 
    } else { 
     method = 'toggle'; 
    } 

    this.toggleSelection({ 
     method: method 
    }); 
}; 

場合、これはあなたがギャラリーの画面のように複数の項目を選択できるようになります。

+0

"Perfect!" –

11

multiple:truemultiple:'add'に変更するだけです。これは、既定のCreate Galleryの仕組みです。

+2

これは単に正しい答えです。 'multiple:" toggle "'も興味があります。 – lukkysam

+0

これは正しい答えです! –

+0

私はこのオプションが以前のバージョンにはなかったと思っています。ワードプレスの。 – SachinGutte