• コーディング ファクトリーHOME
  • Coding Methodology
  • 第80回 WordPressのカスタムフィールドで入れ子ループ

コーディングメソドロジー

第80回 WordPressのカスタムフィールドで入れ子ループ

WordPressを導入する場合、よくお世話になるカスタムフィールド。今回はカスタムフィールドの項目をグループ化し、繰り返し機能を加え、さらに入れ子にする方法をご紹介します。

【実装例】
お肉>牛肉>特選カルビのように
階層化したメニューを
表示させることができます。

【実装例】お肉>牛肉>特選カルビのように階層化したメニューを表示させることができます。

1. プラグインをインストール

カスタムフィールドは、デフォルトの状態では扱いづらいのでプラグインをインストールします。カスタムフィールドのプラグインはいくつかありますが、今回はCustom Field Suiteというプラグインを使います。以下URL、もしくは管理画面からインストールしましょう。

https://ja.wordpress.org/plugins/custom-field-suite/

Custom Field Suiteには次のような特長があります。

  • ・UI がわかりやすい
  • ・繰り返し機能が使える
  • ・グループ化でき、且つ階層化できる

図1 フィールド設定画面

図1 フィールド設定画面

2. フィールドグループの設定

インストール完了後、管理画面の左メニューに「フィールドグループ」が追加されています。これをクリックしてフィールドを設定していきます。

  1. (1) 新規作成をクリック
  2. (2) 各項目を入力

    項目の詳細は、下記サイトでわかりやすく紹介されています。

    http://www.moco358.com/archives/3278

  3. (3) 全て設定完了したら公開ボタンをクリック

※今回はループ設定をするので、図1のように「親ループ」のフィールドタイプ【A】に「ループ(複製フィールド)」を指定。「子ループ」にも同様の設定をします。フィールドを全て追加したら、一度公開ボタンをクリックし保存します。その後、【B】部分をドラック&ドロップすることで階層化することができます。

図2 投稿画面

図2 投稿画面

3. 記事からカスタムフィールドの入力

投稿・固定ページから図2のようにカスタムフィールドを入力し、「公開」ボタンをクリックします。 ※【C】の「追加」ボタンからフィールドを増やすことができます。

図3 ソースコード

図3 ソースコード

4. テンプレートの記述

テンプレートには図3のように記述します。このように制作していくことで、実装例のような出力が可能になります。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム