[WP]Typesプラグインでカスタムフィールドを作成する方法

WordPress
スポンサーリンク

WordPressのTypesプラグインで「カスタムフィールド」を作成する方法のご紹介です。

Types プラグインでカスタムフィールドの新規作成

管理画面の左メニュー「Types」より「Custom Fields」へ進みます。
Types プラグインでカスタムフィールドを作成する方法

「カスタムフィールドを使用するにはこれを利用するグループを作成してください。」とありますので、「新規グループを追加」ボタンをクリックします。
Types プラグインでカスタムフィールドを作成する方法

カスタムフィールドグループの作成

Typesプラグインでは、複数のカスタムフィールドを「カスタムフィールドグループ」として管理することができます。

Typesでカスタムフィールドを管理する流れとしては、まずはカスタムフィールドグループの基本情報を入力し、どの投稿タイプで使用するかを決定し、個々のフィールドを追加編集していく形になります。


カスタムフィールドグループの基本情報

まずはカスタムフィールドグループの基本情報を入力していきます。
Types プラグインでカスタムフィールドを作成する方法

「グループタイトルを入力」とあるテキストフィールドに、管理しやすい名前の「グループ名」を入力します。「グループ名」は入力必須です。

次に「グループの詳細」を入力します。ここの入力は任意です。


このグループの表示場所

カスタムフィールドグループを使用する投稿タイプの選択や、各種条件を設定することができます。

まずは「Post Types:」欄で今回作成したカスタムフィールドを使用したい投稿タイプを選択します。「投稿」「固定ページ」「特定のカスタム投稿タイプ」など、複数チェックを入れることが可能です。
Types プラグインでカスタムフィールドを作成する方法

特定のタームやテンプレートでカスタムフィールドを使用したい場合も、「Post Types:」同様に「ターム:」「テンプレート:」内の選択肢でチェックを入れます。
Types プラグインでカスタムフィールドを作成する方法

「データ依存型ディスプレイフィルタ」ではより細かい条件指定が可能ですが、余程のことが無い限りはあまり触ることは無いかと思います。
Types プラグインでカスタムフィールドを作成する方法

スタイルエディター

ここの設定は任意ですが、スタイルエディター欄から「Field group HTML」「Your CSS」をそれぞれ設定することで、管理パネル用にフィールドをカスタマイズすることが可能です。
Types プラグインでカスタムフィールドを作成する方法

Fields 欄にカスタムフィールドの追加

画面右側の「利用可能なfields」欄から、使いたいカスタムフィールドを追加、編集、保存していきます。

カスタムフィールドの追加

例えば、利用可能なfields 欄から「画像」のカスタムフィールドのボタンをクリックすると、
Types プラグインでカスタムフィールドを作成する方法

Fields欄 に「画像 field」のカスタムフィールドが追加されますので、「フィールド名」「filedスラグ」をそれぞれ入力します。
※フィールド名、filedスラグは入力必須ですが、「このfieldの詳細」の入力は任意です。
Types プラグインでカスタムフィールドを作成する方法

オプション設定

使用するカスタムフィールドによって設定すべきオプションが変わってくるのですが、

今回の「画像 field」であれば、「シングルまたは繰り返しフィールドですか?」の項目で「このフィールドの複数インスタンスを許可する」「このフィールドには、値は一つだけ可能です」のいずれかを選択できます。

最後に「画像の入力(アップロード)を必須項目にするかどうか」を選択し、ページ下部の「保存」ボタンをクリックします。
Types プラグインでカスタムフィールドを作成する方法

これで、カスタムフィールド作成の基本的な操作は完了となります。


記事の編集画面で画像をアップロードしてみる

「このグループの表示場所」でチェックを入れた投稿タイプの編集ページへ進みます。

すると、先ほど作成した「画像」のカスタムフィールドが追加されています。
今回は「画像」フィールドを追加しましたので、「画像を選択」ボタンをクリックすればメディアを追加することができるようになります。
Types プラグインでカスタムフィールドを作成する方法

今回は、Typesプラグインでカスタムフィールドを作成する所までを紹介させていただきましたが、アップロードした画像を出力する方法につきましては Typesでカスタムフィールドにアップした画像を取得して表示する方法 の記事を参考にしてみてください。

コメント

タイトルとURLをコピーしました