JetEngineのListing Gridで事例一覧を自動表示する具体例

制作事例をElementorのカードで1件ずつ作っていると、最初の3件までは気持ちよく作れます。問題は、10件、30件と増えたときです。古い事例の表示順を変える、業種ラベルを直す、一覧ページとトップページの両方を更新する、といった作業が積み上がります。

この記事では、JetEngineの一覧テンプレート（Listing Item）と一覧表示（Listing Grid）を使い、制作事例カードを自動表示する具体例を作ります。想定するのは、Elementorで作ったWeb制作会社サイトの「制作事例一覧」です。制作事例をWordPress側のデータとして登録し、Elementor側ではカードの見た目だけをテンプレート化します。

JetEngineの公式ページで、データ構造、動的表示、一覧テンプレートの位置づけを確認してから読むと、この記事の流れが理解しやすくなります。

JetEngine公式ページを見てみる

この記事で分かること

• 制作事例を静的カードではなくデータとして管理する考え方
• JetEngineで作る制作事例用のデータの箱と入力項目
• 1件分のカードを一覧テンプレートとして作る流れ
• Listing Gridで3列一覧や表示件数を設定する例
• Query Builderでおすすめ事例を先に出す考え方
• 件数が増えたときに複雑になりすぎる境界

まず何を作るのか

今回作るのは、制作事例の一覧ページです。1件の事例には、案件名、業種、課題、対応内容、成果数値、サムネイル画像、詳細ページへのリンクを持たせます。Elementor側では、これらを使って1件分のカードを作り、Listing Gridで一覧ページに並べます。

静的なElementorカードとの違いは、更新場所です。静的カードは、一覧ページ上でカードを複製して中身を書き換えます。トップページにも同じ事例を出したい場合は、トップページ側でも同じ修正が必要です。JetEngineを使う構成では、制作事例を1件登録すると、一覧ページ、トップページの最新事例、関連記事ブロックなどへ同じデータを出せます。

ここで作るのは、複雑な検索サイトではありません。まずは、事例を登録したら一覧に反映される最小構成です。絞り込み検索や比較表は、基本の一覧表示が安定してから足す方が安全です。

JetEngineでどのデータを持たせるのか

最初に作るのは、制作事例を入れるデータの箱（CPT）です。名前は分かりやすく case_study とします。記事としてブログに混ぜるのではなく、制作事例専用の管理場所を作るイメージです。

次に、制作事例の入力項目を作ります。ここで大事なのは、カードに表示したい情報を分けておくことです。「本文」だけに課題、成果、業種を全部書くと、一覧カードの好きな場所に出しにくくなります。並び替えや絞り込みにも使いにくくなります。

一覧テンプレートで1件のカードを作る

データの箱を作ったら、次は1件分のカードを作ります。JetEngineでは、1件の表示パターンを一覧テンプレートとして作り、それをListing Gridで繰り返し表示します。Elementorで言えば、カードのデザインを1回だけ作り、登録済みの制作事例に自動で当てはめるイメージです。

カード構成は、最初は次のくらいに絞ると作りやすいです。

• 上部: サムネイル画像
• 小ラベル: 業種
• 見出し: 投稿タイトル
• 本文: 主な課題
• 強調: 成果数値
• リンク: 詳細ページへ

Elementor側では、画像は動的画像、タイトルや課題は動的テキスト、詳細ボタンは動的リンクとして設定します。最初のうちは「動的」という言葉が難しく感じるかもしれませんが、考え方は単純です。カードに直接文字を打つのではなく、JetEngineの入力項目を呼び出して表示します。

重要なのは、一覧テンプレートの中に1件分のデザインだけを作ることです。ここで6件分のカードを手で並べると、Listing Gridを使う意味が薄れます。1件分を丁寧に作り、その1件分を一覧表示側で繰り返す、と分けて考えてください。

Listing Gridで一覧ページに並べる

一覧テンプレートができたら、制作事例一覧ページをElementorで開き、Listing Gridを配置します。設定としては、どの一覧テンプレートを使うか、何列で表示するか、何件出すか、ページ送りや読み込み追加を使うかを決めます。

最初からアニメーションや複雑なホバー効果を入れるより、カードの情報が読めることを優先します。特にスマホでは、3列の見た目よりも1件ずつ読みやすいことが大切です。成果数値を大きく見せたい場合も、全カードで高さが揃うように文字量を調整します。

Query Builderでおすすめ事例を先に出す

基本の一覧表示だけなら、Listing Gridの標準設定で十分です。もう少し実務寄りにするなら、Query Builderで「おすすめ事例だけをトップページに出す」「制作事例一覧では公開日が新しい順に出す」のような表示条件を分けます。

たとえば、トップページの「おすすめ制作事例」ブロックでは次のようにします。

