JetElementsとJetEngineで動的なカルーセルを作る方法

お客様の声や導入事例をLPに載せるとき、最初はElementorでカードを3枚ほど並べれば十分に見えます。ただ、掲載数が増えたり、サービス別に出し分けたくなったりすると、静的なカード管理はすぐに重くなります。文言の差し替え、順番変更、非表示対応をページ上で毎回やるのは、思ったより集中力を使います。

この記事では、JetEngineで「お客様の声」データを管理し、JetElementsのカルーセル表示に流し込む考え方を解説します。作るのは、お客様の声リピーターと動的カルーセルです。公式ドキュメントでも、JetElementsのAdvanced CarouselにはJetEngine Queryを使う設定があり、クエリ結果をカルーセル形式で表示できると説明されています。

JetElements公式ページを見てみる

この記事で分かること

• JetElementsを単なる装飾ウィジェットで終わらせない考え方
• JetEngineでお客様の声をデータ化する入力項目例
• Query Builderで表示する声を選ぶ設定例
• Elementor側でカルーセルの1件分をどう組むか
• 動きのある見せ方を入れる前に決める運用ルール

まず何を作るのか

今回の例は、Web制作サービスのLPに置く「お客様の声」カルーセルです。トップページには全体向けの声を出し、サービス詳細ページではそのサービスに関係する声だけを出す。静的なElementorカードでも作れますが、ページごとに同じ声をコピーしていると、修正漏れが起きやすくなります。

JetElementsは、スライダー、カルーセル、ポートフォリオ、レビュー、タイムラインなど、Elementorの見せ方を増やすプラグインです。ただし、見た目の部品だけで考えると、カードを手入力で並べる発想から抜けにくくなります。ここでJetEngineを組み合わせると、表示する中身をデータとして管理できます。

今回の構成は次の通りです。

• データの箱: testimonial
• 管理する内容: お客様の声、業種、評価、表示先サービス
• 表示場所: LP中段の信頼セクション
• 表示方法: JetElementsのAdvanced Carousel
• 選び方: JetEngine Query Builderで「公開中」「サービス一致」を条件にする

ここで少し迷いやすいのは、「お客様の声」を通常投稿で管理するか、専用のデータの箱に分けるかです。ブログ記事として読み物にしたいなら通常投稿でもよいですが、LP内に短く表示する部品として使うなら、専用のCPTに分けた方が扱いやすくなります。

静的カルーセルとの違いを先に見る

静的なElementorカルーセルでは、スライド1、スライド2、スライド3という形でカードを手入力します。早く作れるのは利点です。ただ、同じ声を別ページにも載せたい場合、コピーした数だけ修正場所が増えます。サービス名の変更、掲載停止、表現修正が入ったときに、どのページに残っているか探すのは意外と面倒です。

JetEngineでデータ化する場合、修正場所は「お客様の声」1件に寄せられます。表示側は、条件に合う声を呼び出すだけです。つまり、Elementorで作るのはカードの見た目で、WordPress管理画面で扱うのはカードの中身です。この分担ができると、LPを複数持つサイトでは運用がかなり楽になります。

ただし、声が少ない段階で無理に動的化すると、設定の方が重く感じることもあります。3件だけを1ページに置くなら、静的カードで十分なこともあります。最初に「今後増えるのか」「別ページでも使うのか」「表示条件を変えたいのか」を確認してから決めるのが現実的です。

JetEngineでお客様の声をデータ化する

JetEngine側では「お客様の声」というデータの箱（CPT）を作ります。目的は、カルーセルに必要な情報を入力項目として分け、あとから表示先や並び順を管理できるようにすることです。

本文を長く入れすぎると、カルーセルのカード高さが不安定になります。詳細なインタビュー記事を作るなら別ページにして、カルーセルでは短い抜粋だけを見せる方が読みやすいです。ここは実装というより、運用ルールの問題です。

Query Builderで表示する声を選ぶ

JetElementsのAdvanced Carouselを動的にする場合、JetEngineのQuery Builderで「どのお客様の声を出すか」を決めます。公式のAdvanced Carousel解説でも、Use JetEngine queryを有効にすると、Query Builderで作ったカスタムクエリをカルーセルのソースにできる流れが紹介されています。

今回のクエリ例は次のようにします。

• Query Type: Posts Query
• Post Type: testimonial
• Status: publish
• Meta Query 1: display_service = Elementor制作
• Meta Query 2: is_featured = true
• Order By: rating
• Order: DESC
• Posts Per Page: 6

ここで大事なのは、全部のお客様の声をカルーセルに流さないことです。評価が高いものだけを出す、サービスと合うものだけを出す、公開済みだけを出す。この程度の条件でも、LPごとの表示はかなり管理しやすくなります。

ただし、実在しない声や誤解を招く表現を作って掲載するのは避けるべきです。声やレビューは信頼に関わる情報なので、掲載許可、表現の確認、個人情報の扱いを別途決めておく必要があります。JetEngineの設定で便利に出せることと、載せてよい内容かどうかは別の話です。

クエリ条件では、表示先サービスの値を表記ゆれさせないことも大切です。「Elementor制作」「Elementor 制作」「エレメンター制作」のように似た値が混ざると、条件に合わず表示されない声が出ます。SelectやGlossaryのように選択肢を固定しておくと、入力する人が変わっても崩れにくくなります。

並び順も決めておきます。評価順にするのか、掲載日順にするのか、手動の優先度を持たせるのか。LPでは「一番読ませたい声」を先頭にしたいことが多いので、priority という数値フィールドを追加してもよいです。たとえば priority: 10 を最優先、priority: 1 を通常表示としておけば、評価と別の軸で順番を調整できます。

Elementor側でカルーセルを組む

Elementor側では、JetElementsのカルーセルに1件分の見た目を作ります。Advanced CarouselでJetEngine queryを使う場合、複数の手入力スライドを作るのではなく、1件分のテンプレートを用意して、クエリ結果を繰り返し表示する考え方になります。

カードの構成例は次の通りです。

• 上部: industry を小さなラベルにする
• 中央: voice_text を短く表示する
• 下部: customer_name と rating を表示する
• リンク: 詳細事例ページがある場合だけ出す
• 余白: カードの高さをそろえ、長文で崩れないようにする

カルーセルは動きがあるので、見た目を盛りやすいです。ただ、読者にとって大事なのは、動きそのものよりも「自分に近い声が見つかるか」です。自動送りを速くしすぎると読みにくくなります。Pause on Hoverやナビゲーションの表示など、止めて読める設定も確認しておくと安心です。

公式のJetElementsページでは、スライダー、カルーセル、レビュー、テスティモニアルなどの見せ方が紹介されています。この記事の例では、その中でも「カルーセルで複数の声を横に流す」用途に絞っています。いろいろなウィジェットを一度に紹介すると、結局どれを使うのか分かりにくくなるためです。

スマホ表示で特に見たいところ

カルーセルはPC画面ではきれいに見えても、スマホで読みにくくなることがあります。カード幅が狭くなり、本文が縦に長くなり、次のカードへの矢印が本文に近づくためです。お客様の声は信頼を作るための文章なので、動きより読みやすさを優先します。

スマホでは、次のような設定を確認します。

• 1画面に出すカード数は1件を基本にする
• voice_text は2行から4行程度で収まる長さにする
• 自動送りが速すぎないか確認する
• 左右矢印やドットが本文に重ならないか見る
• タップできるリンクが小さすぎないか確認する

ここはデザインの好みだけで判断しない方がいいです。LPの中段に置くカルーセルは、読者がスクロールしながら一瞬で読む場所です。文章が長いなら、カルーセル内では短い抜粋にして、詳細ページへ送る方が自然です。

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

この構成にすると、新しいお客様の声を追加するとき、Elementorページを直接編集しなくても済みます。WordPress管理画面で1件追加し、表示先サービスと公開状態を選ぶ。条件に合えば、該当するLPのカルーセルに反映されます。

静的カードの場合、同じ声をトップページ、サービスページ、実績ページにコピーしていることがあります。すると文言修正が必要になったとき、どこに同じカードを置いたか探す作業が発生します。データ化しておけば、1件の声を更新し、表示側は同じデータを参照する形にできます。

運用面で楽になるのは、たとえば次のような場面です。

• サービス別に表示する声を分けたい
• 古い声を非表示にしたい
• カードデザインだけをまとめて直したい
• LPごとに同じ声をコピーしたくない
• 優先表示する声だけを一時的に変えたい

一方で、カルーセルを入れれば信頼感が上がる、とは言い切れません。声の内容が薄かったり、読者の文脈と合っていなかったりすると、動きだけが目立ちます。最初は件数よりも、表示先と内容の相性を見た方がいいです。

標準設定で考える実装の流れ

実装は、標準設定の範囲で次の順番に進めると迷いにくいです。

この順番を逆にして、先にカルーセルのデザインから作ると、あとで「どのデータを入れるつもりだったか」が曖昧になります。見た目から入るのは楽しいのですが、動的表示ではデータの箱を先に決めた方が後戻りが少ないです。

公開前のテスト項目

公開前には、実際の管理者が迷わず更新できるかを確認します。制作した本人だけが分かる入力項目名だと、数か月後に触ったときに意味を思い出せないことがあります。フィールド名は英数字で管理しつつ、管理画面のラベルは日本語で分かりやすくしておくと親切です。

テストでは、次のようなパターンを入れてみます。

• 表示先が一致する声: カルーセルに出る
• 表示先が違う声: カルーセルに出ない
• is_featured がOFFの声: 優先カルーセルには出ない
• 本文が長い声: カード高さやスマホ表示が崩れない
• 評価が未入力の声: 星や数値表示が空で残らない

この確認で引っかかりやすいのは、未入力の扱いです。評価が空なのに星だけ出る、詳細ページがないのに「詳しく見る」リンクだけ残る、といった状態はよくあります。表示条件で「値があるときだけ出す」と決めておくと、運用中の入力漏れに少し強くなります。

ここから複雑になりすぎる境目

逆に、ここから先は慎重にした方がいいです。お客様の声に会員情報、申込情報、購入履歴、評価フォームをつなぎ始めると、単なる表示部品ではなく、個人情報を含む運用になります。表示条件のミスで本来出すべきでない情報が出ないよう、権限や公開範囲を確認する必要があります。

また、カルーセルやスライダーを複数ページに大量配置すると、ページ表示の重さにも影響します。画像サイズ、表示件数、Lazy Load、スマホでのスライド数を確認し、読者が読みやすい速度に調整してください。JetElementsやJetEngineは強力ですが、パフォーマンス確認や運用設計を省略できるわけではありません。

既存サイトに追加する場合は、先にバックアップとテスト環境で確認します。お客様の声はLPの信頼セクションに関わるため、意図しない非表示や誤表示があると目立ちます。特に、掲載許可が切れた声、匿名希望の声、個人名を出してはいけない声は、表示条件だけでなく運用ルールとしても管理してください。

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

この構成が向いているのは、LPやサービスページに同じ種類のお客様の声を何度も載せる人です。サービス別、業種別、評価順のように表示を変えたいなら、JetEngineでデータ化してJetElementsで見せる価値があります。

反対に、お客様の声が2件だけで、今後も増えないサイトなら、静的なElementorカードで十分です。カルーセルを入れるより、1件ずつ読みやすく配置した方が伝わることもあります。動的化は「増える」「使い回す」「条件で出し分ける」理由があるときに向いています。

まとめ

JetElementsは見た目を増やすプラグインとして使えますが、JetEngineと組み合わせると、手入力のカルーセルから一歩進めます。ポイントは、お客様の声をデータとして管理し、表示条件に合うものだけをカルーセルに出すことです。

最初は、testimonial のデータの箱、表示先サービス、公開中の条件、1件分のカルーセルカードだけで十分です。そこから必要に応じて、サービス別表示や詳細事例ページへのリンクを足していくと、見た目の華やかさと運用しやすさのバランスを取りやすくなります。

JetElements公式ページを見てみる