JetSearchとJetEngineでサイト内検索を使いやすくする具体例

講座一覧ページをElementorで作るだけなら、カードを並べるところまではそれほど難しくありません。問題は、講座数が増えたあとです。読者が「初級だけ見たい」「WordPress講座を探したい」「講師名で探したい」と思ったとき、静的な一覧だけだと、ページの中を目で追ってもらうしかありません。

この記事では、JetEngineで講座データを持たせ、JetSearchで講座を探しやすくする小さな検索導線を作る考え方を解説します。作るのは大きな学習管理システムではなく、講座CPTを対象にした検索付き一覧ページです。最初はここまで分かれば十分です。

JetSearch公式ページを見てみる

この記事で分かること

• JetEngineで検索対象になる講座データをどう分けるか
• JetSearchの検索窓をどこに置くと迷いにくいか
• 検索結果をElementorの一覧カードとして見せる考え方
• 検索対象を広げすぎないための設定例
• 運用後に講座を追加・終了するときの確認ポイント

まず何を作るのか

今回の例は、スクールやセミナーサイトにある「講座を探す」ページです。トップページに少し講座を並べるだけなら、Elementorの静的カードでも足ります。しかし講座が10件、20件と増えると、講座名の修正、料金変更、受付終了の非表示、検索結果の並び替えが地味に面倒になります。

そこで、JetEngineで「講座」というデータの箱（CPT）を作ります。CPTは、通常の投稿とは別に管理できる情報の入れ物です。たとえばブログ記事と講座情報を混ぜたくない場合、講座だけを別の管理画面に分けられます。

設定例は次のようにします。

• post_type: course
• 表示名: 講座
• 詳細ページ: 各講座の紹介ページ
• 一覧ページ: /courses/
• 検索ページ: /course-search/

ここで少し迷いやすいのは、講座名や説明文を全部本文に入れてしまうことです。本文にまとめると見た目は早く作れますが、あとで「料金順にしたい」「初級だけ探したい」となったときに扱いづらくなります。検索や絞り込みに使いそうな情報は、最初から入力項目として分けておく方が安定します。

JetEngineで持たせる講座データ

JetSearchは検索窓を作る役割です。ただし、検索される中身がぐちゃっとしていると、検索体験もぼんやりします。今回の中心はJetEngineで作るデータ設計です。

料金は「9,800円」と文字で入れたくなりますが、数値として持たせる方が後で使いやすいです。単位の「円」はElementor側の表示で付けます。これは地味ですが、あとで比較表や並び替えを作るときに効いてきます。

また、講座の説明文を長くしすぎると、検索結果のカードが読みにくくなります。検索結果に出す短い説明用に short_description を別で作っておくと、詳細ページの本文と一覧カードの説明を分けられます。

JetSearchで検索対象を決める

JetSearchの役割は、読者が入力したキーワードに対して、該当する投稿やCPTを素早く見つけることです。公式情報では、JetSearchはElementor、Gutenberg、Bricksで使える検索プラグインとして案内されていて、AJAX検索、検索結果ページ、検索対象の指定、カスタムフィールド検索などが扱われています。

今回のような講座検索では、最初からサイト全体を対象にしない方が分かりやすいです。サイト全体検索にすると、ブログ記事、固定ページ、講座ページが一緒に出てきて、読者が迷います。

設定の考え方は次の通りです。

• 検索フォーム: 講座一覧ページの上部に配置
• Source: course を中心にする
• 検索対象: タイトル、本文、必要に応じて講師名や短い説明
• 結果表示: AJAXの即時表示と、検索結果ページへの導線を分けて考える
• 除外: 終了済み講座を出すかどうかは運用方針で決める

ここで考えるべきなのは、検索窓を万能にしすぎないことです。「講座を探す」ページなら講座だけに絞る。トップページのサイト内検索ならブログも含める。このように場所ごとに役割を分けると、検索結果の違和感が少なくなります。

Elementor側ではどう表示するのか

検索結果の見た目は、JetEngineの一覧テンプレートと相性が良いです。1件の講座カードを作り、講座名、対象者、料金、開催日、詳細リンクを配置します。Elementorで静的カードを6枚作るのではなく、1件分のカード設計を作り、データを差し替えて一覧にします。

カードの中身は、たとえば次のようにします。

• 上部: 講座名
• 補足: course_level をバッジ表示
• 本文: short_description を2行程度で表示
• 料金: price に「円」を付けて表示
• 開催日: start_date を読みやすい日付形式にする
• ボタン: 講座詳細ページへリンク

Dynamic Fieldで値を出すとき、空の項目があるとカードに余白だけ残ることがあります。講師名が未入力の講座もあり得るなら、表示条件を使って「値があるときだけ出す」と決めておくと見た目が崩れにくいです。ここは少し地味ですが、公開後の管理者入力ミスを受け止めるために大事です。

検索窓を置く場所で体験が変わる

検索機能は、設置場所でも使いやすさが変わります。ヘッダーに置くと全ページから探せますが、講座検索としては少し広すぎることがあります。講座一覧ページの上に置くと、「ここでは講座を探す」という文脈がはっきりします。

おすすめは、最初に「講座一覧ページ上部の検索窓」から始めることです。検索結果の直下に一覧があるので、読者は検索した結果をすぐ確認できます。ヘッダー検索は便利ですが、サイト全体の検索設計まで考える必要が出ます。最初から大きく作るより、講座ページの中で完結する方が試しやすいです。

検索結果ページを別に作る場合は、URLや表示テンプレートも整理します。たとえば /course-search/ に検索結果を表示し、結果カードは講座一覧と同じテンプレートを使う。こうしておくと、カードの修正が1か所で済みます。

