『会社の電話番号を複数のページで使いまわしたいけど、1箇所で設定できないかな？』などと思うことはありませんか？
JetEngineには『Options Pages』というサイト全体で共有できるデータを設定できるページを作れる機能が備わっているのでその悩みも簡単に解決できます！
JetEngineのDynamic widget（動的ウィジェット）を使用してOptions Pagesの情報をサイトに呼び出すことができます。
ですので例えばクライアントがElementorを使わずに自分でサイトの一部のテキストを差し替える、なんていうこともJetEngineのOptions Pagesを使えば可能になります。
- Options Pagesはサイト全体で共有できるデータを設定できるページが何個でも作れるあったらい嬉しい機能。
- Options Pagesの作り方は他のJetEngineのページの作成手順とほぼ同じ。
『Add Newでページを新規追加』→『General Settingsの設定』→『Fieldsでフィールドを作成』でOK。 - Options Pagesをサイトに動的につなげるにはJetEngineのDynamic Fieldウィジェットを使用、操作も簡単。
- 作成したOptions Pagesはダッシュボードから簡単にアクセスでき、権限を付与すればクライアントもフィールドの編集を行うことができるので、クライアントもElementorを触ることなく好きなタイミングでサイトの情報を変更することができる。
JetEngineのことをもっと学びたい人は、どうぞJetEngineの使い方完全ガイドを見てください。
様々なJetEngineに関する情報がまとめられています。
また、Options Pagesを説明した動画もありますのでご覧になる場合はこちらをクリックしてください。
Options Pagesとは
Options Pagesとは、サイト全体で共有できるデータを設定できるページを作れる機能です。
しかし、このOptions PagesはJetEngineのDynamicウィジェットと併用してこそ本領発揮します。
ですのでこの記事ではOptions Pagesを作成後、Dynamic Fieldウィジェットを使用してサイトに動的に呼び出す実践例を交えて以下のように説明をしていきます。
サイトのホームページにクライアントがElementorを触らずにいつでも自由に差し替え可能なテキスト（最新情報）を入れられるような設定をしていきます。
- Options Pagesでクライアントが操作するページとフィールドを作成する。
- Elementorの編集画面でDynamic Fieldウィジェットを使用し、 サイトとOptions Pagesのフィールドが動的につながるように設定する。
Options Pagesを追加する方法
Options Pagesを追加するにはまず、JetEngineのサブメニュー内の『Options Pages』をクリックします。
①Add Newをクリックする
Options Pagesを開くと上記の表示画面になりますので、ページ上部にある『Add New』をクリックします。
②General Settingsを設定
上記はAdd Newをクリックした後の表示画面です。
まずGeneral Settingsを設定します。
この設定で主に重要なのは以下の3つの設定です。
Page title
『Page title』は、Options pages一覧画面や、作成したOptions pages内に表示されるラベルです。
ここは日本語でも英語でもなんでもOKです。
※この記事ではクライアントが触れるページを作成していますので、Page titleを『クライアントページ』にしました。
Page Slug
『Page Slug』（ページスラッグ）を記入します。
ここはURLの一部になるものですので必ず半角英数字と`-` or `_` の記号のみで記入します。
※Page titleに関連した名前のスラッグにしましょう。
Menu name
『Menu name』はダッシュボードに記載されるこのページのラベルです。
Menu nameは変更をしてもしなくてもどちらでもOKです。
※デフォルトではPage titleと同じ名称が自動で表示されます。
※サンプルではクライアントがより分別しやすくなるようにMenu nameを『◯◯様専用ページ』にしました。
その他の設定
General Settingsには上記の他に以下の設定がありますが、これらの設定をスルーしても特に問題ありません。
- Parent page：リストより親ページの指定ができます。
※特に指定しなければ親ページが作られないだけです。 - Menu Icon：ダッシュボードのMenu nameの横に表示されるアイコンをリストより変更することができます。
※デフォルトは歯車のマークが設定されています。 - Access capability：作成中のページのアクセス制限をリストより選択できます。
※デフォルトは『Manage Options』に設定されています。 - Menu position：メニューを表示させる場所をリストより選択し変更することができます。
※デフォルトは『ダッシュボード』に設定されています。
③Fieldsの作成
この『Fields』というのはフィールドを作成するツールでJetEngineの他の機能で多様される『Meta fields』と操作方法はまったく同じです。
Meta fieldsの機能のの説明や設定の仕方については『JetEngine Meta fieldsの機能説明・カスタムフィールドのレイアウトのカスタマイズ』の記事を参考にしてください。
フィールドを作成したら、『Add Page』をクリックします。
このサンプルでは以下のようなフィールドを作成しました。
- Label：最新情報
- Name/ID：news（半角英数字と`-` or `_`で記入）
- Objecy type：Field
- Field type：text
- Description：TOFUミュージアムの最新情報を50文字以内でホームページに記載できます。
※一体何の編集するためのフィールドかをクライアントに示すための説明文 - Character limit（文字数制限）：50
※文字数を無制限にしてしまうと文字数が多すぎたときにサイトの見た目が崩れるおそれがあるため設定
こちらは実際にOptions Pagesの追加した後の『〇〇様専用ページ』（クライアントページ）の表示画面です。
上記のページにクライアント自身がアクセスし、フィールドのテキスト内容を季節やイベントごとに情報を常にアップデートできるという訳です。
※このサンプルではフィールドが1つしかありませんが、フィールドの数は必要なだけ『Fields』のセクションで追加が可能です。
Options Pagesのデータとサイトを動的につなげる方法
以下でOptions Pagesの情報をJetEngineのDynamic Fieldウィジェッでサイトに呼び出し連動させる方法を説明します。
なお、これから説明する方法はOptions Pages以外のフィールドのテキストデータをサイトに呼び出す場合でも基本的にやり方は同じですのでとても参考になると思います！
①Dynamic Fieldウィジェットを挿入
『Dynamic Fieldウィジェット』を Elementorのエディターに挿入します。
すると上記のような表示画面になります。
※現段階では投稿のタイトルが表示されていますが、こちらは『Source』と『Object Field』でデフォルトですでに選択されているものが表示されているからです。
②SourceでOptionsを選択
『Source』（ソース）で以下のリストの中からOptionsを選択します。
- Post/Term/User/Object Data（デフォルト）
- Meta Data
- Options
- Relations Hierarchy
※この『Options』はJetEngineのOptions Pagesを指します。
③Optionで呼び出したい追加フィールドを選択
『Option』でサイトに呼び出したいフィールドを選択します。
※なおこの項目は、SourceでOptionsを選択したの『Option』という表記になっていますが、Sourceで何を選ぶかにより名称が変わります。
『Select』をクリックすると上記のようにOptions Pagesにあるページとフィールドの一覧が表示されます。
※このサンプルでは『クライアントページ』の『最新情報』を選択します。
するとこのように『最新情報』のフィールドに入れたテキストがサイトの画面上に表示されました。
なお、Dynamic Fieldウィジェットで呼び出した情報はElementorのエディターでスタイルなどを自由に変更することができます。
＞＞JetEngineでDynamic FieldウィジェットのContentを選択したときに出てくる説明文を短く表示する方法を説明した動画もありますのでよかったら参考にしてください。
Options Pagesでフィールドを編集し動的に繋げたサイトの表示を変更する手順
実際にOptions Pagesで作成したフィールドを編集するには以下の操作を行います。
- ダッシュボードのクライアントのために用意したOptions Pages名をクリック
- フィールドの情報を変更
- 『SAVE』をクリック
以上です！
するとたったこれだけで、サイトに動的に繋げた部分の表示があっさり変更しました。
これなら誰でも簡単に操作できますし、好きなタイミングでサイトの情報を変更できるので、仮にクライアントがOptions Pagesを操作できれば、簡単なサイトの変更依頼のやりとりをする必要も省けますね！
まとめ
Options Pagesはサイト全体でデータを共有でき、何ページでも作成が可能なのでサイト全体でよく使う情報をカテゴライズして格納しておくことができるとてもシンプルな機能です。
今回紹介をした実用例のようにクライアントに操作させるにしても自分で操作するにしても、Options Pagesで作成したページはダッシュボードからアクセスしてフィールドを変更し保存するだけなのでむずかしいことは一つもありません。
Options Pagesって、痒いところに手が届いているとっても便利ですよね！
さらにDynamic Fieldウィジェットの使い方も、基本的にはこの記事で紹介した通りの操作方法なのでOptions Pages以外からデータを持ってくるときなどにも応用できますのでどうぞ参考にしてください。
今回はJetEngineのOptions Pagesの作り方とDynamic Fieldウィジェットで動的にサイトとフィールドをつなげる方法を紹介しました。
Options Pages同様に、Dynamic Fieldウィジェットも大変幅広用途があり、今回紹介した以外の使い方も以下の記事で紹介していますのでよかったらご覧くださいね！
- JetEngineでどんな動的なテキストデータもQRコードにできる【作り方6ステップ】
JetEngineのことをもっと学びたい人は、どうぞJetEngineの使い方完全ガイドを見てください。
様々なJetEngineに関する情報がまとめられています。