JetEngineの『Listings』っていったいなに？使い方がいまいちわからない・・。
という方が多いのではないでしょうか。
JetEngineのListingsで投稿タイプやタクソノミーをリストで表示するときに使うテンプレート（Listing Item）をで簡単に作成することができます。
また、作成するリストのテンプレートにJetEngineのダイナミックウィジェットを使えば動的にあらゆるデータを繋げて表示させることもできますよ！
さらにElementorのテーマビルダーのアーカイブページにJetEngineの『Listing Grid』ウィジェットを挿入し、Listing Itemの情報を呼び出すだけで簡単に同じ項目の情報がずらりと並んだリストを表示できるページを作成することができます。
この記事でListingsでリストのテンプレート（Listing Item)の作成方法と、作成したListing Itemを一覧ページとして表示させる方法を紹介していきます。
- Listingsはリストのテンプレートを作る場所
- Listing Itemとはリストのテンプレートのこと
- Setup Listing Itemは、どこから情報をリストに呼び出すかを選択する重要な設定
- Listing Itemを動的な仕様にするならJetEngineのダイナミックウィジェットで作成
- Listing itemを『Listing Grid』ウィジェットで呼び出し、テーマビルダーのアーカイブページでリストページを構成する
JetEngineのことをもっと学びたい人は、どうぞJetEngineの使い方完全ガイドを見てください。
様々なJetEngineに関する情報がまとめられています。
また、JetEngineのListingsの使い方を動画で確認したい方はこちらからどうぞ！
＞＞You TubeライブでJetEngineのListings Itemの作り方を実演した動画もありますのでよかったらどうぞ！
こちらはノコデ（ホームページ制作サービス）のWebサイトではJetEngineのListing gridをどのように使っているのか説明した動画です。
ぜひ参考にしてください！
投稿タイプを表示するリストのテンプレートを作成する方法
例えば『映画情報サイト』があるとしましょう。
そこには映画のタイトルやその映画の詳細な情報が詰まっていて、さまざまな項目をリストとして表示するテンプレートを作りたいとします。
このサンプルでは、『映画』のリストを作っていきます。
この『映画』という投稿タイプの情報をリストにしていきます。
ListingsでListing Itemを追加する
リストのテンプレート作成はJetEngineの『Listing』のページで行います。
JetEngineではリストのテンプレートのことを『Listing Item』と言います。
左側のダッシュボードの『JetEngine』内にある『Listings』をクリックし、『Listing Items』というページを開き『Add New』をクリックします。
すると以下の『Setup Listing Item』というウィンドウが開きます。
Setup Listing Itemの設定
Setup Listing Itemの設定は以下の手順に従ってください。
このセットアップは、どのソースから情報を引き出すかなどを設定する重要な部分です。
Listing source
『Listing source』では、以下のどのソースからリストに情報を引き出すかを選択します。
- Posts（投稿タイプ）
- Query Builder
- Terms
- Users
- Repeater Field
今回は『映画』の投稿タイプから情報を引き出すので、『Posts』を選択します。
From post type
『From post type:』は、どの投稿タイプのを元に情報を引き出すかの選択です。
このサンプルでは『映画』を選択します。
なお、この項目は『Listing source』で何を選択するかにより選べるものの表示は変わります。
Listing item name
『Listing item neme』は作成するリストの名前です。
こちらは自分でわかる名前をつけてください。
Listing view
『Listing view』で以下が表示されるので『Elementor』を選択します。
- Elementor
- Blocks（Gutenberg）
Setup Listing itemの項目をすべて選択したら『Create Listing Item』をクリックします。
すると、まっさらなElementorの編集画面が表示されます。
JetEngineのダイナミックウィジェットを使いリストのテンプレートを作る
今回のリストのフレームを、ウィジェットリストの一番下にある『LISTING ELEMENTS』というJetEngineのオリジナルウィジェットをつかい制作していきます。
JetEngineのウィジェット、『LISTING ELEMENTS』は全部で8種類あります。
先に答えを言うと、上記の完成された『映画』のリストは、『Dynamic Image』と『Dynamic Field』、『Dynamic Link』ウィジェットの3つで構成されています。
ウィジェットを挿入してからの操作方法など、いくつかポイントがあるのでこの映画のリストのテンプレートを作る手順を見ながら説明をしていきます。
Dynamic Imageウィジェットの挿入しアイキャッチ画像を表示させる
このサンプルでは、『アイキャッチ画像』（映画のサムネイル）を一番上に挿入したいので『Dynamic Image』ウィジェットをドラッグ＆ドロップでカラムに挿入します。
※何の情報を表示させるかにより使用するウイジェットは変わってきます。
こちらは『Dynamic Image』を挿入した後の表示画面です。
エディターの『Source』が『Post Thumbnail』となっていますが、これは画像をどのソースから呼び出すかの選択で、Post Thumbnail（ポストサムネイル）＝アイキャッチ画像になります。
LISTING ELEMENTウィジェットを挿入すると要素の大きさから余った部分は大きな余白となってしまいます。
このままでは枠の範囲がカラム幅いっぱいになり余白だらけになってしまうので、横幅を画像に合わせる編集を行いましょう。
Listing Settingsでリストの横幅を調整する
- 画面左下の『歯車』をクリック
すると『Listing Item 設定』が表示されます。 - 『Listing Settings』をクリック
『Preview Width』のカーソルを横にスライドさせ、枠の幅を決定します。
なお、このサンプルでは画像にぴったりと幅を合わせていますが、デザイン的にフレームの幅を大きくしても問題ありません。
こちらは画像よりもフレームの幅が大きくなった分、画像の右側に余白ができました。
しかし、画像の編集で『配置』を『中央』にし、バランスを取ることもできます。
Dynamic Fieldウィジェットを挿入し投稿タイプのデータを呼び出す
『Dynamic Field』ウィジェットはこのサンプルの場合、『映画』の投稿タイプのさまざまな情報をリストに呼び出すことができます。
タイトルを呼び出す
『Dynamic Field』ウィジェットをドラッグ＆ドロップで画像の下に挿入します。
ちなみにDynamic Fieldウィジェットを挿入するとデフォルトで『フォレスト・ガンプ』とすでにタイトルが表示されました。
この情報はDynamic Fieldウィジェットのエディター、コンテンツタブの『Source』と『Object Field』から来ています。
- Source：Post/Term/User/Object Data
- Object Field：Title
つまり、『投稿タイプのソースのタイトルから情報を得る』という指示に準じて『フォレスト・ガンプ』が表示されたと言うわけです。
『Dynamic Field』ウィジェットは『Source』と『Object Field』の組み合わせで表示させるものを変更することができます。
Dynamic Fieldウィジェット1つにつき1つの情報が入れられるので、これを応用してさまざまな情報をリストの中に入れていきましょう。
＞＞JetEngineでDynamic FieldウィジェットのContentを選択したときに出てくる説明文を短く表示する方法を説明した動画もありますのでよかったら参考にしてください。
メタデータを呼び出す
メタデータを呼び出すには以下のように設定します。
- Source：Meta Data
- Meta Field：自分が呼び出したいメタデータ情報をリストの中から選択する
このサンプルではMeta Fieldの項目を『メイン俳優』にし、『トム・ハンクス』を表示させました。
ちなみにここで言うメタデータとはJetEngineの『Meta Field』や『Meta Box』から来ている情報です。
Meta Field、Meta BoxとはWordPress内に設置したカスタムフィールドのことです。
Meta Fieldの作り方や細かい機能を説明した記事やMeta BoxでWordPressのいたるところにカスタムフィールドを設置する方法を紹介した記事もありますのでどうぞ参考にしてください！
表示したフィールドの前後に文字を追加する方法
例えばDynamic Fieldウィジェットで、メタデータから『公開年』を呼び出したとします。
画面には『1994』とだけ表示されましたが、年号の前後に文字を追加して『公開年: 1994年』としたいとします。
- 『Customize field output』を『オン』にする
- 『Field format』に『公開年: %s年』と記入する
するとリストの中のフィールドの表示が『公開年: 1994年』となります。
『％s』の前後に入力した文字がフィールドに反映する仕組みです。
リンクするボタンを追加する
このサンプルでリストの一番下に、映画の『詳細』にリンクするボタンを追加したいと思います。
『Dynamic Link』ウィジェットをドラッグ＆ドロップで挿入します。
各映画の詳細情報は『映画』の投稿タイプの各投稿に書かれているので、リンクをクリックしたときに表示しているタイトルのページを表示させたい訳です。
その場合は『Source』を『Permalink』（パーマリンク）に設定します。
『Source』のリストを開くとさらに項目に焦点を絞ってリンクさせることも可能です。
フィールドにはデフォルトで『Read More』と表示されていますが、別の言葉に変更したい場合は『Label』のプレイスホルダーの表記を変更します。
このサンプルでは『詳細をチェック』としました。
現段階では『詳細をチェック』の文字にリンクが付いただけの表示なのでスタイルをし、ボタン風にアレンジしていきます。
コンテンツタブの『Alignment』（配置）で『Fullwidth』（全幅）を選択します。
すると『詳細をチェック』が入った枠内すべてにリンクがつきます。
なお、『左/中央/右』を選択した場合は文字のみにリンクがつき、その他の余白範囲は含まれません。
『詳細をチェック』がボタンに見えるように『スタイルタブ』で編集をしアレンジしました。
これは通常のElementorの編集と同じなので説明は割愛します。
最後に『セクションを編集』のスタイルの『枠線』でボックスシャドウを加えてみました。
他にも『ボーダータイプ』で枠線を加えたり、『背景』で背景色を入れるなど好きなようにアレンジしてください。
編集が終わったら、左下の『更新』をクリックしてください。
すると『Listing Items』（リストのテンプレート一覧）ページに先ほど作成した『映画のリスト』が表示されました。
Listingsで作成したテンプレートをどのように一つのページにずらっと一覧で表示させるかを以下で説明していきます。
テーマビルダーとListing Gridウィジェットで動的な投稿タイプのリストページを作る方法
Listingsで作成したリストのテンプレートを動的になリストとして表示できるようにするには、ElementorのテーマビルダーとJetEngineのウィジェット『Listing Grid』（リスティンググリッド）を使用していきます。
1.テーマビルダーのアーカイブページを作成する
まずダッシュボードから『テーマビルダー』のページへ行きます。
- 画面左側の『Archive』（アーカイブ）をクリック
- 画面左上の『Add New』をクリック
アーカイブページのテンプレートライブラリが表示されたら×ボタンをクリックして閉じます。
すると、まっさらなElementorの編集画面が表示されます。
2.Listing Gridウィジェットを挿入しテンプレートを一覧で表示させる
テーマビルダーのアーカイブページの編集画面に『Listing Grid』ウィジェットを挿入します。
こちらは『Listing Grid』を挿入した後の表示画面で、『Please select listing to show』と表示されます。
コンテンツタブの『Listing』でページに一覧として表示させたい『Listing Item』の名前を検索し、選択します。
するとこのように、一気に『映画のリスト』で作成したテンプレートに添って『映画』の投稿タイプが一覧となって表示されました。
>>JetEngineのListing GridウィジェットでPosts Queryを設定し、レビュー評価を高い順に並べ替える方法を実演した動画がありますのでぜひ参考にしてください。
アーカイブページのテンプレート作成の場合はUse as Archive Templateにチェックを入れる
作成中のテンプレートがアーカイブページのものの場合は『Use as Archive Template』を『オン』にしてください。
Use as Archive Templateをオンにするとエディターがアーカイブページに特化した仕様に変化します。
しかし表示されていた編集画面のリストの見た目は変わってしまうので、次にこの表示を『Preview Settings』で元に戻していきます。
- 画面左下の『歯車マーク』をクリック
- 『設定』の『Preview Settings』をクリックしタブを開く
- 『Preview Dynamic Cotent as』で作成中のアーカイブ名をリストから探す
（このサンプルの場合は『映画Archive』） - 『APPLY＆PREVIEW』をクリック
すると、編集画面は元に戻ります。
細かい編集の仕方についてはのJetEngineのListingsの使い方の動画の15:00辺りで説明をしていますのでそちらを参考にしてください！
編集が済んだら、画面左下の『公開』をクリックします。
するとテンプレートで作成したものの表示をコントロールする、『Display Condition』が表示されます。
3.Display Conditionを設定する
『ADD C ONDITION』をクリックします。
するとデフォルトで『All Archive』が選択されていますので、該当するページを選択します。
- 『INCLUDE / All Archive』の右側の『▽』をクリック
- 表示させたいページを選択する
（このサンプルの場合『映画Archive』） - 『SAVE＆CLOSE』をクリック
こちらはサイトのプレビュー画面で見た『映画』の一覧ページです。
このように、JetEngineのListingsで作ったリストのテンプレートを、テーマビルダーとListing Gridウィジェットを使い構成すれば、簡単に動的な情報を一覧にできるページを作ることができます！
今回は投稿タイプを例にリストを作成しましたが、もちろんタクソノミーなどWordPressのさまざまな場所から情報を引き出し、Listingでさまざまなリストを作成することができます。
タクソノミーでリストを作成するにしても要はどのSourceから情報を引き出すかの選択を間違えなければいいだけで、Listing Itemやテーマビルダーでのページの作り方は基本的この記事で紹介したことと同じです。
JetEngineのListingsの使い方を紹介した動画の20:55辺りでタクソノミーのListing Itemを作る方法を紹介していますのでどうぞ参考にしてくださいね！
まとめ
JetEngineの『Listings』を使えば簡単にリストのテンプレートを作成でき、さらにElementorのテーマビルダーと『Listing Grid』ウィジェットを使えば動的に情報を引き出すことのできる一覧ページを作成することができました。
CrocoblockのJetEngineを使用すればノーコードで複雑なサイトの構成や動的なページを作成できます。
JetEngineはWeb制作において革命的なプラグインですね！！
この記事の内容をここでおさらいします。
- Listingsはリストのテンプレートを作って格納する場所
- Setup Listing ItemのListing SourceでWoedPressのどこからテンプレートに情報を引き出すかを決定する重要な設定
- JetEngineのダイナミックウィジェットを使うと動的なリストのテンプレートが作れる
- 『Listing Grid』は挿入してソースを選択するだけでListing Itemを一覧で表示させられるすごいウィジェット
- テーマビルダーのアーカイブページでListing Gridを使ってリストページを構成する
JetEngineのことをもっと学びたい人は、どうぞJetEngineの使い方完全ガイドを見てください。
様々なJetEngineに関する情報がまとめられています。
この記事でJetEngineのカスタム投稿タイプで作成した『映画』と言う投稿タイプをサンプルとしてListing Itemを作成しました。
メタデータを作るMeta FieldsやMeta Boxなどの役割や作成方法も各記事でくわしく説明していますのでぜひ参考にしてくださいね！