JetEngine Options Pageでサイト共通情報を一括管理する方法

Elementorで固定ページを増やしていくと、会社情報、電話番号、営業時間、問い合わせCTAのような共通情報を何度も直す場面が出てきます。ヘッダー、フッター、トップページ、サービスページ、LPの下部CTAをそれぞれ開いて修正する運用は、ページ数が少ないうちは問題になりません。けれども制作後の更新が続くサイトでは、どこか一か所だけ古いまま残りやすくなります。

この記事ではJetEngineのOptions Pageを使い、全ページで使う公開情報を一つの管理画面に集める例を作ります。具体例は、会社基本情報と共通CTAです。固定ページの見た目はElementorで作り、文言やリンク先だけをJetEngine側の入力項目として持たせます。

公式ドキュメントでも、Options PageはWordPress管理画面内のカスタム管理ページとして、サイト全体で再利用する値を保存し、ヘッダー、フッター、ページなどに表示できる仕組みとして説明されています。大切なのは、Options Pageを秘密情報の保管場所にしないことです。今回扱うのはサイトに表示してよい公開情報だけです。

JetEngine公式ページを見てみる

この記事で分かること

• Options Pageを使うべき共通情報の考え方
• 会社情報とCTAを管理する入力項目の作り方
• Elementor側で共通情報を動的に表示する流れ
• 担当者が更新しやすい管理画面の分け方
• 秘密情報や複雑な承認フローを入れない判断基準

まず何を作るのか

今回作るのは、会社情報と共通CTAを管理する小さな設定ページです。データの箱（CPT）を作るのではなく、サイト全体の設定値を置くOptions Pageを作ります。ページタイトルは「サイト共通情報」、スラッグは site_global_info、メニュー名は「共通情報」とします。

入力項目としては、会社名、住所、電話番号、営業時間、問い合わせCTAの見出し、CTA本文、CTAボタン文言、CTAリンクURLを用意します。たとえばフッターには会社名と住所を出し、サービスページ下部にはCTA見出しとボタンを出します。値を変えると、同じ値を参照している場所がまとめて変わる構成です。

静的なElementorページでは、各ページのテキストウィジェットやボタンを直接編集します。この方法は自由ですが、更新漏れが起きやすいです。Options Pageを使うと、Elementor担当者は見た目を作り、運用担当者は共通情報だけを入力する、という役割分担にできます。

Options Pageは何のための場所か

JetEngineのOptions Pageは、投稿や固定ページにひもづかない入力項目をまとめる場所です。講師ページなら講師CPT、講座ページなら講座CPTのように、個別ページごとの情報はデータの箱に持たせます。一方で、会社住所や共通CTAのようにサイト全体で一つだけ持てばよい情報はOptions Pageに向いています。

Options Pageの作成場所は、WordPress管理画面のJetEngine内にあるOptions Pagesです。新規追加時にはページタイトル、スラッグ、メニュー名、親メニュー、メニューアイコン、アクセス権限、保存形式、入力項目を設定します。初心者が最初に見るべきなのは、スラッグ、アクセス権限、入力項目です。

アクセス権限は重要です。会社情報のような公開情報でも、誰でも管理画面から変更できる状態にしてはいけません。基本は管理者、またはサイト運用担当者に限定します。複数人で運用する場合は、誰が更新してよいのか、更新前に誰が確認するのかも決めておきます。

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

Options Page名は「サイト共通情報」とし、スラッグは site_global_info にします。入力項目は長文を一つだけ作るのではなく、表示場所ごとに使いやすい単位へ分けます。住所を一つの長文にしてしまうと、フッターでは使えても、地図リンクや問い合わせ文の差し込みに使いにくくなります。

ここで考えるべきなのは、入力しやすさです。運用担当者が「どこを直せばよいか」をすぐ分かる画面にします。たとえば、会社情報、問い合わせCTA、SNSリンクを同じOptions Pageに入れても構いませんが、項目が増えてきたらタブや別ページに分ける方が見やすくなります。

もう一つ迷いやすいのが、表示文をどこまで分けるかです。CTA本文を一つの長文だけにすると、サービスページでは自然でも、フッターやスマホ下部の短い導線では長すぎることがあります。最初から「短い一言」と「少し説明する本文」を分けておくと、Elementor側で使い回しやすくなります。たとえば cta_short_label に「相談受付中」、cta_body に説明文を入れる設計です。項目が少し増えるので面倒に見えますが、あとで表示場所ごとに文章を削るよりは落ち着いて運用できます。

入力欄の並び順も小さなポイントです。会社情報、問い合わせ情報、CTA、SNSリンクのように、実際に確認する順番で並べます。管理画面を作る時点で「更新担当者が月に一度触る画面」と考えると、英語のフィールド名より画面ラベルの分かりやすさが大事になります。ここは少し地味ですが、動的サイト化したあとに運用が続くかどうかに影響します。

