[WordPress] プラグイン「Custom Field Template」の使い方【前編】

カスタムフィールドを作成できるプラグイン「Custom Field Template（カスタムフィールドテンプレート）」の使い方をご紹介します。

長くなるので、
・【前編】カスタムフィールドテンプレートの作成方法
・【後編】カスタムフィールドテンプレートの出力方法
に分けます。

はじめに：カスタムフィールドとは

WordPressの投稿や固定ページの編集画面には、デフォルトで「タイトル」と「本文」の2つの入力欄が表示されます。

これらに加え、独自の入力欄（フィールド）を追加したい場合に使うのが「カスタムフィールド」です。

たとえば、飲食店のメニューを構成する定型項目「メニュー画像」「金額」「案内文」などを管理・表示したい場合に便利です。

当記事では、プラグイン「Custom Field Template」を使用してカスタムフィールドを作成する方法をご紹介します。

プラグイン「Custom Field Template」について

「Custom Field Template」はカスタムフィールドを追加できるプラグインです。
テンプレートとしてまとめて表示できるため、管理もしやすく、複数のカスタムフィールドを扱う際に非常に便利です。

プラグインのインストールと有効化

1. WordPress管理画面の左メニューから「プラグイン」＞「新規プラグインを追加」を選択
2. 検索窓に「Custom Field Template」と入力
3. 該当プラグインが表示されたら「今すぐインストール」→「有効化」

カスタムフィールドテンプレートの作成

プラグインを有効化すると、管理画面の左メニュー「設定」内に「カスタムフィールドテンプレート」というサブメニューが追加されます。

最初に表示される「TEMPLATE #0」は、「無効化」にチェックを入れ、見本として残すようにしています。

 

TEMPLATE #1 を使用して、新規テンプレートを作成します。
TEMPLATE #0 を見本として残す必要がない場合は上書きしても大丈夫です。

表示条件の設定

①テンプレートタイトル
管理しやすいよう任意の名前を設定します。

②投稿タイプ
投稿タイプ毎にカスタムフィールドテンプレートを表示出来ます。
例：投稿にだけ表示する場合は「投稿」を選択

③カスタムポストタイプ
カスタムフィールドを特定のカスタム投稿タイプにだけ表示する場合に、カスタム投稿タイプスラッグを入力します。
例：カスタム投稿タイプスラッグ「menu」にだけ表示する場合は menu と入力

④テンプレートコンテンツ
カスタムフィールドの内容を設定します。

 
その他は必要に応じて設定します。
Post ID：特定の記事にだけ表示する場合に指定　例：1,2
カテゴリーID：特定のカテゴリーの記事にだけ表示する場合に指定　例：1,2
ページテンプレートファイル名：特定のページテンプレートを使用したページにだけ表示する場合に指定　例：page-example.php

テンプレートコンテンツへのコードの記述方法

①フィールド名
フィールド名を指定します。

②タイプ属性
フィールドのタイプ属性を指定します。
　・text（1行テキスト）
　・checkbox（チェックボックス）
　・radio（ラジオボタン）
　・select（プルダウン）
　・textarea（複数行テキスト）
　・file（画像アップロード）

③label
フィールドに説明を付けることが出来ます。
投稿画面で表示されます。

 

作成したカスタムフィールドテンプレートを読み込むと以下のような表示になります。

タイプ属性毎の設定

text（1行テキスト）

1行で収まるテキストの入力に使用します。

「size」でフィールドの長さを調整できます。
 

checkbox（チェックボックス）

複数選択可能な項目に使用します。

「value」に項目を# 区切りで指定します。
 

radio（ラジオボタン）

項目を1つだけ選択する場合に使用します。

タイプ属性以外の指定方法は checkbox と同様です。
 

select（プルダウン）

radio同様、項目を1つだけ選択する場合に使用します。
radio：選択肢が少なく、すぐ目に見えている方が良い場合
select（プルダウン）：選択肢が多かったり、見た目をコンパクトにしたい場合
と使い分けると良いでしょう。

タイプ属性以外の指定方法は checkbox、radio と同様です。
 

textarea（複数行テキスト）

 
・rows：フィールドの高さを指定します。
・cols：フィールドの横幅を指定します。

※1 tinyMCE = true
WordPressのビジュアルエディターを有効化します。
通常投稿と同様に、HTMLを直接書かず、太字や文字揃えなどをボタンで装飾できるようになります。

※2 htmlEditor = true
テキスト（HTML）モードのエディターを有効化します。
ユーザーがHTMLを直接入力・編集できるようになります。
（ビジュアルとHTMLを切り替えるリンクが表示されます）

※3 mediaButton = true
「メディアを追加」ボタンを表示します。
通常投稿と同様に、画像やファイルなどをアップロード・挿入できるようになります。

tinyMCE = true
htmlEditor = true
mediaButton = true
これら3つを指定すると、textareaが通常の投稿エディターと同じように使えるようになります。

 
必要なければ記述を省くこともできます。
記述を省いた場合の表示は以下です。

file（画像アップロード）

 
※1 mediaPicker = true
「メディアピッカーで選択」ボタンを表示します。
メディアライブラリから画像やファイルを選べるようになります。
アップロード済みのファイルを再利用したいときに便利です。
mediaPicker = true は必要なければ記述を省くこともできます。

カスタムフィールドの出力

【後編】に続きます。