「2つ以上の投稿タイプをミックスして、一つのページに動的に一覧表示できたらいいのに！」と思いませんか？
JetEngineを使えばもちろんそれが可能になります！
過去に、JetEngineで作成した1つの投稿タイプをListingsでリストのテンプレートを作成し、Listing Gridでその投稿タイプの一覧表示させる方法を紹介しましたが、やり方はそれとほとんど同じで、複数の投稿タイプを連携させるためには『Query Builder』の操作が加わります。
これでQuery Builderの使い方もマスターしてしまいましょう！
【JetEngineで複数の投稿タイプを一つのリストで表示させるための簡単3ステップ】
- JetEngineのQurey Builderで複数の投稿タイプのクエリーを作成する
- Listingsで投稿タイプの記事を表示させるためのリストのテンプレートを作成する
- 固定ページを新規追加し、Listing GridでListing Itemを一気に表示する
JetEngineのことをもっと学びたい人は、どうぞJetEngineの使い方完全ガイドを見てください。
様々なJetEngineに関する情報がまとめられています。
また、JetEngineで複数の投稿タイプをリスト表示させる方法を動画でご覧になりたい方はこちらからどうぞ！
この記事の操作どおりに操作を行なっていただければ、複数の投稿タイプを1つのページにリスト表示させることはできますが、使用するJetEngineのListings機能やListing Gridウィジェットなどのくわしい説明は『Listingsの使い方』の記事をどうぞ参考にしてください。
使用するプラグインと投稿タイプ
複数の投稿タイプを一つのリストで表示する方法に使用するのに必要なプラグインは以下の3つです。
さらに今回の記事のサンプルとして、JetEngineで作成した以下の2つのカスタム投稿タイプを1つのリストとして表示させていきたいと思います。
- 野菜
- レシピ
JetEngineでカスタム投稿タイプを作成する方法は»JetEngineでカスタム投稿タイプとカスタムフィールドを作る方法 – Crocoblockの記事でくわしく説明をしています。
JetEngineのQuery Builderを作成
まずはダッシュボードのJetEngineの中にある『Query Builder』をクリックしましょう。
すると以下のQuery Builder（Queries List）の一覧画面が表示されます。
画面上部の『Add New』をクリックしましょう。
すると以下の新規クエリー設定画面が表示されますので、まずは『General Settings』の設定をしましょう。
- Nameを入力する
※このサンプルでは『野菜とレシピのリストクエリー』とします。 - Query Typeで『Post Query』を選択
次に、『Posts Query』の設定を行います。
Posts Queryの『General』の『Post Type』で、ひとつのリストに表示させる投稿タイプを選択しましょう。
このサンプルでは『野菜』と『レシピ』の2つの投稿タイプを選択しますが、好きなだけ追加が可能です。
次に『Order ＆ Oeder By』を選択します。※こちらは場合によっては不要になる
- 『Order By』で『Random order』を選択する
- 『Add Query』をクリック
※これでクエリーが追加されました。
ちなみにOeder Byとは、リストをどのように表示するかの選択ですが、今回選択する野菜とレシピの投稿タイプでは『レシピ』の方が時系列的に新しい記事が多く、Order Byを設定しないと一覧表示したときにページトップにレシピの記事がかたまってしまいます。
『Random order』とは、リストページに選択した投稿タイプの記事が時系列関係なくランダムに表示される設定になります。
Order Byを設定するかどうかは、リストにまとめる投稿タイプの時系列にもよりますので、不要な場合はこの設定は飛ばしてOKです。
ちなみに以下はQuery Builderの一覧画面です。
作成した『野菜とレシピのリストクエリー』が追加されました。
JetEngineのListingsを作成
次にJetEngineの『Listings』で複数の投稿タイプを動的にリスト表示させるためのテンプレートを作成していきます。
- ダッシュボードのJetEngineの中の『Listings』をクリック
- 画面上部の『Add New』をクリック
すると以下の『Setup Listing Item』が表示されますので以下のように設定してください。
- Listing source：Query Builder
- Query：野菜とレシピのリストクエリー
※今回作成したクエリー名を選択しましょう。 - Listing item name：野菜とレシピのリストアイテム
※好きな名前を入力してください。 - Listing view：Elementor
- 『Create Listing Item』をクリック
するとElementorの編集画面が表示されますのでリストのテンプレートを作成していきましょう。
- 画面左下のギアマークをクリック
- 『Preview Width』でカラムの幅を調整する
次にJetEngineのダイナミックウィジェットを挿入しリストのテンプレートを構成していきます。
今回はカラムに以下の2つのウィジェットを挿入しました。
- Dynamic Imageウィジェット
- Dynamic Linkウィジェット
Dynamic Imageウィジェットは、画像を動的に呼び出すことのできるウィジェットでサムネイル（アイキャッチ画像）を表示するために挿入しました。
Dynamic Linkウィジェットは、クリックで記事にリンクさせるために挿入しました。
なお、今回はサンプルとして上記2つのサンプルを使用しましたが、もちろん他のウィジェットなども組み合わせて自由にリストを構成してくださいね！
以下でDynaic Linkをどのように設定したかを説明します。
Dynamic Linkウィジェットは挿入した段階では『Read More』と表示されますので、投稿名が表示されるようにしたいと思います。
投稿名を動的に表示できるようにするためには、『Label』の動的タグから『Post Title』を選択しましょう。
すると、Dynamic Linkの表示が『野菜とレシピのリストアイテム』（LIsting Item名）に変化しましたが、これでOKです。
また、必須ではありませんが『HTML wrapper』でPost Titleを『H4』に設定しました。
さらに好きなようにリストを編集し、最後に『更新』をクリックしダッシュボードに戻りましょう。
ちなみに以下はListingsに追加された『野菜とレシピのリストアイテム』です。
今回はざっくりとリストの作り方を紹介しましたが、さらにくわしいリストの編集方法につきましては»JetEngine【Listings】の使い方・動的な一覧ページがノーコードで作れる！の記事で説明をしていますのでそちらを参考にしてください！
固定ページを新規追加しListing Gridでリストを一覧表示する
Listingで作成したテンプレート（Listing Item）を、固定ページにListing Gridウィジェットで挿入し一気に表示させていきます！
- ダッシュボードの『固定ページ一覧』をクリック
- 画面上部の『新規追加』をクリック
するとブロックエディターが表示されますので以下のように設定しましょう。
- 固定ページのタイトルを記入する
- テンプレートで『Elementor キャンパス』を選択
※ちなみにこちらは任意です。 - 『Elementorで編集』をクリック
すると、以下のようにElementorの編集画面が表示されます。
LISTING ELEMENTSにある『Lsiting Grid』ウィジェットをカラムに挿入しましょう。
そしてコンテンツタブの『Listings』で『野菜とレシピのリストアイテム』を検索しましょう。
実質これで完了です！あとはご自分で好きなように編集してください。
なお、上記はプレビュー画面です。
Query Builderの『Order By』を『Random order』に設定したので時系列関係なく、野菜とレシピの記事がランダムに表示されています。
ページをリロードしてみましょう。
するとこのように、記事のリストの配置がさらにランダムに変更されました！
ランダムに表示させる設定はマストではないですが、時系列関係なくいろいろなものを表示させたいときには便利かもしれませんね！
まとめ
複数の投稿タイプを一つのリストに表示させるには、JetEngineとElementorをつかえば簡単にすることができました！
そのためにはJetEngineの『Query Builder』と『Listings』の機能が必要です。
実際の操作方法も、Listingsをすでに扱うことができるのならそんなにむずかしくはないですね！
ここで今回の記事のおさらいをしましょう。
- Qurey Builderで2つ（もしくはそれ以上）の投稿タイプ同士の関係を作る
- 投稿タイプにより作成した日の時系列が大きく偏る場合はOrder Byで『Random order』を選択するとリストが時系列関係なくランダムに表示される（任意）
- Setup Listing ItemsでListing sourceを必ず『Query Builder』にする
- Listingsで記事を動的に一覧表示させるためのテンプレートを作成する
- 記事を表示させるListing Itemを作成するなら、クリックでリンクに飛ばすために『Dynamic Link』ウィジェットをつかう
- 固定ページでListing Gridを挿入し記事を一覧表示させる
ぜひWordPressの最強拡張プラグイン、JetEngineをつかっておしゃれで機能的なサイト制作をしてくださいね！
JetEngineのことをもっと学びたい人は、どうぞJetEngineの使い方完全ガイドを見てください。
様々なJetEngineに関する情報がまとめられています。
TOFUラボ主催のNaomi SuzukiはElementor、Divi、CrocoblockのノーコードWeb制作を初め、WordPressに関わる有益な情報をNocodeweb.jp、Jet.nocodeweb.jp（当サイト）、Naomi SuzukiのYouTubeチャンネルで配信しています。
また、Naomiの配信する完全無料のメルマガでは、WordPressの脆弱性に関する情報やセールの情報、居住地ブダペストのノマドライフを毎週火曜日に配信しています。