メタボックスでWordpress 3.5 Media Uploaderを使用していますか?


16

これは可能ですか?

新しいアップローダーの仕組みが大好きです。私はそれが他の方法がしたように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;
});
});

回答:


9

私が現在知っている限り、基本的な機能とオーバーライドを始めるために、より良い解決策があるかもしれませんが、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'); }

ありがとう!私はそれを動作させることができないようです。上記の古いメディアアップローダーに使用していたものを貼り付けました(それが役立つ場合)。
すさまじい

Ipstenuとサポートチームは、WordPress 3.5で報告されている問題のマスターリスト(wordpress.org/support/topic/…)をまとめました。このスレッドは、ユーザーからのフィードバックを目的としたものではありませんが、報告されている既知の問題と問題の修正方法に関する指示をすばやく強調するキュレーションスレッドです。
タラ

ライトボックスの終了イベントを聞くにはどうすればよいですか?誰かが新しいイメージを選択しない場合、私は、カスタム関数をトリガーする必要がある
Xaver

3
//リスナーを追加:wp.media.view.Modal.prototype.on( 'close'、function(){console.log( 'triggered close');}
ungestaltbar

6

ここに小さなチュートリアルがありますテーマオプションで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();


複数ではなく単一の画像選択のみを提供する場合はどうなりますか?
Mehul Kaklotar

3

私はまだ準備が整っていないのとほぼ同じことをやっていますが、うまくいきます:

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&amp;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>要素にアップロードして送信できます。
私はそれを設定としてこれをやろうとしていますが、それは動作します、今必要なのは添付ファイルIDを送信する信頼できる方法です<input>


どうもありがとうございます!!! これは、解決策を求めて2日間絶望的に狩りを行った後、ようやく機能しました!!! トンありがとう!
デブナー

あなたは私のプラグインでこれのソースコードを見てみたいかもしれません:wordpress.org/extend/plugins/default-featured-image
janw

3

@janwはこれを完全に正しくしていると思いますが、私は1つのことを機能させることができませんでした。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" />

次に、functions.phpファイルでも、カスタムjqueryファイルとthickbox cssファイルをキューに入れました:

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の答えが私にしたように、これが誰かの助けになることを願っています。


0

これは古い投稿であることは知っていますが、調査結果を共有したいだけです。

メディアエディターを開くには、この関数を呼び出します

wp.media.editor.open();

メディアエディターは基本的に、コンテンツを渡すtinyMCEエディター(window.tinymce)、次にQuicktags(window.QTags)をチェックします。

コンテンツを取得するアプローチのためにwindow.QTags、次のinsertContent()メソッドを持つカスタムオブジェクトを割り当てました。

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.