Custom Field GUI Utility 3 でカテゴリごとに表示するフィールドを切り替えるカスタマイズ

2010年2月10日 12:22
WP Plugins

最近、コメントやお問い合わせフォームから、「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 が設定されます。

目指すかたち

今回やりたいのは、投稿画面において、この設定ファイルのうち[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

以上です。

トラックバック

The trackback URL is "".

show555 | 2010年2月18日 19:31 | 返信

はじめまして、前々からやりたかった機能がついに実装できて感激しております！しかしFireFoxやSafariなどでは問題なく動作するのですがIE8では「識別子がありません。ライン: 481 文字: 28 コード: 0」と出てしまいました。
自分の記述が間違っているのかと思い、Okuwaki様のサンプルcfg-utility.jsと入れ替えてみたのですが結果は同じでした。なるべく自分で解決しようといろいろ調べたのですが、知識不足のゆえ解決できませんでした。お手数ですが解決法がありましたらご教授お願いいたします。

tinybeansからshow555への返信 | 2010年3月 2日 14:59 | 返信

show555さん、コメントありがとうございます。

返信が遅くなってすみません＞＜
IEについてはテストしてなかったので、ご迷惑をお掛けしました。

カテゴリごとの設定についてですが、以下のサイトでカテゴリごとに設定ファイルを分けられる、当プラグインのカスタマイズ版が公開されていますので、取り急ぎ、そちらをお試し頂くとのも良いかと思います。

カテゴリごとにCustom Field GUI Utility の設定ファイルを切り替える | Synergy Software　シナジー・ソフトウェア
http://www.synergysoftware.jp/archives/199.html

kou | 2010年3月 3日 02:50 | 返信

はじめまして。
すばらしいプラグインをありがとうございます。

今回この記事のようにカテゴリごとに表示するフィールドを切り替えるカスタマイズ。
をしてみたのですが、jQueryを付け足すと、wordpress管理画面のドロップダウンメニューなどが使用できなくなりました。
javascriptが無効になったよな状態です。

付け足したjQueryを削除してみると正常に動作します。

何か解決策はありますでしょうか？
jQueryやphpにうといものでご教授いただけますとありがたいです。

お忙しいかと思いますが、どうぞよろしくお願いします。

tinybeansからkouへの返信 | 2010年3月 3日 13:34 | 返信

kouさん、show555さん、IEで動かなかった点を修正しました。
checkCat関数の引数をclassからclsに変え、changeイベントをclickイベントに変更しました。

ご迷惑をお掛けしましてすみませんでした。

show555 | 2010年3月 3日 22:45 | 返信

tinybeans様
修正してくださってありがとうございます！
私もWEBの仕事をやり始めて日は浅いのですが、IEの自己中ぶりには度々手を焼かされているので大変さはよくわかります。
IE must die！
この度はとてもいいプラグインとテクニックをありがとうございました！

kou | 2010年3月 3日 23:31 | 返信

素早い対応ありがとうございます。
無事なんの問題もなく快適に動作するようになりました。

本当にありがとうございました！
今後もすばらしい開発を心待ちにしております。

y_o_y | 2010年4月 2日 13:39 | 返信

tinybeans様

はじめまして。
とても使い勝手のよいプラグインで感激しています！

ひとつ、この記事のカスタマイズを実行してみたところ、mustの項目が入力されていない状態で「公開」しようとすると、「以下の必須項目が入力されていません」のウィンドウは開くのですが、入力項目が空（グレーのウィンドウに、上記のエラーメッセージと「公開」ボタンが表示されるのみ）の状態になってしまいます。
カスタマイズをしない状態では、問題なく動作しました。
（カスタマイズしていても、「must=1」の項目を設定しなければ、カテゴリーの振り分けは問題なし。）

いろいろと初心者なりに調べてみたのですが原因がわからず、コメントさせていただくことにしました。
当方の作業環境はMac OS 10.5.8／Safari 4.0.5、WordPressのバージョンは、2.9.2です。

もし原因にお心当たりがあれば、ご教示いただきたく、宜しくお願い申し上げます。

tinybeansからy_o_yへの返信 | 2010年4月 5日 12:40 | 返信

y_o_yさん、コメントありがとうございます。返事が遅くなってすみません。
お問い合わせの件ですが、cfg-utility.css の一番最初の、

/* View Setting */
#cfg_utility .postbox,
#cfg_utility .postbox_hr {
display: none;
}

の次に、

#cfg_utility .postbox.required_err {
display: block;
}

を追加してみてください。僕の環境ではこれでいけました。
中途半端なカスタマイズ記事ですみませんでした＞＜

y_o_y | 2010年4月 6日 03:58 | 返信

tinybeans様

スクリプトの方ばかり見ていて（見たからと言ってまだちゃんと理解できるレベルじゃないんですが）、CSSの問題かも、ということが完全に頭から抜けてました。ありがとうございます!!!

それで、いろいろ勉強しはじめたところで、自分の環境や設定がマズイせいなのかもよくわからないという状況なのですが、ここ数日ずっといじっていて、私の環境で起こったいくつかの問題をご報告します。

1. multi_checkboxで設定したチェックボックスを選択すると、「カテゴリー」チェックボックス内の「ID=1」のカテゴリーも選択されてしまい、他のカテゴリーで投稿しようとしているときに、カテゴリーが二重選択された状態になってしまう。
→cfg-utility.class.php内の132行目付近に「value="1"」の記述がありますが、この影響でしょうか？　「1」を、カテゴリーにない番号の「100」とか「$name」に変えたらチェックされなくなりました。

