メタボックスでWordpress 3.5 Media Uploaderを使用しますか？
これは可能ですか？
私は新しいアップローダがどのように機能するかが大好きです。私はそれが他の方法がしたようにjQuery呼び出しと関係があると思います。
_編集_
これは私が現在使っているコードです。
jQuery(document).ready(function($) {
$('.custom_upload_image_button').click(function() {
imageField = $(this).prev('input');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
});
window.send_to_editor = function(html) {
imgurl = $(html).attr('href');
$(imageField).val(imgurl);
tb_remove();
};
$('.clear_field').click(function() {
var defaultImage = jQuery(this).parent().siblings('.custom_default_image').text();
jQuery(this).parent().siblings('.custom_upload_image').val('');
return false;
});
});
あなたが始めるために、私が現在知っている限りでは、基本的な機能とオーバーライド。より良い解決策があるかもしれませんが、私はまだ3.5で2日しかありませんでした：
// open modal - bind this to your button
if ( typeof wp !== 'undefined' && wp.media && wp.media.editor )
wp.media.editor.open( ##unique_id_here## );
// backup of original send function
original_send = wp.media.editor.send.attachment;
// new send function
wp.media.editor.send.attachment = function( a, b) {
console.log(b); // b has all informations about the attachment
// or whatever you want to do with the data at this point
// original function makes an ajax call to retrieve the image html tag and does a little more
};
// wp.media.send.to.editor will automatically trigger window.send_to_editor for backwards compatibility
// backup original window.send_to_editor
window.original_send_to_editor = window.send_to_editor;
// override window.send_to_editor
window.send_to_editor = function(html) {
// html argument might not be useful in this case
// use the data from var b (attachment) here to make your own ajax call or use data from b and send it back to your defined input fields etc.
}
これは完全な解決策ではありません。あなたは自分自身であなたの入力フィールドを定義して追跡しなければなりません。もっと具体的な質問がある場合は、聞いてください。
また、スクリプトが完成したら、必ず元の機能を再割り当てしてください。
コメントから抜粋：
ライトボックスのクローズイベントをどうやって聞くことができますか？
// add listener:
wp.media.view.Modal.prototype.on('close', function(){ console.log('triggered close'); }
テーマオプションでWP 3.5メディアアップローダを使用する方法についての小さな チュートリアル があります。それが私が思いついたことであり、私にとっては完璧に機能します。あなたがより良い解決策を思いついたかどうか私に知らせてください。
これが私のテーマオプションにコードを実装した方法です。
jQuery(document).ready(function($){
$('.stag-metabox-table .button').click(function(e){
var send_attachment_bkp = wp.media.editor.send.attachment;
var button = $(this);
var id = button.attr('id').replace('_button', '');
wp.media.editor.send.attachment = function(props, attachment){
$("#"+id).val(attachment.url);
wp.media.editor.send.attachment = send_attachment_bkp;
}
wp.media.editor.open(button);
return false;
});
});
更新
このコードは編集後のページでのみ機能します。テーマオプションページで機能させるためにはwp_enqueue_media();を追加する必要があります。
私はそれがまだ準備ができていないのとほとんど同じことをやっていますが、それは動作します：
pHPで：
<input id="default_featured_image" type="text" size="100" name="default_featured_image" value="<?php echo esc_attr( $value ); ?>" />
<?php
do_action( 'media_buttons', 'default_featured_image' ); // second argument is the same as the `<input>` id
JavaScript：
jQuery('#default_featured_image_button').click(function () {
var formfield = jQuery('#default_featured_image').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function (html) {
var imgurl = jQuery('img', html).attr('src');
console.log(jQuery('img', html));
console.log(html);
console.log(imgurl);
// set the url as the value
jQuery('#default_featured_image').val(imgurl);
tb_remove();
};
これにより、画像のURL（任意のサイズ）をアップロードして<input>要素に送信できます。
私は設定としてこれをやろうとしていてそれはうまくいきます。今必要なのは<input>に添付IDを送る信頼できる方法だけです
私は@janwがこれを完全に正しいと考えていますが、私は一つのことをうまくいくことができませんでした。 Janは、次の方法でメディアライブラリボタンを挿入します。
do_action( 'media_buttons', 'default_featured_image' );
そして次のようにしてデフォルトのアクションを横取りします。
jQuery('#default_featured_image_button').click(function () {...
私が遭遇した問題はこの方法でメディアボタンを挿入することがリンクに "default_featured_image_button"のidを割り当てないことです。実際には、挿入されたリンクにIDを追加しません。だからこれは私がそれを機能させるためにしたことです。
入力フィールドの直後に、メタボックスコールバック関数に次の行を追加しました。
<input id="upload_logo_button" type="button" value="Media Library Image" class="button-secondary" />
次に、私のカスタムjqueryファイルとthickbox cssファイルを、同じくfunctions.phpファイルに入れて、次のように入力しました。
add_action('admin_enqueue_scripts', 'jhsir_load_image_set_js');
function jhsir_load_image_set_js() {
wp_enqueue_script( 'jhsir_image_set_script', get_stylesheet_directory_uri() . '/js/image-set.js', array('jquery','media-upload','thickbox') );
wp_enqueue_style( 'thickbox' );
}
最後に、私のimage-set.jsファイルには以下が含まれています。
jQuery(document).ready(function($) {
var formfield = null;
$('#upload_logo_button, #upload_background_button').click(function() {
$('html').addClass('Image');
formfield = $(this).prev('input').attr('name');
formfield_id = $(this).prev('input').attr('id');
tb_show( '', 'media-upload.php?type=image&TB_iframe=true' );
return false;
});
// user inserts file into post.
// only run custom if user started process using the above process
// window.send_to_editor(html) is how wp normally handles the received data
window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function( html ) {
var fileurl;
if(formfield != null) {
fileurl = $( 'img', html).attr('src');
$( "#" + formfield_id ).val(fileurl);
tb_remove();
$('html').removeClass('Image');
formfield = null;
} else {
window.original_send_to_editor(html);
}
};
});
JQueryを呼び出すリンクの直前の入力フィールドの名前とIDを格納するために変数を使用したことに気付くでしょう。このように、このコードは同じページで繰り返し使用することができます。あなたがちょうどすべてのボタンにクラスを割り当てるか、私がやったようにあなたのjqueryの中のボタンに個々のidを使う必要があるでしょう。 Janの答えが私にしたようにこれが誰かに役立つことを願っています。
これは古い投稿であることを私は知っていますが、私は自分の発見を共有したいと思います。
メディアエディタを開くには、この関数を呼び出します。
wp.media.editor.open();
メディアエディタは基本的にtinyMCEエディタ（window.tinymce）をチェックし、次にQuicktags（window.QTags）をチェックして内容を渡します。
コンテンツを取得するための私のアプローチでは、insertContent()メソッドを持つカスタムオブジェクトでwindow.QTagsを割り当てました。
var newObject = {
insertContent: function(html){
// to extract the image source
$(html).find('img').attr('src');
}
}
// assign the newObject to window.QTags property
window.QTags = newObject;
参照： phpxref