<プロが教えるコーディング>WordPressのカスタムフィールドで入れ子ループ | 東京IT新聞

<プロが教えるコーディング>WordPressのカスタムフィールドで入れ子ループ

コンシューマー その他

CODING  FACTORYです。2010年6月から月1回のペースでお届けしている「Coding Methodology」は、1909案件のHTMLコーディング案件を納品した中から生み出された、今すぐ役立つ実践的コーディングノウハウです。ちょっとした工夫や発想の転換など、コーディングの手法やスムーズに進めるコツを紹介します。今回が連載60回目となります。

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

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

 カスタムフィールドは、デフォルトの状態では扱いづらいのでプラグインをインストールします。  カスタムフィールドのプラグインはいくつかありますが、今回はCustom Field Suite というプラグインを使います。以下URL、もしくは管理画面からインストールしましょう。 https://ja.wordpress.org/plugins/customfield-suite/  Custom Field Suite には次のような特長があります。 ・UI がわかりやすい・繰り返し機能が使える・グループ化でき、かつ階層化できる

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

 インストール完了後、管理画面の左メニューに「フィールドグループ」が追加されています。  これをクリックしてフィールドを設定していきます。 (1) 新規作成をクリック(2)各項目を入力  項目の詳細は、下記サイトでわかりやすく紹介されています。 http://www.moco358.com/archives/3278 (3) 全て設定完了したら公開ボタンをクリック  ※今回はループ設定をするので、図1のように「親ループ」のフィールドタイプ【A】に「ループ(複製フィールド)」を指定。「子ループ」にも同様の設定をします。フィールドを全て追加したら、一度公開ボタンをクリックし保存します。その後、【B】部分をドラック& ドロップすることで階層化することができます。

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

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

4. テンプレートの記述

 テンプレートには下記の図3のように記述します。   このように制作していくことで、実装例のような出力が可能になります。  
 今回の執筆担当者 菅野 慎(かんの・しん) コーディングファクトリー コーディングチーム チーフコーダー  
《株式会社モノサス》

特集

page top