WordPressのカスタムフィールドで選択した大分類によって小分類の内容を変えるカスタマイズ

今日も長いタイトルになってしまいました。

さて、『Custom Field GUI Utility 1.1.2 にバージョンアップ』の記事に次のような質問というか要望を頂きました。

belberabero | 2009年7月 6日 17:09

(略)さて、非常にめんどくさそうな要望?になるのですが、

  • セレクトで大項目
  • →セレクトで大項目に対応した中項目
  • →セレクトで中項目に対応した小項目

のような使い方はできないでしょうか?

具体的に説明すると、(略)大項目で飲食店を選択すると、中項目に飲食店のカテゴリリストが表示される(例えば「中華」など)。

中項目でカテゴリリストを選択すると、小項目にカテゴリリストが表示される(例えば「ラーメン」など)。

大項目で「名所」を選択すると、中項目で名所カテゴリリストが表示され、中項目で「神社」を選択すると、小項目で神社リストが表示される。(略)

上記のような要望は、プラグイン内の「rc-custom-field-gui.js」にjQueryを少し追加することで実現できます。ただ、プラグインがもともとそういった使い方を想定していない設計なので、ちょっと苦しいコードではあります。

なお、以下の内容は、WordPress 2.7 に Custom Field GUI Utility 1.1.2をインストールしていることを前提としています。

実現したい動作

まずは動画で今回実現したい動作をご覧ください。

今回のカスタムフィールドの項目

今回のカスタマイズでは、以下のようなカスタムフィールドを前提としています。

  • 飲食店
    • 中華
      • ラーメン
      • 餃子
    • 和食
      • みそ汁
      • とんかつ定食
  • スポーツ
    • サッカー
      • バッジョ
      • メッシ
    • テニス
      • エドバーグ
      • サンプラス

このような構成で、「大分類(飲食店・スポーツ)」をクリックするとそれに対応する「中分類(中華・サッカー等)」が表示され、「中分類」をクリックするとそれに対応する「小分類」が表示されるようになります。

カスタムフィールドの項目の設定(conf-common.ini)

Custom Field GUI Utility の設定ファイルには次のように記述します。

[cat]
fieldname = 大分類
type = radio
value = 飲食店 # スポーツ
sample = ジャンルを選択してください。
[cat_1]
fieldname = 飲食店
type = radio
value = 中華 # 和食
sample = ジャンルを選択してください。
[cat_2]
fieldname = スポーツ
type = radio
value = サッカー # テニス
sample = ジャンルを選択してください。
[cat_1_1]
fieldname = 中華
type = radio
value = ラーメン # 餃子
sample = メニューを選択してください。
[cat_1_2]
fieldname = 和食
type = radio
value = みそ汁 # とんかつ定食
sample = メニューを選択してください。
[cat_2_1]
fieldname = サッカー
type = radio
value = バッジョ # メッシ
sample = 選手を選択してください。
[cat_2_2]
fieldname = テニス
type = radio
value = エドバーグ # サンプラス
sample = 選手を選択してください。

注意すべき点は、カスタムフィールドの「キー」に相当する「 [ ] 」部分です。

上記のように、一番上の階層の大分類につけたキー(ここでは[cat]です)を、下の階層のすべてに接頭辞のようにつけてください(ここでは[cat_1]など)。

元々こういった使い方を想定していなかったので、今回のような動きを実現しやすいような class名などが適切につけられてはいないため、この接頭辞で動作を適用するか否かを判断しています。

また、ini ファイル内の並び順も重要で、上から順に「大分類のグループ」、「中分類のグループ」、「小分類のグループ」となるようにしてください。

カスタマイズ前のカスタムフィールド

この状態で投稿編集画面を見てみると、次のようになっています。

acrd_cf.png

jQueryをrc-custom-field-gui.jsに追加

次に、プラグイン内の「rc-custom-field-gui.js」を少し変更します。

  • wp-content
    • plugins
      • rc-custom-field-gui-utility
        • rc-custom-field-gui.js

「rc-custom-field-gui.js」の最終行の「});」の手前に、次のソースを挿入します。

// ラジオボランオアコーディオン
  var top_id = 'cat';// ここに最大分類のキーを入れる  
  jQuery('.postbox').not('#cf_rc_' + top_id).each(function(){
    var this_id = jQuery(this).attr('id').match(top_id);
    var new_id = jQuery(this).find('h4').text();
    new_id = 'id' + encodeURI(new_id);
    new_id = new_id.replace(/%20/g,'');
    new_id = new_id.replace(/%/g,'');
    if (this_id) {
      jQuery(this).addClass('slide_menu').hide();
      jQuery(this).attr('id',new_id);
    }
  });
  jQuery('#cf_rc_' + top_id).addClass('top_slide_menu');
  jQuery('.slide_menu :radio, .top_slide_menu :radio').click(function(){
    var cat_name = jQuery(this).val();
    cat_name = 'id' + encodeURI(cat_name);
    cat_name = cat_name.replace(/%20/g,'');
    cat_name = cat_name.replace(/%/g,'');
    jQuery(this).parents('.postbox').nextAll('.slide_menu').slideUp();
    jQuery('#' + cat_name).slideDown();
  });

このとき、2行目の「 cat 」部分を、最大カテゴリーの「キー」に設定した値と置き換えてください。

	var top_id = 'cat';// ここに最大分類のキーを入れる

カスタマイズ後のカスタムフィールド

これでカスタマイズは終了です。カスタマイズ後のカスタムフィールドは次のように折り畳まれているはずです。

acrd_cf_after.png

冒頭で紹介した動画のようにアコーディオンすれば成功です。

以上です。

  • このエントリーをはてなブックマークに追加
Just a second...