「Custom Field GUI Utility 3.2」の「imagefield」をWordPress 3.5に対応させる方法

以前の記事で「『Custom Field GUI Utility 3.2』使うの止めて『Advanced Custom Fields』使うことにしました」みたいなことを言いましたがそんなことを言いつつもやっぱり「Custom Field GUI Utility 3.2」も使ったりします。
ただ、そのままでは「imagefield」が動作しなかったのでちょっとプラグインをいじってみました。

WordPress3.5から導入された新しいメディアアップローダーが原因のようです。
ですので、プラグインを直接編集して旧メディアアップローダーを呼び出すよう修正します。

cfg-utility.phpの修正

まずはcfg-utility.phpの57行目あたり。

/* 管理画面のhead要素でCSSとJavaScriptファイルの読み込み */
function insert_head () {
	$plugin_url = get_bloginfo('wpurl') . '/wp-content/plugins/custom-field-gui-utility/';
	$head = < << EOD
	<link rel="stylesheet" href="{$plugin_url}facebox/facebox.css" type="text/css" media="all" />
	<link rel="stylesheet" href="{$plugin_url}cfg-utility.css" type="text/css" media="all" />
	<link rel="stylesheet" href="{$plugin_url}exValidation/css/exvalidation.css" type="text/css" />
	<script type="text/javascript" src="{$plugin_url}facebox/facebox.js"></script>
	<script type="text/javascript" src="{$plugin_url}exValidation/js/exvalidation.js"></script>
	<script type="text/javascript" src="{$plugin_url}exValidation/js/exchecker-ja.js"></script>
	<script type="text/javascript" src="{$plugin_url}cfg-utility.js"></script>
	<script type="text/javascript">
	jQuery(function($){
		$("form#post").exValidation();
	});
	</script>
EOD;
	echo $head;
}

となっている部分を以下のように修正。

/* 管理画面のhead要素でCSSとJavaScriptファイルの読み込み */
function insert_head () {
	$plugin_url = get_bloginfo('wpurl') . '/wp-content/plugins/custom-field-gui-utility/';
	$admin_url = admin_url();
	$head = < << EOD
	<link rel="stylesheet" href="{$plugin_url}facebox/facebox.css" type="text/css" media="all" />
	<link rel="stylesheet" href="{$plugin_url}cfg-utility.css" type="text/css" media="all" />
	<link rel="stylesheet" href="{$plugin_url}exValidation/css/exvalidation.css" type="text/css" />
	<script type="text/javascript" src="{$plugin_url}facebox/facebox.js"></script>
	<script type="text/javascript" src="{$plugin_url}exValidation/js/exvalidation.js"></script>
	<script type="text/javascript" src="{$plugin_url}exValidation/js/exchecker-ja.js"></script>
	<script type="text/javascript" src="{$plugin_url}cfg-utility.js"></script>
	<script type="text/javascript">
	jQuery(function($){
		$("form#post").exValidation();
		if ( $( 'a.add_image' ).length ) {
			$('a.add_image').live('click', function(){
				tb_show('ファイルをアップロード', '{$admin_url}media-upload.php?post_id=&TB_iframe=1');
				return false;
			});
        }
	});
	</script>
EOD;
	echo $head;
}

そして、283行目辺りの、

$media_buttons = '';
ob_start();
do_action('media_buttons');
$media_buttons = ob_get_contents();
ob_end_clean();

となっている部分を、

$media_buttons = '<a class="add_image button">画像アップロード</a>';
/*
ob_start();
do_action('media_buttons');
$media_buttons = ob_get_contents();
ob_end_clean();
*/

と修正します。以上でcfg-utility.phpの修正は完了。
次はcfg-utility.jsを修正します。

cfg-utility.jsの修正

次はcfg-utility.jsの178行目辺り、

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

// イメージフィールド・ファイルフィールド周りのliveイベントを設定 [start]
$('a.cfg_add_media_clone').on('click', function(){
	var self = $(this);

	// アップローダーをクリック(clc)したイメージフィールドのidをcookieに保存
	var clc_id = self.closest('div.imagefield').attr('id');
	setCookie('imf_clc_id',clc_id);
});
// イメージフィールド・ファイルフィールド周りのliveイベントを設定 [end]

となっている部分を以下のように修正。

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

// イメージフィールド・ファイルフィールド周りのliveイベントを設定 [start]
// $('a.cfg_add_media_clone').on('click', function(){
$('a.add_image').on('click', function(){
	var self = $(this);

	// アップローダーをクリック(clc)したイメージフィールドのidをcookieに保存
	var clc_id = self.closest('div.imagefield').attr('id');
	setCookie('imf_clc_id',clc_id);
});
// イメージフィールド・ファイルフィールド周りのliveイベントを設定 [end]

以上で完了です。
例のごとくプラグインを直接編集する力技ですので、自己責任でご対応下さい。

ではでは。