繰り返しフィールドグループを作成する

繰り返しフィールドグループを使用すると、複数のカスタムフィールドを組み合わせたグループ自体を、1つの投稿に内容を変えて複数格納することができます。

繰り返しフィールドグループとは

すでに説明した、通常の繰り返しフィールドでは、電話番号などのひとつのフィールドを繰り返して1つの投稿に格納できました。では、以下のようなケースではどうでしょうか?

  • 「住宅」というカスタム投稿タイプを作った
  • 「住宅」には「外観写真」「所在地」「価格」「部屋情報」というカスタムフィールドが必要
  • 上記のうち1つの住宅の中には複数の「部屋」があるので、各部屋の「部屋の写真」や「部屋タイプ」「広さ」などの情報も格納したい

このようなケースで、通常の繰り返しフィールドを使ってしまうと、以下のようになってしまいます。

繰り返しフィールドグループを作成する

通常の繰り返しフィールドが適さない例

これでは、繰り返されたフィールドの情報が「どの部屋」に属するものか判別出来ません。

そこで、繰り返しフィールドグループの登場です。以下の図を見てみましょう。

繰り返しフィールドグループを作成する

繰り返しフィールドグループによって正確に情報が格納できる

このように、住宅に含まれる各部屋の情報(写真、部屋のタイプ、面積など)を繰り返しフィールドグループとして設定することで、各部屋の情報を正しく格納できるようになります。

繰り返しフィールドグループの作り方

それでは、上記の例を使って、繰り返しフィールドグループを作ってみます。カスタム投稿タイプの作成と、「外観写真」「所在地」「価格」といった通常のカスタムフィールドの作成までは、すでに説明した手順と同じです。

繰り返しフィールドグループを作成する

作業の流れ

繰り返しフィールドグループを作成する

カスタムフィールドグループを特定の投稿タイプに割り当てて、通常のカスタムフィールドを設定し、Add New Repeatable Group をクリックします。

繰り返しフィールドグループを作成する

② Repeatable Group が追加されたら、グループ名とスラグを入力し、Add New Fieldをクリックします。

繰り返しフィールドグループを作成する

③ 必要なカスタムフィールドを追加し終えたら、Save Field Groupをクリックして全体を保存します。

上記③の画像で、繰り返しフィールドグループ内にある Add New Repeatable Group ボタンをクリックすると、繰り返しフィールドグループをネスト(入れ子)することもできます。

記事編集画面での繰り返しフィールドグループの使い方

実際の投稿画面で繰り返しフィールドグループがどのように表示されるか見てみましょう。

繰り返しフィールドグループを作成する

① 繰り返しフィールドグループのひとつ目(この例では部屋情報)を作成するため「Add first 部屋情報」のボタンをクリックします。

繰り返しフィールドグループを作成する

② 識別用の名前を付けて、カスタムフィールドに情報を入力します。

繰り返しフィールドグループを作成する

③ こんな感じ。必要なだけ情報を追加したり、削除、並べ替えも可能です。

繰り返しフィールドグループの表示方法

繰り返しフィールドグループをフロントエンドに表示するには、Viewを作成します。Viewの作り方の基本はすでに説明したとおりですが、ここでは、繰り返しフィールドグループを表示させる場合に特有の手順と、繰り返しの必要がない通常のカスタムフィールド部分と組み合わせて表示する場合の作業についても触れていきます。

繰り返しフィールドグループを作成する

全体の流れ

繰り返しフィールドグループ表示用Viewの作成

まず、繰り返しフィールドグループ部分を表示するViewを作成します。

繰り返しフィールドグループを作成する

作業の流れ

繰り返しフィールドグループを作成する

① Viewの Contents Selection で Repeatable field groups の中から表示させたい繰り返しフィールドグループにチェックをいれます。

繰り返しフィールドグループを作成する

② Query Filterを追加します。

繰り返しフィールドグループを作成する

③ post relationship or repeatable filed group owner (投稿関係または繰り返しフィールドグループに基づくフィルタの意)を選択して、Add query filterをクリックします。

繰り返しフィールドグループを作成する

④ 繰り返しフィールドグループ名を選択して Saveをクリックします。

繰り返しフィールドグループを作成する

⑤ 繰り返しフィールドグループ用に設定したカスタムフィールドをLoopエディタに配置してレイアウトします。

Viewを配置するコンテンツテンプレートの作成

通常のカスタムフィールドをフロントエンドに表示するには、すでに説明したとおり、本文に直接挿入する方法か、コンテンツテンプレートを使う方法がありました。先ほど作成したViewを表示する場合も同様で、本文にViewを挿入する方法とコンテンツテンプレートに挿入して配置する方法があります。

ここでは、コンテンツテンプレートに、繰り返しフィールドグループを表示するためのViewを挿入してみます。本文に直接Viewを配置する場合はここでの作業は不要です。

繰り返しフィールドグループを作成する

作業の流れ

繰り返しフィールドグループを作成する

① 通常のカスタムフィールドを配置したコンテンツテンプレートを作成し、繰り返しフィールドグループを表示させたい場所にカーソルを移動して Fields and Viewsをクリックします。

繰り返しフィールドグループを作成する

② 作成済みの繰り返しフィールドグループ用のViewを見つけてクリックします。

繰り返しフィールドグループを作成する

③ 必要に応じてView挿入時のオプションを指定して Insert Shortcode をクリックします。

繰り返しフィールドグループを作成する

④ Viewのショートコードが挿入されたらコンテンツテンプレートを保存して、投稿タイプに適用させましょう。

繰り返しフィールドグループの出力例

作成したコンテンツテンプレートを投稿に適用させると、以下のように表示されました。画像下段の「お部屋のイメージ」の下に、Viewが出力した「部屋の写真」、「部屋のタイプ」、「面積」が表示されています。

繰り返しフィールドグループを作成する

繰り返しフィールドグループの出力例。※数値などの内容は適当です…。

Toolset JP Guide

ページ上部へ戻る