Meta Boxとは投稿タイプやユーザーやタクソノミーなどにカスタムフィールドを追加する機能です。
だから、デフォルトである投稿タイプの投稿や固定ページにも、タグやカテゴリーの編集画面にも、ユーザーのプロフィールページにだってカスタムフィールドが作れてしまうんです。
もしかしたらACF Extended Pro（有料版）をお持ちも方はすでにお気づきかもしれませんが、Meta BoxはACF Proとほぼ同じ機能になります。
- Meta BoxはWordPressの至るところにカスタムフィールドが作れる。（ACF Proとほぼ同じ）
- カスタムフィールドをどのページに配置するかは『Meta Box for』でページのタイプをPost（投稿タイプ）/Taxonomy（タクソノミー）/User（ユーザープロフィール）のいずれかを選択し、その下の項目で細かいページ指定を行う。
- カスタムフィールドの作成・レイアウトはMeta fieldsで行う。
- User（ユーザープロフィール）の追加フィールドはVisible atの設定次第で編集権限が大きく変わる。
- ユーザープロフィールの追加フィールドだけはField widthの変更ができない。
JetEngineのことをもっと学びたい人は、どうぞJetEngineの使い方完全ガイドを見てください。
様々なJetEngineに関する情報がまとめられています。
また、Meta Boxを説明した動画もありますのでよかったらご覧くださいね！
Meta Boxを追加する方法-4つのステップ
この記事のサンプルとして、固定ページにカスタムフィールドを追加してみたいと思います。
①Add Newをクリック
ますはダッシュボードのメニューから『Meta Box』をクリックし、Meta Boxes List(Meta Box一覧ページ）の上部ににある『Add New』をクリックします。
すると上記のような表示画面になります。
②General Settingsでカスタムフィールドを追加するページを指定・設定する
Meta Boxを追加するにはまずカスタムフィールドを追加するページを指定する必要があります。
Meta Box Title
『Meta Box Title』ではその追加カスタムフィールドの名前を設定します。
このサンプルでは『固定ページの追加フィールド』とします。
※ご自身で何の追加フィールドなのかが判別できる名前にしてください。
Meta Box for
『Meta Box for』でカスタムフィールドを作りたいページのカテゴリーをリストから選択します。
以下がMeta Box forのリストです。
- Post（デフォルト）：投稿、固定ページ、メディアなど のページ※以下のEnable For Post Typesで説明します。
- Taxonomy：タグ、カテゴリー、カスタムタクソノミーのページ
- User：サイトのユーザープロフィールページ
このサンプルでは固定ページに追加カスタムフィールドを作成したいので『Post』を選択します。
Enable For Post Types
『Enable For Post Types』では『Meta Box for』で選択した項目に該当するページをリストから選択します。
『Enable For Post Types』のプレイスホルダーをクリックすると以下のような項目のリストが表示されます。
- 投稿
- 固定ページ
- メディア
- リビジョン
- ナビゲーションメニューの項目
- カスタムCSS
- チェンジセット
- oEmbed Response
- ユーザーリクエスト
- 再利用ブロック
- テンプレート
- ランディングページ
- マイテンプレート
- Custom Code
- Listing Items
- Custon Fonts
- Custom Icons
- 自作のカスタム投稿タイプ
リストの中から『固定ページ』を選択します。
Meta Box forでどれを選択するかにより、Enable For Post Typesのリストは変化します。
Meta Box forでPostまたはTaxonomyを選択したときはこの項目は複数のページを選択することができます。
※なお、ここで言う『Post』は投稿タイプだけではなく、メディアやランディングページなどとにかく上記のリストに表示されているものすべてがPostに該当します。
Specific Posts
『Specific Posts』ではEnable For Post Typesで指定したページの中のさらに特定のページにカスタムフィールドを作成したい場合、ここでページを指定できます。
ページを指定するときはプレイスホルダーに3文字以上入力をするとその入力したワードに従いリストが開きますのでそこから選択します。
※このサンプルでは固定ページ全体に同じカスタムフィールドを追加しますので、Specific Postsは空欄のままにします。
Excluded Posts
『Excluded Posts』はEnable For Post Typesで指定したページの中のさらに特定のページ（投稿）ではカスタムフィールドの作成を除きたい場合、ここでページを指定できます。
ページの選択の仕方は前セクションのSpecific Postsの説明をご覧ください。
※このサンプルでは固定ページ全体に同じカスタムフィールドを追加しますので、Excluded Postsは空欄のままにします。
Specific PostsとExcluded Postsの使い分けは以下のようにするのがいいでしょう。
- Specific Posts：カスタムフィールドを投稿タイプのほんの一部のページ（投稿）のみでしか表示させたくない場合に使用
- Excluded Posts：カスタムフィールドをカスタム投稿タイプの大部分で使用するけど、ほんの一部のページには表示させたくない場合に使用
‘Edit Meta Box’ link
『’Edit meta box’ link』はカスタムフィールドを追加するページ上に『Meta Boxを編集するページにジャンプするためのリンク』を追加するかどうかの設定です。
設定をオンにすると以下のように『Edit meta field』（Meta Boxの編集ページにジャンプするリンク）が表示されます。
実際には『Edit meta box』というワードリンクではなく、ギアのアイコンになります。
上記はこのサンプルでのMeta BoxのGeneral Settingsの表示画面です。
- Meta Box Title：固定ページの追加フィールド
- Meta Box for：Post
- Enable For Post Types：固定ページ
このGeneral Settingsで特に重要なのはこの3つの設定です。
③Add Meta Boxをクリック
『Add Meta Box』をクリックします。
これで指定のページ（このサンプルでは固定ページ）へカスタムフィールドを追加する準備が完了しました！
④Meta fieldsでカスタムフィールドを作成する
『Meta fields』でGeneral Settingsで指定したページにカスタムフィールドを追加します。
Meta fieldsでカスタムフィールドを作成しレイアウトする方法、またどの様な機能を持つフィールドがあるのかなどを『JetEngine Meta fieldsの機能説明・カスタムフィールドのレイアウトのカスタマイズ』の記事でくわしく説明していますのでそちらを参考にしてくださいね！
例えば固定ページに画像をたくさん表示することができる『ギャラリー』の機能を追加してみたいと思います。
Meta fieldsを以下の様に設定し、『Update Meta Box』をクリックします。
- Label：フォトギャラリー
- Name/ID：photo_garelly
- Object type：Field
- Field type：Gallery
すると上記の様に固定ページに『ギャラリー』のフィールドが追加されました。
このようにカスタム投稿タイプ以外の様々なページにカスタムフィールドを追加できる機能が『Meta Box』になります。
タクソノミーの編集画面にフィールドを追加する方法
Meta Boxは様々なページにカスタムフィールドを追加することが可能で、上記セクションでは主に投稿タイプに追加フィールドを作成する方法の紹介でした。
Meta Box forでTaconomyを選択すると、タグやカテゴリー、JetEngineで作成したカスタムタクソノミーも含め、以下のリストからタクソノミーに関わる編集画面にカスタムフィールドを追加することも可能です。
- カテゴリー
- タグ
- ナビゲーションメニュー
- リンクカテゴリー
- フォーマット
- テーマ
- タイプ
- Font Types
- 自作のカスタムタクソノミー
タクソノミーの編集画面にカスタムフィールドを作成する手順は以下のとおりです。
- Meta Box forで『Taxonomy』を選択。
- Enable For Taxomnomiesでカスタムフィールドを追加したいタクソノミー（タグ、カテゴリー、またはカスタムタクソノミーなど）を選択。
- Meta fieldsで追加フィールドを作成。
※それ以外の設定は上記セクションのMetaboxを追加する方法で説明をしたとおりになります。
例えば、カテゴリーの編集画面にカスタムフィールドを作成するとしたらGeneral Settingsの設定は上記画像のようになります。
- Label：カテゴリーの追加フィールド *例
- Meta Box for：Taxonomy
- Enable For Taxonomies：カテゴリー
また、この記事のサンプルとしてカテゴリーの編集画面に『アイコン』というフィールドを追加してみます。
Meta fieldを以下のように設定しました。
- Lebel ：アイコン
- Name/ID：Icon
- Object type：Field
- Field type：Iconpicker
するとこのように、『カテゴリー』の編集画面にアイコンを追加するフィールド(Iconpicker)が追加されました。
ユーザープロフィールのページにカスタムフィールドを追加する方法
Meta Boxでは上記で紹介した投稿タイプ、タクソノミーの編集画面に加え、サイトのユーザー情報を管理するページ『ユーザープロフィール』にもカスタムフィールドを追加することができます。
Meta Boxでユーザープロフィールにカスタムフィールドを追加する場合はGeneral Settingsを以下のように設定します。
- Meta Box Title ：*ご自身で判別できる名前をつけてください。
- Meta Box for：User
- Visible at：*くわしくは以下のセクション『Visible atが編集権限の選択』をご覧ください。
Visible atは編集権限の選択
Meta Box forをUserに設定すると新たな設定項目として『Visible at』が表示され『Edit User』または『Edit User & Profile』からオプションの選択が必要になります。
ここでどちらを選択するかにより、編集権限が以下のように変わります。
- Edit User：追加フィールドは管理者以外のユーザープロフィールに表示され、管理者のみがそれを編集できる。
- Edit User Profile：追加フィールドはサイトのすべてのユーザーのプロフィールページに表示され、ユーザー各自で編集ができる。
『Visinble at』はユーザープロフィールのページに追加した編集権限が変わるだけですので、表示される追加フィールドの見た目を変更するものではありません。
以下は実際に『Visible at』を『Edit User & Profile』に設定してユーザープロフィールに作成した追加フィールドのサンプルです。
ユーザーに連絡先などのアカウント情報をシェアしてもらいたいときなどに、例えば『LINE ID』や『Twitterアカウント』、『携帯電話番号』などの情報を入力するフィールドを作りユーザーに各自入力してもらうのもいいかもしれませんね。
おすすめ追加フィールド例・プロフィール画像
ユーザープロフィールでWordPressでサポートされているGravatarというプロフィール画像を挿入するツールがありますが、こちらは使用するのにわざわざ英語のサイトでアカウントを作成しないと使用ができません。
正直言って使いづらいです。
そんな場合はMeta Boxでユーザープロフィールにプロフィール画像を追加する『Media』の追加フィールドを挿入してしまえばいいんです！
これでGravatarというツールを使用しなくても、ユーザーがもっと簡単にメディアライブラリから画像を挿入・画像をアップロードすることが可能になります。
ユーザーに追加するフィールドはField widthの変更はできない
ユーザープロフィールのページに追加するカスタムフィールドに関してはField width（フィールド幅）をいくら100%以下に変更しても残念ながら画面上には反映されません。
ですのでUserではField widthをいくら変更しようが無意味です。
Meta fieldsのエディター上でドラッグ＆ドロップでフィールドの配置変更は可能です。
※User以外のMeta Box for（Post / Taxonomy）のページではField widthの変更はきちんと反映されます。
まとめ
Meta Boxを使用すればWordPressのエディター各所にカスタムフィールドが設置できます。
カスタムフィールドでインプットした情報をJetEngineとElementorを連携させることによりサイトの各所にさまざまな欲しい情報を呼び出すことができます。
Meta Boxはサイトの機能拡張にとても大きく貢献できますね！
まさにACF Exetended Pro（有料版）と同等な機能がJet EngineのMeta Boxで実現可能ということがお分かり頂けたと思います。
しかもJetEngineはMeta Box以外にもたくさんの機能を持ち合わせている上、ACF Proよりも価格も2倍近く安い（$26/年）ので本当にすごいプラグインです。
カスタムフィールドを作成するにはMeta fieldsでカスタムフィールドの作成・レイアウトを行う必要があります。
その方法を『JetEngine Meta fieldsの機能説明・カスタムフィールドのレイアウトのカスタマイズ』の記事でとてもくわしく説明していますのでぜひ参考にしてくださいね。
もし、JetEngineを購入して使ってみたい！と思う方は『Crocoblockのメンバーシップ【JetEngine】の購入からアクティベートする方法』の記事も用意しています。
JetEngineはすべてが英語のプラグインなため、機能がいまいち分からなかったりと混乱してしまうことがあるかと思います。
CrocoblockのJetシリーズを紹介したサイト『NoCodeWeb-Jetプラグインを解き明かす』では、JetEngineを始めとしたさまざまなJet プラグインの使い方を日本語でサポートしています。
この記事ではJetEngineのMeta Boxの使い方のみし焦点を当てましたが、そもそもJetEngineで何ができるかいまいち全体像がつかめない、もっくわしく知りたいという方は『JetEngineの使い方完全ガイド』をご覧ください。
きっと何かのヒントになるはずです！