検索対象を細かくしすぎない設定例

JetSearchを入れると、つい「検索できる項目を全部増やそう」と考えがちです。ただ、講座検索では対象を増やしすぎると、読者が期待していない結果まで出ます。たとえば「WordPress」と検索したときに、講座本文の中で一度だけWordPressに触れている中級講座まで上位に出ると、探しやすいとは言いにくいです。

最初の設定では、検索対象を次のように分けると扱いやすいです。

• 必ず対象にする: 講座タイトル、短い説明、講師名
• 必要なら対象にする: 対象者、カテゴリ名
• 最初は外してよい: 長い本文、内部メモ、管理用メモ

内部メモまで検索対象に入れると、管理者だけが分かる言葉で検索結果が引っかかることがあります。読者向けの検索では、読者が画面で見て理解できる情報を優先した方が自然です。ここは少し判断に迷うところですが、公開後に「なぜこの結果が出たのか」を説明できる範囲にしておくと安心です。

検索結果の件数も、最初は多くしすぎない方がよいです。AJAX検索の候補表示なら5件から8件程度、検索結果ページなら12件程度から試す。講座数が少ないうちは、結果が多すぎるより、該当するものが分かりやすく出る方が使いやすいです。

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

この構成にすると、講座を追加するときの流れがかなりはっきりします。WordPress管理画面で講座を1件追加し、必要な入力項目を埋める。公開状態を確認する。すると、一覧ページや検索結果に同じルールで反映されます。

静的なElementorページでは、カードの複製、リンク変更、日付変更、受付終了の文言変更をページ上で直接直します。数件なら問題ありませんが、講座が増えるとミスが出やすくなります。JetEngineでデータを分けておくと、管理する場所が「講座データ」に寄ります。

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

• 料金改定時に、カードごとに探して直さなくてよい
• 受付終了講座の表示を、状態フィールドで判断しやすい
• 講師名や難易度など、検索されやすい情報を入力項目として管理できる
• 一覧カードのデザイン変更を1件分のテンプレート修正で済ませやすい

ただし、検索できる項目を増やせば増やすほど良いわけではありません。講座名、講師名、短い説明くらいから始めて、読者が本当に使う検索語を見ながら調整する方が現実的です。検索候補や検索統計の扱いまで広げると、運用の確認項目も増えます。

公開前に確認したい管理画面の流れ

検索ページを作ったら、デザインだけでなく、管理画面から1件追加したときの流れを確認します。制作中はサンプルデータでうまく見えても、実際の入力では未入力、長すぎる講座名、日付の入れ忘れが起きます。

確認手順は次のようにすると現実的です。

• 講座を1件追加し、course_level、price、start_date、teacher_name を入力する
• short_description を空にした場合、カードが崩れないか見る
• accepting_status を「終了」にしたとき、CTAや受付中バッジが残らないか確認する
• 講師名で検索し、想定した講座だけが候補に出るか確認する
• スマホ幅で検索窓、候補、一覧カードが重ならないか見る

このチェックは地味ですが、後から効きます。特にスマホでは、検索候補のドロップダウンがカードや見出しに重なって読みにくくなることがあります。JetSearch側の表示数や検索結果ページへの遷移を調整し、読者が迷わない形にしておきたいところです。

また、既存サイトに追加する場合は、公開前にバックアップとテスト環境を用意してください。CPTや入力項目の構造を途中で大きく変えると、すでに登録した講座データの見え方に影響します。JetEngineの設定は管理画面で扱えますが、サイト全体のデータ構造を変える作業であることは忘れない方が安全です。

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

逆に、ここから先は慎重にした方がいいです。講座検索に、会員別表示、購入履歴、受講状況、予約枠、決済、メール通知まで一気に入れようとすると、単なる検索ページではなく業務システムに近づきます。

JetEngineやJetSearchは便利ですが、権限設計、個人情報の扱い、パフォーマンス確認、バックアップ、更新管理を省略してよい理由にはなりません。特に会員情報や申込情報とつなぐ場合は、誰が何を見られるのかを先に決める必要があります。

検索速度も確認したいポイントです。講座数が少ないうちは気にならなくても、データが増え、検索対象に長文本文や複数の入力項目を含めると、ページの反応が重く感じることがあります。最初は公開中の講座だけ、必要な項目だけ、表示件数も控えめにする。そこから実際の使われ方に合わせて広げる方が、後で直しやすいです。

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

この構成が向いているのは、Elementorで講座ページやサービスページを作っていて、今後も件数が増える見込みがある人です。とくに、講座名、料金、開催日、講師名のように同じ種類の情報を何度も入力するサイトでは、JetEngineでデータ化する価値があります。

一方で、講座が3件だけで今後増えないサイトなら、静的なElementorカードでも十分かもしれません。検索窓を入れるより、ページ上の見出しや導線を整理した方が早いこともあります。ここは無理に動的化しなくて大丈夫です。

まとめ

JetSearchとJetEngineを組み合わせると、Elementorで作った講座一覧に検索導線を足しやすくなります。大事なのは、検索窓そのものよりも、検索される講座データをどう分けておくかです。講座名、料金、開催日、講師名、受付状態を入力項目として分けるだけでも、静的な一覧ページから一歩進めます。

最初は、講座CPT、一覧カード、講座一覧ページ上部の検索窓という小さな構成で十分です。そこから必要に応じて検索結果ページ、表示条件、絞り込み検索へ広げると、作りすぎを避けながら運用しやすい検索ページに近づけます。

JetSearch公式ページを見てみる