Jetプラグインを解き明かす

JetEngineでカスタム投稿タイプとカスタムフィールドを作る方法 – Crocoblock

CrocoblockのJetEngineを使用すればカスタム投稿タイプとカスタムフィールドも作ることができます。

でもCustom Post Type UI (CPT UI)やACFなら無料で同じようなことできるよね?
と思う方もいるでしょう。

しかしJetEngineのカスタム投稿タイプとカスタムフィールドは、その二つのプラグインを合わせて更に拡張したような機能を持ち合わせます。

この記事ではその基本操作を説明しています。

JetEngineの詳しい使い方を知りたい方はこのページをチェックしてください。

なお、カスタム投稿タイプ、カスタムフィールドが何なのかいまいちわからないという人のために以下の記事も用意しています。

JetEngineでカスタム投稿タイプとカスタムフィールドを作る方法を説明した動画はこちらです

この記事では『車』というカスタム投稿タイプをサンプルとして作成していきます。

カスタム投稿タイプを新規追加(3ステップ)

JetEngineで新しくカスタム投稿タイプを作る方法を説明します。

①Post TypeのAdd Newをクリック

JetEngineのカスタム投稿タイプ(Post Type)を新規作成の手順・Post Typeのページで『Add New』をクリック

ダッシュボードの左側の『Post Types』をクリックします。

すると上記のように『Custom Post Type List』の表示画面になりますので画面上部の『Add New』をクリックします。

『Add New Post Type』(投稿タイプを新規追加)のページの表示画面

すると上記のような『Add New Post Type』という表示画面になります。

Add New Post Typeのページには以下のように設定がカテゴリー分けされています。

  • General Settings
  • Labels
  • Advenced Settings
  • Meta fields
  • Admin coulmns

しかし、カスタム投稿タイプを新規追加するのは『General Settings』で、その他は主にカスタム投稿タイプやカスタムフィールドを使用していくための機能のUIをカスタムするための細かな設定になります。

②General Settings(一般設定)

『General Settings』はカスタム投稿タイプの名前(題名)やスラッグなどを設定します。
なお、この記事のサンプルでは『車』を例に投稿タイプを作成していきます。

Post Type Name(投稿タイプ名)

General Settings(一般設定)の『Post Type Name(投稿タイプ名)』の設定の説明・フィールドに投稿タイプ名を入力

『Post Type Name』では投稿タイプの名前を設定します。

このサンプルでは『車』とします。

投稿タイプ名はひらがな・カタカナ・アルファベットなどでれでもOKです。

しかし、何の投稿タイプなのかがパッと見てわかるような名前にしましょう。

Post Type Slug(投稿タイプスラッグ)

General Settingsの『Post Type Slug』の設定・フィールドに半角数英小文字でスラッグを入力

『Post Type Slug』(ポストタイプスラッグ)はカスタム投稿タイプに関連したスラッグを半角英小文字、数字、`-` `_` で入力します。

このサンプルではPost Type Slugを『cars』にしました。

‘Edit post type/meta box’ link

General Settingsの『'Edit post type/meta box' link』の設定・オフ

『’Edit post type/meta box’ link』をオンにすると、投稿編集ページに『Edit post type(投稿タイプの編集)』と『Edit meta box(メタボックスの編集)』のページに戻ってこられるようなリンクを追加することができます。

ですがここは『オフ』のままで何も問題ありません。

③Add Post Typeをクリック(投稿タイプを追加)

『Add Post Type』をクリック(カスタム投稿タイプを作成する)

画面右側の青い『Add Post Type』をクリックします。

これで新しいカスタム投稿タイプ『車』がWordPressに追加されました。

投稿タイプ追加後の変化

General SettingsのPost TypeとPost Type Slug設定後の『車』投稿タイプのUIの変化を表示した画面(車の投稿タイプ一覧画面)

上記はダッシュボードの左にある『Post Types』(カスタム投稿タイプ一覧)のページです。

このようにPost Type NameとPost Type SlugともにGeneral Settingsで設定した通りのUIで表示されています。

また、ダッシュボードの左にも『車』と表示されました。

しかしこれはデフォルトのUIで、まだとてもシンプルです。
この記事では説明は割愛しますが、このページ一覧の画面を自分好みの情報を追加・レイアウトを変更することも可能です。

その方法については近日中に別の記事にて紹介していきます!

Labelsと Advenced Settingsの設定

『Labels』と『Advanced Settings』は何の設定かの説明

『Labels(ラベル)』と『Advenced Settings(高度な設定)』は作成中の投稿タイプのエディターのUIを決定するものです。

特にこちらは未設定のままにしてもそんなに問題はありませんが、英語のプラグインであるためそのデフォルト設定のままではUI的にしっくりこない箇所も存在します。

Labels / Advanvced Settingsの設定方法、機能の説明については近日中に別の記事にて日本語に訳してくわしく説明をしていきます。

Meta fieldsはカスタムフィールドが作成できる

カスタム投稿タイプを作成したら、その投稿タイプのカスタムフィールドの追加・構成は『Meta fields』(メタフィールド)で行います。

まずカスタムフィールドとは、投稿タイプに更に追加でフィールドを追加し、その投稿タイプに従来の情報よりも多くの情報を持たせることができる、WordPressの機能です