ここで考えるべきなのは、条件を増やせば便利になるとは限らないことです。業種、地域、価格帯、成果、対応範囲、公開日、担当者を全部条件にすると、管理者も読者も迷います。最初は「おすすめ」「新しい順」「業種」の3つくらいまでにして、アクセスや運用を見てから広げる方が失敗しにくいです。

Elementor側で見た目を整えるコツ

Listing Gridは、データを並べる仕組みです。見た目の完成度は、一覧テンプレート側の余白、文字量、画像比率に左右されます。制作事例カードなら、画像の比率を揃え、業種ラベルを短くし、成果数値を1行で見せると読みやすくなります。

カード内の文章は、詳細ページへ誘導するための短い要約にします。課題や成果を全部書こうとすると、カードが縦長になり、一覧ページ全体が読みにくくなります。カードでは「何の事例か」「何が改善したか」「もっと読む先があるか」だけ分かれば十分です。

必要なら、ElementorのカスタムCSSやサイト共通CSSに次のような小さな調整を入れます。これは見た目の補助であり、JetEngineの標準設定だけでも一覧表示は作れます。

.case-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.case-card__result {
  color: #ed5565;
  font-weight: 700;
}

.case-card__button {
  margin-top: auto;
}

配置場所は、Elementorの対象テンプレート内のカスタムCSS、または外観の追加CSSです。クラス名は自分のカードに合わせて変更してください。CSSは便利ですが、カードの設計が曖昧なままCSSだけで整えようとすると、あとで崩れやすくなります。

運用すると何が楽になるのか

この構成の一番の利点は、更新場所を1つに寄せられることです。新しい制作事例を追加するときは、制作事例の管理画面から1件登録します。業種、課題、成果数値、画像を入れて公開すれば、一覧ページに反映されます。トップページにも同じデータを出していれば、そこにも反映できます。

静的カード運用では、ページごとにコピーを直す必要があります。JetEngine運用では、データを直すだけで表示側が変わります。これは、制作事例だけでなく、講師一覧、サービス一覧、セミナー一覧、店舗一覧にも応用できます。

ただし、入力項目の設計を途中で大きく変えると、既存事例の再入力が必要になります。公開後に「やっぱり業種を複数選択にしたい」「成果数値を数値型にしたい」と変える場合は、既存データへの影響を確認してから進めてください。バックアップを取り、テスト環境で確認してから本番に反映するのが安全です。

どこから複雑になりすぎるのか

Listing Gridは便利ですが、万能の高速一覧システムではありません。制作事例が数十件程度なら扱いやすいですが、数百件、数千件になり、複数条件の絞り込みや画像の多いカードを組み合わせると、表示速度や管理画面の運用を考える必要が出てきます。

特に注意したいのは、次のようなケースです。

• 1ページに大量のカードを一度に表示する
• 画像サイズが大きいまま登録されている
• Query Builderの条件を増やしすぎる
• 絞り込み検索を複数組み合わせる
• 詳細ページで関連事例を何段も読み込む
• 入力項目を後から大きく変更する

逆に、ここまで複雑にしなければ、JetEngineのListing Gridは静的Elementorカードから一歩進む入口としてかなり分かりやすいです。最初は制作事例CPT、入力項目、1件のカード、一覧表示の4点に絞ってください。

この構成が向いている人・向いていない人

向いているのは、Elementorで制作事例や実績一覧を手作業で更新していて、同じ情報を複数ページで使い回したい人です。Web制作会社、士業、スクール、店舗紹介、講師紹介のように、同じ形の情報が増えていくサイトでは効果が出やすいです。

向いていないのは、事例が2件だけで今後も増えないサイトです。その場合は、Elementorの静的カードでも十分です。また、大規模な検索サイトや会員別表示、権限管理、外部データ連携まで必要な場合は、JetEngineだけで済ませる前提にせず、性能、権限、保守の設計も確認してください。

まとめ

JetEngineのListing Gridは、制作事例カードをただ並べるための見た目パーツではありません。データの箱、入力項目、一覧テンプレート、一覧表示をつなぎ、Elementorで作ったページを更新しやすい動的サイトへ近づける仕組みです。

今回の例では、case_study という制作事例用のデータの箱を作り、業種、課題、成果数値、公開日などを入力項目として分けました。そのうえで、1件分のカードを一覧テンプレートとして作り、Listing Gridで3列表示しました。必要に応じてQuery Builderを使えば、おすすめ事例だけをトップページに出すこともできます。

静的なカード更新に限界を感じているなら、まずは制作事例一覧から試すのが分かりやすいです。いきなり検索や会員機能まで広げず、1つのデータの箱と1つの一覧から始めてください。

JetEngine公式ページを見てみる