入れ子構造 のView(Viewの中で別のViewを表示)


概要

View のループ内に別の View を挿入して,入れ子構造 にすれば,データの 抽出条件 や 表示スタイル を組み合わせた 複雑な表示 を行うことができます.これによって本格的な マガジンサイト のように,たくさんのジャンルを取り扱うサイトで,ジャンルごとの最新記事 を表示させる仕組みを効率的に構築することができます.

 

タクソノミーを表示させるViewにタームごとのViewをループさせる

言葉ではわかりにくいと思いますので,具体的な動作を説明するのに公式チュートリアルの マガジンテーマ を見てみます.

Viewの中にViewを配置する

 

個別のViewを配置する方法との違い

同様のことを実現するのに, ターム ごとに View を作成して配置する方法もありますが,たくさんの ターム がある場合には View の作成が面倒です.それに対して上記の方法なら,3つの View を作成するだけで済みます.

普通の方法だとタームの数だけViewが必要

今回の方法なら3つのViewでOK

手順

仕組みとしては,①いちばん外側の View が特定の タクソノミー に属する記事を抽出し,② 入れ子 になる内側の View が,親となる タクソノミー を基準として投稿を表示します.今度はこのサイトを例に説明します.

設例のタクソノミーの構造

このサイトには,海外のソフト や サービスの使い方を マニュアル形式 で解説する コンテンツ があり, Toolset の製品群についての解説もその一部です.「Product」という カスタムタクソノミー の中で,記事として採りあげる製品を製品名の ターム で分類しています.この タクソノミー構造 を前提として説明を進めます.

① 外側のViewをつくる(その1)

まず外側の View を作成します.作成のポイントは次のとおり. ※View作成の基本は こちら

表示させたいタクソノミー(カテゴリー)を選択

上の2つ,「記事が存在しないタームを除外」,「子・孫タームに記事がある場合を含む」にチェック

表示させたいタームを選択

② 入れ子になるViewをつくる

つぎに 入れ子 になる View を2つ作成します.1つめの View には 最新記事のサムネイル と タイトル,抜粋 を表示させます.クエリーセクション の設定ポイント は次のとおり.

入れ子 にするViewで表示させるコンテンツの種類を選択

最新記事なので投稿日を降順に設定,表示数は1

クエリフィルターは「タクソノミー基準」とし,入れ物になる「親 View の値を設定する」を選択します

2つめの View は,最新記事リスト(2番目から4番目まで)の リストを表示 させます.クエリーセクション の設定は1つめの 入れ子 にする View と同じですが,Limit and Offsetの箇所を次のようにします.

1つめを飛ばして4つ表示する

③ 入れ子になるViewで表示させるフィールド等を指定する

2つの 入れ子 になる View を作成したら,各ViewのLoop Outputセクションで,表示させるフィールド を追加します.さらに必要に応じてHTMLとCSSでスタイリングします.

1つめのViewのLoop Output欄(画像では,別途作成したコンテンツテンプレートを挿入.次の画像参照)

必要に応じて適宜スタイルを加える

2つめのViewのLoop Output欄

上記では,1つめの View のLoop Output欄で,別途作成した コンテンツテンプレート を挿入していますが,Loop内に直接フィールドを挿入しても問題ありません.Viewのループ内で コンテンツテンプレート を使う方法については,こちらを参照して下さい.

④ 外側のViewをつくる(その2)

入れ子 になる View が完成したら,外側の View の編集画面を開き,Loop Output欄に,作成した2つの View を次の要領で挿入します.

ループ内に「タクソノミータイトル」,入れ子 の View が2つ,タクソノミーアーカイブ へのリンクを挿入した

⑤ 外側のView( 入れ子構造 のView)を投稿またはテンプレートに挿入する

できあがった外側のViewを,投稿,固定ページ,またはテンプレート に挿入すれば完了です

カテゴリーごとの最新記事が表示されるようになった


 

その他の応用例

カスタムタクソノミーのタームをリスト表示する

上記の方法を 応用して,カスタムタクソノミーのターム(サブカテゴリー)を リスト表示する ことができます.例えばページのフッター部分に 商品やサービスのカテゴリー(タクソノミーのターム)メニューを 表示させるのに 便利です.

タクソノミーの子ターム(サブカテゴリー)リストの表示例

Viewの作成手順は,基本的に 上記で説明したものと 同じで,親タームをリスト表示する外側のViewの中に,子タームを リスト表示するViewを 入れ子にします.

外側のViewで親タームをループし,入れ子のViewで子タームをループさせる

ここでは,公式チュートリアルの クラシファイド (=広告掲載) サイトの 作例を基に 説明していきます.
クラシファイドサイトでは,目的や地域によって 分類された 募集広告や告知を,一覧形式で掲載するので,多様な広告分類を
「Listing Categories」という カスタムタクソノミーを 作成して 管理しています.

作例サイトのカスタムタクソノミー画面

上記の画像では確認できませんが,作例のサイトには,作成されているカスタムタクソノミーのタームの内,地域(World),Tutorial(チュートリアル),Technology(テクノロジー),Sports(スポーツ)の4つのタームに記事が存在しています.以下の手順で,記事の存在するタームと子タームをリスト表示させるViewを作成します.(作成するViewは全部で2つ).

①外側のViewの作成ポイント
「Listing Categories」に属する 全ての記事の中から,親タクソノミータームが ないもの(=最上位のターム)を フィルターします.例えば 先程のカスタムタクソノミー画面で 見えているものでは, 「Business」 や「 Sports」が,最上位のターム になります.

クエリーセクションのコンテンツセレクションで,表示させるタクソノミーを指定

フィルターオプションでは「Parent is None」を選択

②入れ子になるViewの作成ポイント
「Listing Categories」に属する 全ての記事の中から,親View(=外側のView)で 選択された タクソノミーを 親とする,子タームを フィルターします.例えば 先程のカスタムタクソノミー画面で 見えているものでは, 外側のViewで「Sports」が呼び出されると,Sportsを親に持つ子タームとして,バスケットボール,フィットネス,フットボール,テニスが フィルターされます.

Parent is the taxonomy selected by the parent viewを選択

著者別の記事をリスト表示する

複数のユーザーで サイトを運営している場合に,著者別の最新記事を 表示させることも 可能です.ポイントは 以下のとおり.

  1. 外側のViewのコンテンツセレクションで,「Users」から参照させたい権限のユーザーを選択
  2. 外側のViewのクエリーフィルターで,表示させたいユーザーをフィルタ
  3. 入れ子のViewのコンテンツセレクションで,参照する投稿タイプを選択
  4. 入れ子のViewのクエリーフィルターで,外側のView(=親View)で設定された著者でフィルターするを選択(下記画像参照)

Post authorを選択

Post author is set by the parent Viewを選択