カスタムフィールドのインフォグラフィックス

カスタムフィールドはWordPressの使用だけではページのビジュアルを変化させることはありませんが、Elementor Proの動的タグにより カスタムフィールドの情報を呼び起こし、それがElementor proで作成したテンプレート上に、各ページで違った(カスタムフィールドの)情報を表示させることができる優れものです。

しかしこれは事実なのですが、JetEngineはElementor Proなしでも動的タグが使用できるヤバいツールなんです。

『Meta fields』では、その投稿タイプ(この記事のサンプルで言えば車)の各投稿で車に関する詳細をカスタムフィールドで入力しておけば、例えばメーカー名や車種、走行距離などの情報を自分好みに表示することができます。

※すでにACF(Advance Custom Field)を知っている、使用している方はピンとくると思いますが、JetEngineのMeta fieldsはACFとほぼ同じようなものです。

上記で触れたElementor Proのテンプレートですが、テンプレートをElementor Proで自分で作成・レイアウトする方法を説明した【Elementor Pro テーマビルダーで投稿ページのレイアウトの作り方】の記事もありますのでよかったらご覧くださいね!

フィールドを追加する方法(3ステップ)

まずはサンプルとして『説明』というテキストを打ち込むタイプのフィールドを1つ追加する方法を以下で紹介していきます。

①New Meta fieldをクリック

『New Meta Field』をクリック(新しいMeta fieldを追加する)

『Meta field』を開くと出てくる『New Meta field』のボタンをクリックします。

Meta fieldを新規追加した後の表示画面

すると上記画面のように新しいメタフィールドが追加され、各編集項目が表示されます。
その各項目とは一つのフィールドに対しての名称や機能、フィールドタイプを設定していくものです。

②Meta fieldの各項目を設定

Meta fieldの設定見本

まずはMeta fieldの各項目設定をしていきます。

この段階ではそれぞれの項目がどのような意味を持っているのかを説明せず、『説明』のフィールドに対してどのような各項目設定をしたのかを以下の表でまとめました。

項目名設定内容デフォルト設定
Label『説明』と記入
Name/ID『discription』と記入
Object Type FeildFeild
Field TypeTextareaText
Discription
Field width100%100%
Character limit
Default value
Is requiredONOFF
Conditional LogicOFFOFF
『説明』のフィールドの各項目の設定内訳(例)

③Update Post Typeをクリック

『Update Post Type』をクリックし、編集内容を保存

フィールドの設定が完了したら、『Update Post Type』をクリックします。

これでこの『説明』のフィールドは『車』の投稿タイプのエディターのカスタムフィールドとして追加されました。

カスタムフィールドに『説明』のフィールドが追加された時の実際の表示画面

こちらは『車』の投稿タイプのエディターに『説明』のカスタムフィールドが設定された時の表示画面です。

このようにカスタムフィールドはフィールド1つに対して1つMeta fieldを追加します。
さらに詳細なカスタムフィールドを作成するには上記で説明した方法で次々に項目追加をしていきます。

カスタムフィールド作成見本

車の投稿のカスタムフィールドの作成例①・基本情報のタブ
基本情報のタブ
車の投稿のカスタムフィールドの作成例②・車のコンディションのタブ
車のコンディションのタブ

上記は実際にたくさんのMeta fieldを追加していき作成した『車』の投稿タイプのカスタムフィールドの見本です。

実際にこのように詳細なカスタムフィールドを自分で作成・構成することができます。

上記のようなカスタムフィールドの作り方とMeta fieldの項目のくわしい説明についてはJetEngine Meta fieldsの機能説明・カスタムフィールドのレイアウトのカスタマイズ』の記事をご覧くださいね!

まとめ

JetEngineでカスタム投稿タイプとカスタムフィールドの作成方法、いかがだったでしょうか?

英語だから難しそうに見えるだけで、実際は投稿タイプの追加もカスタムフィールドの追加もクリックして入力して保存と、することはそんなに難しくありません。

CPT UI(カスタム投稿タイプを作成できるプラグイン)とACF(JetEngineのようなカスタムフィールドを作成できるプラグイン)の機能をすべて持っているのがJetEngineです。

JetEngineは有料プラグインではありますが、実際にACFに関して言えばこちらも有料版のものにしないとJetEngineと同じ機能は持てません。

どのみち有料版を購入するのなら、いろいろな有料プラグインをかき集めるよりもJetEngineが良いです。

JetEngineひとつでカスタム投稿タイプ、カスタムフィールド、またここで紹介しきれなかった他の便利な拡張機能までもをサポートします。

なのでJetEngineは本当にオススメのプラグインなんです!

もしJetEngineの購入に興味のある方はこちらの『Crocoblockのメンバーシップ【JetEngine】の購入からアクティベートする方法』の記事をどうぞご覧ください。
購入方法からアクティベーションまでを日本語でサポートしています。

またご購入ページへ直接行きたい方はこちらをクリックしてください。

もしJetEngineのことで迷ったら、JetEngineの使い方完全ガイドをご覧ください!

JetEngineで一体何ができるのか、使い方から構造までを一挙に紹介しています。

きっと答えが見つかるはずですよ!



目次