2. カスタムフィールドを設定してWordPressの投稿編集画面内の「公開」ボタンを押すと、カスタムフィールドの入力ボックスが閉じられた状態になり、バーをクリックしても開かない。
→カテゴリーのチェックを一旦外して、再度付け直すと、カスタムフィールドの入力ボックスも開きます。
→以前に投稿した記事を編集する際にも、同じ状態（バーが開かず、カテゴリーを選択し直すと開く）になります。
→エラーメッセージウィンドウの「公開」ボタンを押して公開した記事の場合は、問題ないようです。
→「下書きとして保存」した時や、以前に下書き保存した投稿を編集する際も、問題ないようです。

3. セレクトメニュー（type = select）に必須項目設定をしても、エラーメッセージには反映されない。

4. エラーメッセージが開いた時、Safariだと「div.postbox.required_err」にあたると思われる部分（「以下の必須項目が入力されていません」などのメッセージが表示されるボックス）が「#required_box」にあたると思われる部分（必須入力項目が表示されるボックス）からはみ出して、ブラウザのウィンドウの左端寄せで表示される。
Safariのウィンドウサイズをちょっと動かすと、真ん中に表示される。
→これはMac＋FireFox3.6.3では問題なし。

4はたいした問題ではなく、ほかも充分な検証ができていないのですが、ご参考までに。
ものすごく手探りでやってますが、また進展がありましたらご報告させて頂きます。
長くなってすみません。。。

y_o_y | 2010年4月 6日 04:06 | 返信

たびたびすみません。
先ほどのコメントの4番目でボックスの記述が逆でした。

「div.postbox.required_err」にあたると思われる部分（必須入力項目が表示されるボックス）が「#required_box」にあたると思われる部分（「以下の必須項目が入力されていません」などのメッセージが表示されるボックス）からはみ出して、ブラウザのウィンドウの左端寄せで表示される。

です。

tinybeansからy_o_yへの返信 | 2010年4月 6日 09:46 | 返信

y_o_yさん、色々とありがとうございます！
解決までちょっとお時間をください！

y_o_y | 2010年4月 6日 15:51 | 返信

tinybeans様

ああもう、そんな、いつでも結構ですー。

それと何度もすみませんが、先の投稿でまたひとつ訂正です。
2番目の

→以前に投稿した記事を編集する際にも、同じ状態（バーが開かず、カテゴリーを選択し直すと開く）になります。
→エラーメッセージウィンドウの「公開」ボタンを押して公開した記事の場合は、問題ないようです。

は、たまたまそうなったときがあっただけか、勘違いだったのか、現在「must」設定した状態ではいずれも開きません。
検証不足で書き込んでしまってごめんなさい。。。

かず | 2010年6月 3日 20:43 | 返信

はじめまして
超初心者なんですが
カスタムフィールドを使ってカテゴリの分類したいとおもい探していましたらこちらにたどり着きました。こちらのプラグインを使って
wordpressでカテゴリー登録したものと連動させて
大カテゴリーA　大カテゴリーB　大カテゴリーC
とあったら各大カテゴリーの下に
中カテゴリーA　中カテゴリーB　中カテゴリーC　中カテゴリーD
さらに中カテゴリーの下に
小中カテゴリーA　小中カテゴリーB　小中カテゴリーC
とやりたいのですがこのプラグインで作成できますでしょうか

出来るようならヒントをいただきたくコメント入れましたよろしくお願いします

tinybeansからかずへの返信 | 2010年6月16日 13:08 | 返信

かずさん、コメントありがとうございます。
今更ですが以下の記事は参考になりませんでしょうか。

WordPressのカスタムフィールドで選択した大分類によって小分類の内容を変えるカスタマイズ
http://www.tinybeans.net/blog/2009/07/08-055603.html

yah | 2010年12月19日 00:03 | 返信

すばらしいプラグインをありがとうございます。
投稿画面の表示で問題に直面しておりコメントさせていただきました。

conf.ini において、class= に複数のカテゴリを指定できるようになっているものと思いますが、そうした際に、投稿済みの記事を編集画面で再表示したところ、カスタムフィールドがドロップダウンしてくれません。
つまり、カテゴリごとにフィールドを使い分けたいものの、共通のものはまとめて設定したいと考えています。

iniの記述は、次のような感じです
[catTxt1]
fieldname = コメント1
type = textfield
class = post cat1 cat2 cat3
size = 35

次のように多数におよばないものは問題なく再表示できます。
[catTxt99]
fieldname = コメント99
type = textfield
class = post cat1
size = 35

お時間のあるときに設定上の問題点や対策をご教授いただけないでしょうか。お時間のあるときで大丈夫です。

匿名 | 2011年2月22日 21:22 | 返信

WPを2.xから3.xへ移行し、プラグインも3.xに対応した最新のものをインストールしたところ、カテゴリごとのカスタマイズが動作しなくなりました。最新のものでは記述方法が異なったりするのでしょうか。

wp修行中 | 2011年3月14日 16:09 | 返信

はじめまして。wp修行中です。
Custom Field GUI Utility 3.1を入れて試している途中です。
このカスタマイズはwordpress3.1でも有効ですか？
試してみたのですがなかなか反映されなくて、苦闘中です。
お手すきの際にお返事頂ければ幸いです。
何卒宜しくお願い申し上げます。

コメントする

名前(必須)

電子メール(必須)

URL

ログイン情報を記憶

激しくおすすめ

ちょっとお知らせ

[連載] はじめての DynamicMTML 目次

Custom Field GUI Utility 3 でカテゴリごとに表示するフィールドを切り替えるカスタマイズ

conf.ini の設定

目指すかたち

jQuery を書く

トラックバック

コメント

コメントする

激しくおすすめ

ちょっとお知らせ

サイト内検索

最近のブログ記事

カテゴリ

タグ