最近、コメントやお問い合わせフォームから、「Custom Field GUI Utility でカテゴリごとに表示するフィールドを切り替えることはできませんか？」といった質問を多く頂きます。そこで、今回は、Custom Field GUI Utility 3 を使ってこれを実践してみます。

Custom Field GUI Utility 3 では、「キー」の値を半角英数字のみの対応に切り替えましたが、この仕様変更は、このカスタマイズをしやすくするために行ったものでもあるので、今回が本領発揮というところでしょうか。

【2010-02-10 追記】

ただし、この方法でデフォルト値を設定してしまうと、その値が保存されてしまうのでご注意ください。

conf.ini の設定

まず、以下のような conf.ini を用意します。

[team]
fieldname = 好きなチーム名
type = textfield
class = post
size = 35
sample = 好きなチーム名を入力してください

[italy]
fieldname = 好きな選手を選択してください
type = multi_checkbox
class = italy
value = バッジョ#ピルロ#デルピエーロ
default = バッジョ
sample = 好きな選手を選択してください

[baggio]
fieldname = バッジョが最後に所属したチーム名
type = textfield
class = italy
sample = バッジョが最後に所属したチーム名

[spain]
fieldname = 好きな選手を選択してください
type = multi_checkbox
class = spain
value = グアルディオラ#ラウール#プジョル
default = グアルディオラ
sample = 好きな選手を選択してください

[brazil]
fieldname = 好きな選手を選択してください
type = multi_checkbox
class = brazil
value = ジーコ#ロマーリオ#ロナウド
default = ジーコ
sample = 好きな選手を選択してください

この conf.ini ファイル設定時のポイントは、次の２点です。

• [key] は半角英数字（英字始まり）
• class は、常に表示させるフィールドには「post（ページにも表示させたい場合は page も）」、それ以外にはそれぞれのカテゴリに合ったクラス名を付ける。
  ※class名は何も設定しないとデフォルト値である post が設定されます。

【2012-04-06 追記】

最新版の Custom Field GUI Utility ではプラグインの仕様が変わっているので、すべてに post を入れてください。

目指すかたち

今回やりたいのは、投稿画面において、この設定ファイルのうち[team]は常に表示して、[italy][baggio][spain][brazil]はそれぞれのカテゴリへの投稿の場合のみ表示するというものです。つまり、以下のようにすることです。

• カテゴリ：イタリア
  • キー：team, italy, baggio
• カテゴリ：スペイン
  • キー：team, spain
• カテゴリ：ブラジル
  • キー：team, brazil

jQuery を書く

続いて、cfg-utility.js の末尾の「});」の手前に、今回用の jQuery を追加していきます。

Firebug などを使って、それぞれのカテゴリのリストの「id」を確認します。

そして、その idから要素を取得し、それぞれ変数に入れておきます。

var italy = jQuery('#in-category-1');
var spain = jQuery('#in-category-4');
var brazil = jQuery('#in-category-3');

次に、要素のチェックの状態によってフィールドの表示・非表示を切り替えるようにします。この動作は、使い回しができるので、関数にまとめておきます。

function checkCat (ev, cls) {
 if (jQuery(ev).is(':checked')) {
 jQuery('.' + cls).slideDown();
 } else {
 jQuery('.' + cls).slideUp();
 }
}

checkCat という関数に、イベントの起こった要素と、そのイベントによって表示・非表示切り替えの対象となる class名を渡すようにしました。

これを各要素のチェックをON・OFFしたときに実行するようにします。

italy.live('click', function(ev){
 checkCat(ev.target, 'italy');
});
spain.live('click', function(ev){
 checkCat(ev.target, 'spain');
});
brazil.live('click', function(ev){
 checkCat(ev.target, 'brazil');
});

最後に、ページを読み込んだ時点でも同じように動作するようにします。

checkCat(italy, 'italy');
checkCat(spain, 'spain');
checkCat(brazil, 'brazil');

これで、完成です。

完成した cfg-utility.js は以下のようになります。

• cfg-utility.js

以上です。