保存形式はサイトの運用方針に合わせます。公式ドキュメントでは、Separateを使うと各フィールド値を別々のoptionとして保存でき、必要に応じてページスラッグをprefixとして付けられる設定があると説明されています。最初は公式画面の説明を確認し、既存サイトで変更する場合はバックアップを取ってから進めます。

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

Elementor側では、ヘッダー、フッター、CTAブロックなどのテンプレートを作り、固定テキストの代わりに動的な値を差し込みます。公式ドキュメントでは、Dynamic FieldのSourceでOptionsを選び、表示したいOptionを指定する流れが紹介されています。

たとえばフッターでは会社名と住所をDynamic Fieldで出します。サービスページ下部のCTAでは、CTA見出し、CTA本文、CTAボタン文言を出し、ボタンのリンク先にCTAリンクURLを指定します。これにより、文言を変えたいときに各ページのCTAブロックを開かなくても済みます。

ただし、Elementor側の見た目までOptions Pageに入れすぎない方が扱いやすいです。文字色、余白、カードの角丸、ボタンの見た目はElementorやテーマ側で管理します。Options Pageには、運用担当者が変える内容だけを置きます。

更新担当者の作業がどう変わるか

Options Pageを使う前は、住所変更やCTA文の変更が発生するたびに、固定ページ、フッター、サービスページ、LPを順番に開いて修正します。ページ数が増えるほど、編集漏れと表記ゆれが増えます。とくに電話番号や営業時間のような情報は、古いまま残ると問い合わせ機会の損失につながります。

Options Pageを使うと、担当者は「共通情報」の画面を開き、必要な項目を変更して保存します。そのあと主要ページをプレビューし、表示崩れがないかを確認します。運用面では、編集場所が一か所にまとまることが大きなメリットです。

応用例：季節キャンペーンのCTAを差し替える

共通CTAは、季節キャンペーンや無料相談の受付状況を差し替える用途にも使えます。たとえば cta_heading を「5月の制作相談を受付中」、cta_body を「動的サイト化や会員ページ化の相談をまとめて受け付けています」、cta_url を /contact/ にします。

Elementor側ではCTAブロックの見た目を一度作っておきます。運用担当者はOptions Pageの文言だけを変えます。これなら、キャンペーン終了後に古い文言がLPだけ残る、という事故を減らせます。

Dynamic Visibilityのような表示条件を組み合わせると、CTAリンクURLが空のときはボタンを非表示にする、受付停止中のときは別文言にする、といった設計もできます。ただし、表示条件は見た目の制御です。公開してはいけない情報を隠すためのセキュリティとして考えないでください。

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

Options Pageに向いているのは、サイト全体で使う公開情報です。会社情報、共通CTA、営業時間、SNSリンク、資料請求URL、キャンペーン文言のように、ページをまたいで同じ値を使うものです。逆に、APIキー、パスワード、顧客情報、承認フロー、担当者ごとの内部メモ、問い合わせ履歴のような情報は慎重に扱います。

Options Pageは便利ですが、業務システムや秘密情報管理の代わりではありません。複数人の承認、変更履歴、個人情報の閲覧制限、監査ログが必要なら、別の仕組みやカスタム開発を検討します。JetEngineは動的サイトの土台を作る道具であり、セキュリティ設計や運用ルールを自動で全部済ませるものではありません。

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

向いているのは、Elementorで複数ページを作っていて、共通CTAや会社情報の更新漏れを減らしたい人です。制作会社がクライアントに納品するサイトでも、更新場所を一か所にまとめておくと説明しやすくなります。

向いていないのは、商品ごとの価格表、店舗ごとの詳細情報、講師ごとのプロフィールのように、複数件のデータを一覧化したいケースです。その場合はOptions Pageではなく、データの箱（CPT）や繰り返し項目、必要に応じてCCTを検討します。

まとめ

JetEngineのOptions Pageは、サイト全体で使う公開情報を一元管理したいときに役立ちます。今回の例では、会社名、住所、電話番号、営業時間、CTA文、CTAリンクURLを分けて持たせ、Elementor側のヘッダー、フッター、CTAブロックへ動的に表示する流れを作りました。

静的なElementorページから一歩進めるなら、まずは「どの情報を一か所で直せると楽か」を洗い出してください。Options Pageには共通の公開情報だけを置き、ページごとの情報はCPTやカスタムフィールドへ分けると、複雑になりすぎずに運用できます。最初の一画面で完璧にしようとせず、住所、電話番号、CTAのような更新頻度が高いものから始めるのが現実的です。

JetEngine公式ページを見てみる