2つ以上の投稿タイプを繋げてサイト上でお互いの情報を呼び出せたらいいのにな。
なんて思いませんか？
『それ、コード書かずにできますよ！！！』
カスタム投稿タイプ同士を繋げる複雑なサイトも、JetEngineの『Relations』機能を使えば簡単につなぎ合わせることができます。
と言っても、ちょっとわかりにくいですよね。
この記事でJetEngineの『Relations』機能を使うとどのようなサイトが作れるのかと、Relations機能でどうやって投稿タイプ同士を繋げるのかの方法を知ることができます。
- カスタム投稿タイプ同士をJetEngineの『Relations』で繋げば、動的にページと情報を繋げることができる
- 実際にページ同士の情報を繋ぐにはRelation設定したらJetEngineのListingsの機能とElementorのテーマビルダーを併用
- RelationsでMeta Fieldsを作成するとより複雑なサイトの構成も可能
JetEngineのことをもっと学びたい人は、どうぞJetEngineの使い方完全ガイドを見てください。
様々なJetEngineに関する情報がまとめられています。
また、JetEngineのRelation機能の使い方を動画で学びたい方はこちらからどうぞ！
この動画で使用されているJetEngineのRelation機能を使用したサイトをダウンロードしお試しいただくことが可能です。
実際に触ってみた方がより理解しやすいと思いますのでぜひお試しくださいね！
JetEngineのRelationsでできること
JetEngineのRelationsでサイトにどんな仕掛けをすることができるかを説明します。
JetEngineの『Relations』機能を使えば、投稿タイプ同士を繋げることができます！
以下の図を参考に、Relationsで投稿タイプを繋げると一体どのようなサイトができるのかを説明していきます。
①例えばとある『映画情報サイト』があるとしましょう。
JetEngineで映画情報のサイトのために以下のような投稿タイプを作っているとします。
- タイトル
- 俳優
そして投稿タイプをリストでレイアウトしたページを表示すると通常はその投稿タイプのものしか表示されないのですが、JetEngineのRelationsで投稿タイプを繋げると以下のようなサイトが作れます。
②『映画のタイトル』のページで『ワンスアポンアタイムハリウッド』の詳細をクリックしてみましょう。
③あらすじと出演者のリストと出演者ごとの作品の出演料（ギャラ）が表示されました。
さらに出演者のうちのひとり、『ディカプリオ』をクリックすると・・
④ディカプリオのページが表示され、さらにそこにはディカプリオの出演作品である映画のタイトルがリストとなって表示されています。
出演作品から『キャッチミーイフユーキャン』をクリックしてみましょう。
⑤『キャッチミーイフユーキャン』のページに出演者とギャラが表示されました。
※⑤⑦の流れは④⑤と同じです。
ここでお気づきでしょうか？
一つの映画でさまざまな俳優を起用し、一人の俳優がさまざまなタイトルに出演し、同じ俳優でも各出演作品により手にした出演料もバラバラです！
このようにそれぞれ情報が異なるカスタム投稿タイプをJetEngineの『Relations』で繋げれば、コードを書かかなくても蜘蛛の巣を張り巡らせるように動的にページと情報を繋げることができます。
JetEngineで作ったページをRelationsで繋げる方法を以下のセクションで説明していきます。
Relationで2つの投稿タイプを繋げる方法
このサンプルではJetEngineのカスタム投稿タイプで作った『映画』と『俳優』をRelationでつなげてみたいと思います。
また、この『映画』と『俳優』の間に発生する『ギャラ』と言う情報もつなげるデモンストレーションもします。
※ちょっと複雑な説明になりますが、『ノーコードでこんなことができちゃうの？！』と言う情報なのでぜひご覧ください。
まず、ダッシュボードの『JetEngine』の中の『Relations』をクリックします。
『Relations List』というRelationsの一覧画面が表示されますので『Add New』をクリックします。
するとこのような『Add Relation』というRelation（関係）を作成する画面が表示されます。
1.General Settingsの設定
General SettingsはJetEngineの他の機能にもあるように作成するRelationの名前などを決める初期設定のようなものになります。
以下の手順に従ってください。
Name
『Name』は作成するRelationの名前を記入します。
この名前は自分が『何と何のRelation』なのかを判別できるような名前にしましょう。
このサンプルではNameを『映画と俳優』にしました。
Parent object
『Parent object』をリストの中から選択します。
『Parent：親』と『Child：子』を分けるのは後でデータを取るときなどに使用される設定です。
このサンプルでは『映画』を『Parent object』にしました。
Child object
『Child object』をリストの中から選択します。
繋ぎ合わせる2つのオブジェクトのParent objectで選ばなかった方のオブジェクトをこちらで選択しましょう。
このサンプルではChild objectは『俳優』になります。
Relation type
『Relation type』を以下から選択します。
- One to one：一つのものと一つのもの
- One to many ：一つのものと複数のもの
- Many to many：複数のものと複数のもの
今回のサンプルでは『映画（タイトル）』と『俳優』という『複数のもの同士』の関係性なので『Many to Many』を選択します。
これらが一体どういうことなのかがいまいちわからないと思いますので、以下に図説を用意しましたので参考にしてください。
『One to one』を選択するケースは、Relationで繋げるもの同士の関係が『１つのものと1つのものの関係性』であるときに選択します。
例えば、結婚している映画俳優同士（単数と単数）のRelationを作成する場合は『One to one』となります。
『One to many』を選択するケースは、Relationで繋げるもの同士の関係が『１つのものと複数のものの関係性』であるときに選択します。
例えば、『映画会社』（単数）とその『映画会社が制作している映画』（複数）のRelationを作成する場合は『One to many』となります。
『Many to many』を選択するケースは、Relationで繋げるもの同士の関係が『複数のものと複数のものの関係性』であるときに選択します。
例えば、『映画（タイトル）』（複数）のものと『俳優』（複数）のRelationを作成する場合は『Many to many』となります。
作成するRelationの2つのオブジェクトがどのような関係性なのかで選択するものが変わりますので注意しましょう。
Register separate DB table
『Register separate DB table』を『オン』にします。
しかし、この設定はこのサンプルで紹介したい内容には必要な設定なためにオンにしています。
※デフォルトでは『オフ』に設定されています。
Resister separate DB tableは『関係性にデータを持たせる』かどうかの設定です。
エデータベース上に『映画』と『俳優』のデータがずらっと入ってると想像してください。
後にこのサンプルで設定をしていきますが、『俳優』に『ギャラ』と言う情報をつなげていきたいと思います。
ギャラというのは『映画』によって一律の額ではなく、また『俳優』によってもバラバラな額が設定されており、『特定の俳優と特定の映画によってギャラの額が変動する』仕組みです。
その『ギャラ』のメタデータをこのRelationの『Meta Field』で作成していきます。
つまり一言で言うとRelationの『Meta field』にメタデータを追加する場合にこの『Register separate DB table』をオンにする訳です。
その他の設定
General Settingsの中の以下の設定に関してはデフォルト設定のままでOKです。
- Parent Relation
- Register controls for parent object
- Allow yo create new children from parent
- Register controls for child object
- Allow to create new parents from children
もし、RelationにMeta Fieldを追加しない場合はここで『Add Relation』をクリックし『3.Relationで繋げたもの同士の関係性を埋める作業をする』のセクションにジャンプしてください。
なお、Meta Fieldを追加しない場合はここで画面右側の『Add Relation』をクリックしてください。
2.Meta Fieldの設定
このMeta Fieldの設定は、このサンプルでお見せしたいこと（映画と俳優のRelationの間にさらに『ギャラ』の情報を持たせる）をするための設定です。
もし、2つのオブジェクト同士だけのシンプルなRelationの作成をする場合はこの『Meta Field』の設定は不要です。
ここでどのようなことを行うかを『Register separate DB table』のセクションで説明をしていますのでご一読ください。
まず、Relationの『Meta Fields』で『New Field』をクリックしMeta Fieldを追加しますます。
- 『Label』にMeta Fieldの名前を入力
このサンプルでは『ギャラ』とします。 - Name/IDを半角英数字と`-` または`_` で入力
このサンプルでは『money』とします。 - 画面右の『Add Relation』をクリックします。
Meta Fieldが一体どういうものなのか、各設定の説明などを解説した記事もありますのでぜひ参考にしてください。
こちらは『Add Relation』をクリックした後のRelations List（一覧）画面です。
『映画と俳優』のRelationが追加されました。
3.Relationで繋げたもの同士の関係性を埋める作業をする
Relation（関係性）を持たせた各投稿タイプの各ページの編集画面へ行きます。
こちらは『映画』の投稿タイプ（Parent object）の『フォレスト・ガンプ』の編集ページです。
画面下部に『Children 俳優』という『俳優』の投稿タイプと情報を接続するフィールドが設置されました。
こちらは『俳優』の投稿タイプ（Child object）の『トム・ハンクス』の編集ページです。
画面下部に『Parent 俳優』という『映画』の投稿タイプと情報を接続するフィールドが設置されました。
これらのRelationで設置したフィールドをすべて編集していきます。
親のフィールドと子の情報をコネクトする
こちらは『映画』（親）の投稿タイプの『フォレスト・ガンプ』の編集ページです。
『Children 俳優』のフィールドの『Connect 俳優』をクリックします。
すると以下のウィンドウが表示されます。
ここでこの映画（フォレスト・ガンプ）に繋げたい俳優名を選択します。
- トム・ハンクス（フォレスト・ガンプの主演）を選択
- 青い『Connect 俳優』のボタンをクリック
するとさらに以下の『Edit Meta』のウィンドウが開きます。
こちらは『2.Meta Fieldの設定』のセクションで設定した『ギャラ』のメタフィールドです。
※もしRelationのMeta Fieldの設定をしていない場合はこの説明は飛ばしてください。
- 『ギャラ』のフィールドを記入する
※このサンプルの場合、トム・ハンクスがフォレスト・ガンプに出演したときのギャラの額を記入します。 - 『Save Meta Data』をクリック
すると、このようにフォレスト・ガンプの投稿タイプに『Children 俳優』のメタ情報が追加されました。
もし、他の出演者も追加したい場合はここで紹介した作業を繰り返します。
すべての『映画』（親）のフィールドと『俳優』（子）の情報を埋めたとします。
こちらは『俳優』（子）の投稿タイプの『トム・ハンクス』の編集ページです。
『Relation』のフィールド『Parent 映画』を見てみると、トムハンクスが出演した映画のタイトルが追加されました。
このようにして、『Parent（親）』と『Child（子）』の情報をフィールドにより繋げていきます。
なお、今回は親の『映画』の編集画面からフィールドを繋げる作業をしましたが、子の『俳優』の編集画面からも同等の操作ができます。
Relationで繋げた情報を動的にサイトに表示させる方法
『Relations』で繋げた情報を動的にサイトに表示させるために『Listings』でParent object（親）とChild object（子）それぞれの『Listing Item』（一覧表示させられるリストのテンプレート）を作成します。
なお、このサンプルではParent object（親）の『映画』の投稿タイプのListing Item『映画のリスト』はすでに作成済みで、サイトで以下のように公開している状態です。
JetEngineのListingsで上記のような動的に一覧表示できるリストの作り方とサイトに表示する方法は、『JetEngine【Listings】の使い方・動的な一覧ページがノーコードで作れる！』の記事でくわしく説明をしています。
また、Listingsの使い方を説明した動画もありますのでどうぞ参考にしてください！
ここからRelationsで繋げたオブジェクトのListing Itemをそれぞれ作成していきます。
Parent object（親）のListing Itemを作成する
こちらはすでに申し上げましたが、すでにRelationのParent objectの『映画』の投稿タイプのListing Itemである『映画のリスト』はすでに制作済みです。
これの制作方法を知りたい場合はJetEngineのListingsを説明した記事で工程をくわしく説明していますのでそちらをご覧ください。
またListingsの動画はこちらです。
Child object（子）のListing Itemを作成する
次にJetEngineのListingsでRelationのChild objectである『俳優』の投稿タイプの『Listing Item』を作成していきます。
JetEngineの『Listings』へ行き、『Add New』をクリックします。
すると『Setup Listing Item』が表示されますので以下の手順に従い設定してください。
- Listing sourceで『Posts』を選択
- From post typeで『俳優』を選択
※ご自身の投稿タイプ名など該当するものを選択してください。 - Listing item nameを記入（なんでもいい）
※自分で何のリストアイテムなのかを判別できる名前にしてください。 - Listing viewで『Elementor』を選択
- 『Create Listing Item』をクリック
※『Setup Listing Item』についてListingsの使い方の記事でくわしく説明をしています。
するとまっさらなElementorのエディターが表示されます。
Child objectのリストを編集する
Elementorで『映画のリスト』の中に組み込む、『俳優のリスト』をElementorのエディターとJetEngineのダイナミックウィジェットで作成します。
ちなみにこのサンプルでは俳優の名前が各映画のリストに入る仕様にしたいと思います。
『Dynamic Link』ウィジェットをカラム挿入します。するとデフォルトで『Read More』と表示されます。
- コンテンツタブの『Label』の『動的タグ』をクリック
- 『Post Title』を選択
※『Source』はデフォルトの『Permalink』のままにしてください。
するとこのように『Read More』だった表示が『ロバート・デニーロ』になりました。
これはDynamic Linkの表示設定を『俳優』の投稿タイプの『タイトル』にしたためです。
なお、デフォルトでカラムにパディングが入っています。
『映画のリスト』にこの『俳優のリスト』が挿入をしたときにパディングが入ったままだと、リストの中に微妙なスペースができてしまうので、カラムのパディングの値を『0』にします。
すると、カラムの上下左右のパディングにより生じたすき間がなくなりました。
これで『俳優のリスト』は準備OKです。
画面左下の『更新』をクリックします。
Parent objectのListing ItemにChild objectのListing Itemを『Listing Grid』ウィジェットで動的に繋げる
次に、『映画のリスト』の編集画面を開きます。
映画のリスト内の好きな場所に『Listing Grid』ウィジェットを挿入します。
コンテンツタブの『Listing』で先ほど作成したListing Itemの『俳優のリスト』を検索し、選択します。
すると以下のようにリスト内にはたくさんの俳優の名前が表示されました。
なお、『フォレスト・ガンプ』に表示させたい俳優名は『トム・ハンクス』ですので次の手順に従ってください。
- コンテンツタブの『Post Query』をクリック
- 『＋項目を追加』をクリック
『Type』で『Posts ＆Author Parameters』を選択します。
次に『Include posts by IDs』を以下の手順で設定してください。
※ここはとても重要な設定です！
- 動的タグのマークをクリック
- 開いた動的タグのリストを下にスクロール
- 『Related Items』を選択
すると上記のような『設定』が表示されるので『Fron Relation』で何と何のRelationのリストを作成しているのかで該当するものを選択します。
※このサンプルでは『映画と俳優』になります。
なお、『From object』は挿入した『Listing Grid』ウィジェットが『Parent objec（親）』または『Child object（子）』で編集をしている方のobjectを選択します。
このサンプルでは、『俳優』（子）のobjectになるのでFrom Objectは『Child Object』になります。
『Intial Object ID From』はデフォルトの『Current Object』のままでOKです。
すると、『Listing Grid』を挿入した箇所の表示が『トム・ハンクス』になりました！
ここでマージンなどで位置を整えましょう。
※ちなみに書体や色などのスタイルの変更は『映画のリスト』に挿入した『Listing Grid』からの編集ではなく、『俳優のリスト』のListing Itemを編集してください。
最後に『更新』をクリックします。
では実際のサイトを見てみましょう。
このように、各映画のタイトルごとに該当する俳優名がリストに表示されました。
『フォレスト・ガンプ』のリストの『トム・ハンクス』をクリックすると以下のようなページが表示されます。
なお、この俳優のプロフィールのページはElementorのテーマビルダーの『Single Post』で作成しています。
参考までに、このSingle Postのページは上記のウィジェットで構成されています。
- Post Titleウィジェット
- アイキャッチ画像ウィジェット
- Post Contentウィジェット
テーマビルダーのSingle Pageでレイアウトを作成する方法を説明した記事もありますのでよかったらご覧くださいね！
そしてこのSingle Pageの『Display Condition』は『INCLUDE / 俳優 / All』です。
『Display Condition』とは何なのか、設定方法を説明した記事はこちらです。
これがノーコードでしかもJetEngine一つでできてしまうのがすごいですね！！
Relationで作成したメタデータをさらに繋げる方法
このサンプルでは『RelationのMeta fields』で『ギャラ』というメタデータを作成しました。
これをさらに各映画に出演した『俳優』と、その映画ごとの『ギャラ』を『Relation』で繋げていきたいと思います！
このサンプルで俳優のギャラを、各『映画の詳細ページ』にその映画に出演した『俳優一覧』を表示させたその中に各俳優の『その映画に出演したときのギャラ』が表示されるようにしたいと思います。
そのためにはまず以下の順番で各ページを作成していく必要があります。
- テーマビルダーのSingle Postで『映画の詳細ページ』のテンプレートを作る
- Listingsで映画の詳細ページに一覧で載せる『俳優とギャラ』のテンプレートを作成する
- テーマビルダーで作った『映画の詳細ページ』にListing Gridで『俳優とギャラ』のリストを呼び出す
ちなみにテーマビルダーのSingle Postでの『映画の詳細ページ』の作り方と『Display Condition』は以下を参考にしてください。
1.テーマビルダーのSingle Postで『映画の詳細ページ』のテンプレートを作る
このサンプルでは以下のウィジェットで映画の詳細ページを構成しています。
- アイキャッチ画像ウィジェット：映画のサムネイル
- Post Titleウィジェット：映画のタイトル
- Dynamic Fieldウィジェット：以下の各メタ情報を挿入
-公開年
-製作費
-メイン俳優
-ストーリー
なお、『Dynamic Field』ウィジェットなどのJetEngineのLISTINGNG ELEMENTSの使い方を知りたい方はListingsの使い方の記事の【Dynamiv Fieldウィジェットを挿入し投稿タイプのデータを呼び出す】のセクションをご覧ください。
2.Listingsで映画の詳細ページに一覧で載せる『俳優とギャラ』のLiting Itemを作成する
JetEngineのListingsで『俳優とギャラ』の新しいListing Itemを作成するので以下の手順に従ってください。
- ダッシュボードのJetEngine内の『Listings』をクリック
- 『Add New』をクリックし新しいListing Itemを追加
- 『Setup Listing Item』を設定し作成
-Listing source：Posts
-From post type：俳優
-Listing item name：俳優とギャラのリスト
-Listing view：Elementor
『Create Listing Item』をクリックするとまっさらなElementorの編集画面が表示されるので『俳優とギャラ』が表示されるリストのテンプレートを作成していきましょう。
このサンプルでは以下のウィジェットを使用し『俳優とギャラ』のテンプレートを作成しています。
- アイキャッチ画像ウィジェット：俳優の投稿タイプのサムネイル
- Post Titleウィジェット：俳優の投稿タイプのタイトル
- Dynamic Fieldウィジェット：ギャラ
ギャラの方法を、Source：『Relation Meta Data』＋『Meta Field：ギャラ』の組み合わせで選出しています。
なお、画面上にギャラの額が表示されていないのは、出演作品によりそれぞれ額が異なり俳優により情報が複数存在するためです。
このテンプレートのくわしい編集方法はListingsの使い方の記事の【JetEngineのダイナミックウィジェットを使いリストのテンプレートを作る】のセクションを参考にしてください。
3.テーマビルダーで作った『映画の詳細ページ』にListing Gridで『俳優とギャラ』のリストを呼び出す
まず、テーマビルダーの『Single Post』で作成した『映画の詳細ページ』を開きます。
『映画の詳細ページ』の編集画面にJetEngineの『Listing Grid』ウィジェットを挿入します。
以下の設定手順に従ってください。
※ちなみに、この設定の方法は『Parent objectのListing ItemにChild objectのListing Itemを『Listing Grid』ウィジェットで動的に繋げる』で紹介した設定手順とまったく同じです。
- コンテンツタブの『Listing』でListing Gridに表示したいリスト名『俳優とギャラ』を検索し選択
- Listing Gridを入れた箇所に『俳優』の投稿タイプで作成した俳優がすべて表示されてしまうので・・・
- コンテンツタブに『Post Query』をクリック
- 『+項目を追加』をクリック
- 『Type』で『Posts & Author Paramenters』を選択
- 『動的タグ』のマークをクリック
- 『Related Items』を選択
最後に『From Relation』で関係しているRelationである『映画と俳優』を選択します。
すると『フォレスト・ガンプ』に該当する俳優の『トム・ハンクス』とそのトム・ハンクスがフォレスト・ガンプで得たギャラが表示されました！
こちらは各映画の『詳細をチェック』をクリックしたときに表示される画面を映した動画です。
各映画ごとに該当する俳優とギャラがそれぞれ表示される様子をご覧いただけます。
まとめ
JetEngineの『Relation』機能を使って2つの投稿タイプ同士を繋げることができました！
さらにListingsで作成したリストをテーマビルダーで作ったテンプレートにListing Gridウィジェットを使って情報を呼び出せば、ページごとに動的に情報がシェアされた複雑なサイトをノーコードでも作成することが可能です。
少し、手順のややこしさはありますが情報がたくさん詰まった便利なサイト構築に本当に役立ちますね！
ここでこの記事の内容をおさらいしましょう。
- JetEngineのRelationsで投稿タイプ同士などの2つのオブジェクトを繋げることができる
- テーマビルダーにListing Gridを挿入すれば、Relationsで繋げた内容の動的なテンプレートを作成することができる
【RelationとListing、テーマビルダーの使用手順のおさらい】
- Relationsで2つの投稿タイプを繋げる
- Parent object（親）とChild object（子）、それぞれのListing Itemを作成する
- テーマビルダーで作成したテンプレートに『Listing Grid』ウィジェットを挿入し、Relationの情報を繋げる
【テーマビルダーに挿入したListing GridでRelationの情報を繋げる方法のおさらい】
- コンテンツタブの『Listing』で呼び出したいListing Itemの名前を検索し選択する
- コンテンツタブの『Post Query』で『+項目を追加』をクリック
- 『Type』で『Posts & Author Paramenters』を選択する
- 『動的タグ』のマークをクリック
- 『Related Items』を選択
JetEngineのRelation機能を使ったサイト（今回のサンプルで使用したような映画のサイト）を、こちらからダウンロードしお試しすることもできます。
All-in-One WP Migrationで簡単にサイトにインポートし、試すことができますのでぜひダウンロードしてみてください！
JetEngineのことをもっと学びたい人は、どうぞJetEngineの使い方完全ガイドを見てください。
様々なJetEngineに関する情報がまとめられています。
本日紹介しらRelationsを使用するには、『JetEngineのListings』や『Elementorのテーマビルダー 』の機能を合わせて一つの形になる機能です。
それぞれの機能や使い方も各記事でくわしく紹介をしていますので、ぜひ参考にしてくださいね！