Custom Field Gui Utilityでアップロードボタンが表示されない場合の対処法

Custom Field Gui Utility プラグインで以前まではメディアアップロードボタンがフィールド分表示されていたのに表示されない！って場合の対処法です。

ちなみにプラグインのバージョンは2.1.0のものです。

jQueryバージョンは1.3.2

パッチ

rc-custom-field-gui.jsの173行目付近から180行目付近をコメントで囲い、以下のように修正しました。

	jQuery("div.clone_replace").each(function(){
        var mediaButton = jQuery("div#media-buttons:first").clone(true);
        mediaButton
            .find("#add_image, #add_video, #add_audio")
            .remove()
            .end()
            .addClass("clone")
            .css({ float: 'none', fontSize: '13px' })
            .append('<img alt="メディアを追加" src="images/media-button-other.gif" class="clone_add_media" style="cursor:pointer;"/>')
            .find("#add_media").hide();
        jQuery(this).replaceWith(mediaButton);
	});

// 以下をコメントアウト
/*
var clone = jQuery('div#media-buttons').clone(true);
	clone.css({'float':'none','font-size':'13px'})
	     .addClass('clone')
	     .append('<img alt="メディアを追加" src="images/media-button-other.gif" class="clone_add_media" style="cursor:pointer;"/>');
	clone.find('#add_image, #add_video, #add_audio').remove();
	clone.find('#add_media').hide();

	jQuery('div.clone_replace').replaceWith(clone);
*/
// ここまでコメントアウト

対処内容について

jQueryでは、replaceWithという、内容を指定した内容で置き換えることができる便利な関数が有るのですが、以下のような状態では、最後に変更（置き換えられた）された1箇所のみが表示されます。

HTML側

<p class="trigger">Click Me !</p>

<!-- 以下は p.trigger に置き換えられる対象となる -->
<div class="replace replace_node_1"></div>
<div class="replace replace_node_2"></div>
<div class="replace replace_node_3"></div>
<div class="replace replace_node_4"></div>
<div class="replace replace_node_5"></div>
<div class="replace replace_node_6"></div>
<div class="replace replace_node_7"></div>
<div class="replace replace_node_8"></div>
<div class="replace replace_node_9"></div>
<div class="replace replace_node_10"></div>

JavaScript側

var c = jQuery("p.trigger").click(function(){ console.log('Clicked me !!'); }).clone();

// div.replace という要素が10個位有るとする
jQuery("div.replace").replaceWith(c);

期待HTML

<p class="trigger">Click Me !</p>

<!-- 全ての div.replace が置換されるはず！ -->
<p class="trigger">Click Me !</p>
<p class="trigger">Click Me !</p>
<p class="trigger">Click Me !</p>
<p class="trigger">Click Me !</p>
<p class="trigger">Click Me !</p>
<p class="trigger">Click Me !</p>
<p class="trigger">Click Me !</p>
<p class="trigger">Click Me !</p>
<p class="trigger">Click Me !</p>
<p class="trigger">Click Me !</p>

実行結果

<p class="trigger">Click Me !</p>

<!-- ( ﾟдﾟ) -->
<p class="trigger">Click Me !</p>

補足：こうなる理由

1.3系のreplaceWith関数は、内部では単にafter関数で指定された要素の後ろに入れて、指定要素をremove関数で消しています。

これにより、クラス属性で選択したHTMLでも選択要素を全て指定要素に置き換えてくれるという事はされませんでした。

1.6系あたりからは、replaceWithに関数が指定された場合、要素をそれぞれ走査し個々の要素に処理をすることも可能になっています。

私が修正したソースではいささか冗長ではありますが、WordPress3.1.2（あったのがこれしかなかった）でも動作を確認したところ、問題なく動作していました。

2011/06/13追記

こっちのソースでも問題なかった。

jQuery("div.clone_replace").replaceWith(function(){
    var mediaButton = jQuery("div#media-buttons:first").clone(true);
    mediaButton
        .find("#add_image, #add_video, #add_audio")
        .remove()
        .end()
        .addClass("clone")
        .css({ float: 'none', fontSize: '13px' })
        .append('<img alt="メディアを追加" src="images/media-button-other.gif" class="clone_add_media" style="cursor:pointer;"/>')
        .find("#add_media").hide();
    return mediaButton;
});

eachがreplaceWithになっただけです。

また、新しいバージョンを使うことで個の問題は対処されているっぽいです。

Nullyのぶろぐ

仙台から東京へ転勤したエンジニアのブログ