この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
料金プラン、サービス内容、持ち物リスト、講師の実績、店舗設備のように、同じ形の項目を何度も並べたい場面があります。Elementorだけでもカードを複製すれば作れますが、あとから一つ増やす、順番を変える、表示文を直すたびにデザイン側を触ることになります。
この記事ではJetEngineのRepeater、つまり同じ入力項目のセットを行として増やせる仕組みを使って、サービス料金プランを管理する例を作ります。記事タイトルには質問回答風の項目というニュアンスもありますが、この記事では料金プランの繰り返し行に絞ります。
Repeaterは、1つの投稿や固定情報の中に、同じ形の小さな行を複数持たせたいときに向いています。料金プランなら、プラン名、価格、特徴、目立たせる設定、ボタンURLを1行として増やし、Elementor側ではDynamic Repeaterでカード表示します。
公式情報では、Repeaterメタフィールドは複数のサブフィールドを持つ入力項目として作成し、Dynamic Repeaterウィジェットで表示できると説明されています。もう少し高度な表示が必要な場合は、Query BuilderのRepeater Queryで繰り返し行を一覧テンプレートとして扱う方法もあります。最初はDynamic Repeaterから始めるのが分かりやすいです。
この記事で分かること
- Repeaterを使うべき繰り返し項目の判断基準
- 料金プラン用の入力項目とサンプル値
- Elementor側で料金カードとして表示する流れ
- おすすめプランだけ目立たせる設計
- RepeaterではなくCPTに分けるべき境界
まず何を作るのか
今回作るのは、サービスページの料金プランです。データの箱（CPT）として service を作り、各サービス投稿の中に price_rows という繰り返し項目を持たせます。1つのサービス投稿に、ベーシック、スタンダード、プレミアムのような料金行を追加できる構成です。
静的なElementorページなら、料金カードを3つ並べてテキストを直接編集します。プランが4つに増えたらカードを複製し、価格が変われば該当カードを探して直します。見た目は作りやすいですが、サービスごとに料金数が違う場合や、担当者が料金だけ更新したい場合には手間が残ります。
Repeaterを使うと、サービス投稿の編集画面で料金行を増減し、Elementor側では同じ表示形式を繰り返せます。デザイナーはカードの見た目を一度整え、運用担当者は行を追加・削除・並べ替えるだけに近づきます。
Repeaterは何に向いているか
Repeaterは、親となる投稿や設定にぶら下がる小さな項目群に向いています。料金プラン、持ち物、開催スケジュールの補足、サービスの特徴、講師の経歴などです。共通しているのは、各行が独立した大きなページを持たず、親ページの中で完結することです。
反対に、1行ごとに検索したい、絞り込みたい、詳細ページを持たせたい、カテゴリを付けたい、別ページでも同じデータを使い回したい場合は、Repeaterだけで抱え込まない方がよいです。その場合はデータの箱（CPT）やCCT、関係づけを検討します。
料金プランの例では、各プランを単体ページとして公開する必要はありません。サービスページの中で比較できれば十分です。そのため、まずはRepeaterで小さく作るのが分かりやすい判断になります。
JetEngineでどのデータを持たせるのか
まずJetEngineで service というデータの箱（CPT）を作ります。サービス名、説明文、メイン画像のような通常項目に加えて、Meta BoxまたはCPT内のカスタムフィールドとしてRepeaterを追加します。Repeaterのフィールド名は price_rows にします。
| 画面ラベル | フィールド名 | 型 | サンプル値 | 理由 |
|---|---|---|---|---|
| プラン名 | plan_name |
Text | スタンダード | カード見出しに使う |
| 月額料金 | monthly_price |
Number | 19800 | 価格表示や並び替えに使う |
| 説明文 | plan_note |
Textarea | 小規模サイト向け | 短い補足を出す |
| 特徴 | feature_list |
Textarea | 3ページ制作、初期設定 | カード内の箇条書き |
| おすすめ | is_recommended |
Switcher | true | 目立たせるカードを決める |
| ボタン文言 | button_label |
Text | 相談する | カード下部CTA |
| リンクURL | button_url |
URL | /contact/ | 問い合わせ導線 |
価格はTextではなくNumberにしておくと、あとで数値として扱いやすくなります。特徴は本当は複数行に分けたいところですが、最初は短いTextareaでも十分です。特徴一つひとつを検索対象にしたい、比較表として横断的に使いたい場合は、別のデータ設計を検討します。
ここで少し迷うのは、価格の単位をどこに入れるかです。monthly_price には数値だけを入れ、「円 / 月」のような単位はElementor側の表示で足す方が扱いやすいです。入力欄に「19,800円」と文字で入れてしまうと、並び替えや比較に使いにくくなります。税込・税別の表記も、tax_note のような短い補足欄を分けておくと、あとで一括して見直しやすくなります。
サンプル値としては、ベーシック9800円、スタンダード19800円、プレミアム29800円の3行を入れます。おすすめはスタンダードだけtrueにします。運用担当者があとからプレミアムを推したい場合は、スイッチを切り替えるだけで済むようにします。
Elementor側ではどう表示するのか
Elementor側ではサービス詳細テンプレートを作り、料金エリアにDynamic Repeaterを置きます。Sourceで price_rows を選び、Item Formatにプラン名、価格、説明文、特徴、ボタンを出す形式を作ります。公式ドキュメントでは、Repeater内の値をフィールド名を使ったマクロで差し込む考え方が説明されています。
たとえば表示形式として、プラン名を見出し、月額料金を大きく、説明文を短く、特徴をリスト、最後にボタンという順番にします。見た目の余白や文字サイズ、カードの背景色はElementor側で調整します。記事ごとにCSSを足す必要はありません。まずはJetEngineとElementorの標準設定で整えます。
Dynamic Repeaterは、対象となる投稿や一覧テンプレートの中で使うのが基本です。料金プランはサービス投稿にぶら下がるデータなので、サービス詳細テンプレート内に置くと考えると理解しやすいです。
おすすめプランだけ目立たせる
料金表では、1つだけ「おすすめ」バッジを付けたいことがあります。Repeaterの中に is_recommended というSwitcherを作っておけば、各行ごとにおすすめかどうかを管理できます。表示側では、該当する行だけバッジを出す設計にします。
ここで大切なのは、表示条件は見た目の制御だということです。おすすめバッジを出す、ボタンを表示する、補足文を隠すといった用途には向いています。一方で、会員だけに見せる価格や非公開情報を守る目的で、表示条件だけに頼るのは危険です。
料金が公開情報なら、Repeaterで行ごとにバッジを出し分けるだけで十分です。社内限定価格、契約者限定価格、個別見積もりのような情報を扱うなら、権限やアクセス制限を別途設計します。
運用すると何が楽になるのか
Repeaterを使うと、料金プランの追加や順番変更が管理画面寄りになります。新しいライトプランを足すなら、サービス投稿の料金プラン欄で1行追加します。終了したプランは行を削除するか、表示しない項目を追加して管理します。カードのデザインを毎回複製する必要はありません。
Elementor担当者にとっても、表示の型を一つ作ればよいのが利点です。プラン数が2つでも4つでも、同じ形式で繰り返せます。静的ページのように、カードの高さがずれる、ボタンの色が一つだけ違う、余白が合わないといった細かな崩れを減らしやすくなります。
運用担当者には、入力ルールを短く渡しておくと安全です。プラン名は10文字程度、説明文は一文、特徴は3行まで、リンクURLは問い合わせページに統一、価格は税込か税別かを表記ルールとして決めます。データの入力が揃うほど、Elementor側の表示も安定します。
Repeater Queryを使う場面
最初はDynamic Repeaterで十分です。ただし、繰り返し行を並び替えたい、条件で絞りたい、Listing Gridのように扱いたい場合は、Query BuilderのRepeater Queryを検討します。公式情報では、Repeater QueryはRepeater項目の一覧を作り、ListingテンプレートとしてSingleページ上に表示する流れが説明されています。
今回の料金プランでは、たとえば monthly_price が高い順に並べる、is_recommended がtrueのものだけ別枠に出す、といった応用が考えられます。ただし、最初からQuery Builderまで入れると設定の理解が一段増えます。まずは3つの料金カードを正しく出し、運用できることを確認してから広げる方が安全です。
どこから複雑になりすぎるのか
Repeaterは便利ですが、何でも詰め込む場所ではありません。料金プランの行数が数個で、親サービスページの中で完結するなら合っています。ところが、各プランに個別ページを持たせたい、複数サービスを横断して比較したい、検索や絞り込みの対象にしたい、キャンペーン履歴を残したい場合は、Repeaterでは窮屈になります。
その場合は、プラン自体をデータの箱（CPT）にする、サービスとプランを関係づける、比較表はTables BuilderやListing Gridで別に作る、といった設計を考えます。最初から複雑にする必要はありませんが、あとで検索したくなる情報をRepeaterに閉じ込めると、移行が面倒になります。
個人情報や契約者専用の価格も慎重に扱います。表示条件で隠れているだけでは、十分な保護とは限りません。会員別価格、契約プラン、非公開資料のリンクを扱うなら、権限、URL保護、キャッシュ、バックアップ、テスト環境を確認します。
この構成が向いている人、向いていない人
向いているのは、Elementorでサービスページを作っていて、料金カードや特徴リストを運用担当者が更新しやすくしたい人です。プラン数がページごとに少し違う、カードを毎回複製したくない、デザインは一つの型にそろえたい場合に向いています。
向いていないのは、料金プランを独立した商品データとして管理したいケースです。検索、カテゴリ、比較、在庫、契約状態、ユーザー別表示まで含めるなら、RepeaterではなくCPTや別システムとの組み合わせを考えます。JetEngineは動的な表示の土台になりますが、価格設計や契約管理の安全性まで自動で決めてくれるわけではありません。
料金表は公開情報か、会員限定情報かを先に分けてください。公開料金ならRepeaterで始めやすいですが、契約者別価格や個人情報に関わる内容は権限設計が必要です。既存サイトでフィールド構造を変える前にはバックアップを取り、テスト環境で確認します。
まとめ
JetEngineのRepeaterは、同じ形の小さな項目を親ページの中で増やしたいときに役立ちます。今回の料金プラン例では、service 投稿の中に price_rows を作り、プラン名、月額料金、特徴、おすすめ、ボタンURLを行として持たせました。Elementor側ではDynamic Repeaterを使い、料金カードとして表示します。
静的なElementorカードを増やすだけでも見た目は作れます。けれども、運用で価格や順番が変わるなら、データを分けておく方が楽です。まずは短い料金表から始め、検索や比較が必要になった段階でCPTやQuery Builderへ広げると、複雑になりすぎずに動的サイト化できます。
