Custom Field GUI Utilityでeditorが無いときにもメディアアップローダーが使えるようにする

WordPressの貧弱なカスタムフィールド機能を飛躍的に便利にするプラグインCustom Field GUI Utility。最近までWordPress3.3に対応しておらず、一部修正して使っていたりしたのですが、WordPress3.3対応版がリリースされたようなので試してみました。

バリデーション機能などの便利な機能が増えていますが、普通に上書きアップロードしてもそのまま使えました。ただ、imagefieldを使っている場合、editor（記事入力欄）が無いと、なぜかメディアアップローダーのボタンがでてこない不具合が。

ググッてみると、フォーラムに同じ症状の方が質問を投げているようですが、解決策は出ていない様子。そこで、Custom Field GUI Utilityのコードを解析してみました。

メディアアップローダーの表示の仕組み

cfg-utility.js

// アップロードボタンをクローン [start]
$('#content-add_media').clone(true).addClass('cfg_add_media_clone').removeAttr('id').appendTo('p.cfg_add_media_pointer');
// アップロードボタンをクローン [end]

コードを見ると、JavaScriptでeditorのメディアアップローダーボタンをコピーして持ってきているみたいです。だからeditorが無いと表示されない、というわけですね。

そこで、editorが無くても表示できるように、まずcfg-utility.phpを修正します。

cfg-utility.php

元々のcfg-utility.php。

EOF;
        $out = make_element ($name, $type, $class, $inside, $sample, $fieldname, $must);
    } elseif ($type == 'imagefield') {
        $inside = <<< EOF
        <p class="cfg_input">
            $input
            <img class="cancel" src="" width="16" height="16" style="display:none;" />
            <span class="thumb" id="{$name}_thumb">
                <a href="#" class="image" rel="facebox"></a>
            </span>
        </p>
        <p class="cfg_add_media_pointer"><span style="display:none;">画像を追加：<img alt="画像を追加" src="images/media-button-other.gif" class="cfg_add_media" style="cursor:pointer;" /></span></P>
EOF;

次のように修正。メディアアップローダーを直接呼び出すようにします。

EOF;
        $out = make_element ($name, $type, $class, $inside, $sample, $fieldname, $must);
    } elseif ($type == 'imagefield') {
		add_thickbox();
		wp_enqueue_script('media-upload');
		ob_start();
		do_action('media_buttons');
		$media_buttons = ob_get_contents();
		ob_end_clean();
        $inside = <<< EOF
        <p class="cfg_input">
            $input
            <img class="cancel" src="" width="16" height="16" style="display:none;" />
            <span class="thumb" id="{$name}_thumb">
                <a href="#" class="image" rel="facebox"></a>
            </span>
        </p>
		
        <p class="cfg_add_media_pointer">
			{$media_buttons}
			<span style="display:none;">画像を追加：<img alt="画像を追加" src="images/media-button-other.gif" class="cfg_add_media" style="cursor:pointer;" /></span></P>
EOF;

cfg-utility.js

cfg-utility.phpの修正で直接ボタンが表示されるようになったので、cfg-utility.jsもそれに合わせて次のように修正。

// アップロードボタンをクローン [start]
$('p.cfg_add_media_pointer a.add_media').addClass('cfg_add_media_clone').removeAttr('id').appendTo('p.cfg_add_media_pointer');
// アップロードボタンをクローン [end]

ついでにtextfieldでdefault=0が効かないのも修正

以前のバージョンではtextfieldでdefault=0としたら初期値0としてきちんと認識されていたのですが、今バージョンになって、default=0の場合、初期値が設定されなくなっていました。確認してみると0 = falseな感じで判定されていたので修正。

cfg-utility.php

$attr_value = ($value || $value==='0') ? " value='$value'": '';

} elseif (!empty($default) || $default === '0') {