接続されたコンテンツを表示する


概要

このページでは、バンドとイベントに関するサイトを例にして、カスタム投稿タイプの定義、親子関係の設定、サイト上への表示方法について説明します。

設例では、音楽バンドのプロフィール情報と、バンドが演奏するイベントリストを表示させます。各バンドは複数のイベントで演奏し、各イベントには複数のバンドが出演します。

 

カスタム投稿タイプの作成と親子関係の設定

まず必要となる投稿タイプは、「音楽バンド」と「イベント」の2種類です。この2つの投稿タイプは、既に説明したレンタカーのサイトと同様に、直接親子関係を設定できません。そこで3つ目のカスタム投稿タイプを作成します。この3つ目のカスタム投稿タイプは「音楽バンド」と「イベント」を接続するために便宜作成するもので、レンタカーサイトの例で作成した契約情報のように固有のフィールドを持たせません。このようなカスタム投稿タイプを「中間オブジェクト」と呼びます。

作成する投稿タイプと親子関係

作成する3つの投稿タイプ カスタム投稿タイプの作成方法

  • バンド:各バンドのプロフィール
  • イベント:各イベントの詳細
  • 出演:バンドとイベントを接続するために便宜作成する中間オブジェクト

3つのカスタム投稿タイプを作成したら、それらを接続していきます。バンドとイベントを出演の親に設定します。投稿タイプに親子関係を設定する方法

投稿タイプ:出演からバンドとイベントを親に設定する

設定したら忘れずに保存して下さい。

 

コンテンツの作成

親・子の関係を正しく設定したら、サイトのコンテンツ作成を開始できます。公式サイトユーザーガイドの例にならって「バンド」と「イベント」情報を次のように作成しておきます(とりあえず名前だけでOKです)。

投稿タイプ=バンドで、次の3つのバンドを作成

  1. The Runners
  2. Hands
  3. Faces

投稿タイプ=イベントで次の2つのイベントを作成

  1. WoodsRock
  2. MaxEvent

次に、投稿タイプ:出演情報を新規作成します。新規投稿画面が開いたら、適当なタイトルをつけていったん保存します。いったん記事を保存すると画面下のFields tableセクションが入力可能になります。

出演情報作成画面で関連づけるバンドとイベントを選択する

参考:「バンド」のコンテンツ編集画面から「出演」情報を追加している画面

作成する出演情報ごとに、バンドとイベントを選択し、各出演情報と具体的なバンド、イベントを接続します。選択したら「アップデート」ボタンを忘れずにクリックします。同様の手順で、バンドやイベントの投稿画面から接続する情報を選択することもできます。Fields tabelセクションの表示項目を選択する方法


 

接続されたコンテンツの表示

コンテンツの作成や投稿内容の関連づけができたら、コンテンツを実際に表示し、訪問者が閲覧できるようにします。

  • 「バンド」のページでは、そのバンドの演奏を聴くことのできるイベントを表示します。
  • 「イベント」のページでは、そのイベントで演奏するバンドを表示します。

たとえば、あるイベントで演奏するバンドを一覧表示する手順(考え方)は次の通り

  1. 投稿タイプ:イベントに接続された中間オブジェクトから、表示しているイベントに関するものを呼び出す
  2. 呼び出した中間オブジェクトと関連づけられているバンドの投稿情報を表示する

表示を行う場合は、Viewsプラグインを使うか、もしくはシンプルなPHPを追加する方法があります。ここではViewsプラグインを使って表示する方法について説明します。PHPを追加する方法については公式サイトのユーザーガイドを参照して下さい。

Viewsプラグインを使って表示する方法

イベントに属する全ての出演情報を出力する「View」を作成

「View」とは、Viewsプラグインで作成されるコンテンツに格納された情報(タイトル・本文・画像・カスタムフィールド等の内容)を抽出して出力・表示するための命令をひとまとめにしたものです。作成した「View」を固定ページや投稿の好きな場所に配置すれば、Viewで設定したとおりの情報が画面に表示されます。表示させたい内容やスタイルに応じて好きなだけ「View」を作成できます。

新規Viewを作成する

次の画像の手順に従って新規Viewを作成します。

Add New Viewをクリック

一番上のラジオボタンを選択し、Viewの名前を入力して「Create Veiw」をクリック

二つ目の画像では、作成するViewの種類を選択するラジオボタンが表示されていますが、今回は全ての結果を表示させるだけなので一番上のDisplay all results(全ての結果を表示)を選択します。なおここでの選択は、作成したView設定画面に表示されるセクションが変わるだけなのであまり重要ではありません(表示させるセクションは後から変更できます)。

フィルタが読み込むコンテンツを指定する(コンテンツセレクション)

上記で新規Viewを作成すると、Viewの設定画面が表示されます。次の画像の手順にしたがって、このViewが読み込むコンテンツを指定します。

一番上ではタイトルやスラグ名を変更できます。

コンテンツセクションで中間オブジェクト=出演を選択

Viewを作成するときは、View作成画面のコンテンツセレクションで、中間オブジェクトの投稿を指定することに注意して下さい。上記画像では「出演」にチェックを入れています。

フィルターを使って表示させる情報を絞り込む

画面を下にスクロールし、クエリーフィルタ欄で「Add New Filter」をクリックし、フィルタを追加します。フィルターの条件で、「出演」の親・投稿タイプである「イベント」を選択し、さらに「MaxEvent」に属しているもののみを表示させるようにします。

中間オブジェクトをフィルターに設定する

フィルターの条件を特定のイベント「MaxEvent」に設定する

一覧表示させる項目を指定しスタイルを加える

フィルタの設定が済んだら、抽出された投稿記事のどの部分を表示させるかを指定します。クラスを付与することでCSSでのスタイリングも可能です。手順は次の画像を参考にして下さい。

wpv-loopの後ろにカーソルを移動し、Fieldsボタンをクリック

ポップアップされたウィンドウの中から「Title with a link」をクリック

挿入されたショートコードに、「id=”$band”」を追記し、さらにリストタグを付与する

レイアウトセクションの「Layout HTML/CSS/JS」欄にHTMLを記述することで、親・投稿タイプがもつどんなフィールド(値)でも挿入して使うことができます。上の3つめの画像でブルーでハイライトされている「id=”$band”」はViewショートコードの引数です。先程のコンテンツセレクションで指定した「投稿タイプ=出演」は「バンド」と「イベント」を親に持っているので、この引数によって出力させる親・投稿タイプを「バンド」に指定しています。

コンテンツテンプレートに作成したViewを挿入する

上記で作成したViewをViewsプラグインで作成したコンテンツテンプレートに追加すると、あるイベントに属するバンドが一覧表示されます。

コンテンツテンプレートに作成したViewを挿入する

イベントに出演するバンドの一覧が表示された