【WordPress】Custom Field Template（カスタムフィールドテンプレート）の使い方メモ

2016/05/28 2018/01/20

WordPressのCustom Field Template（カスタムフィールドテンプレート）のメモです。

Custom Field Template メモ

Custom Field Templateとは

カスタムフィールドとは、WordPressの投稿フォームに、「タイトル」と「本文」以外に任意の項目を付け足すことが出来る機能。

例えば野菜を扱うページとして、「商品名」「価格(税抜き)」「価格(税込み)」「産地」という項目（カスタムフィールド）を用意し、以下のように入力することが出来る、というもの。

商品名：にんじん
価格(税抜き)： 100 円
価格(税込み)： 108 円
在庫：あり
産地：和歌山県
おすすめ料理：カレー, 肉じゃが, サラダ
画像：

プラグインのインストール

WPダッシュボード → プラグイン → 新規追加で「Custom Field Template」で検索。

↑ このプラグイン（画像は既にインストール済み）

↑ インストール後、有効化すると、ダッシュボード → 設定 → カスタムフィールドテンプレートというリンクが追加されます。

プラグインの設定

例として、先ほどあげた「野菜」を登録するためのフィールド（フォーム）を作ってみます。
なお、例は「固定ページ」用として作成します。

↑ デフォルトに近い、カスタムフィールドテンプレートの設定画面

設定する項目がいくつかありますが、「カスタムフィールドテンプレートオプション」の「テンプレートコンテンツ」の登録と、作成したフィールドを表示するためのテーマファイル（post/phpなど）の編集を行えばOK。

フォームの作成

上のように設定します。

(1) テンプレートタイトル

テンプレートの名前。分かりやすい名前をつけるのをおすすめ。
今回は「野菜詳細」としました。

(2) テンプレートインストラクション

テンプレートの解説です。さらにわかりやすくする場合は入力しましょう。

(3) 投稿タイプ

カスタムフィールドを表示する投稿タイプを選択。
「投稿」は通常投稿（ブログ型）の方へ、「ページ」は固定ページの方へ、「両方」は投稿、固定ページ両方に表示します。
今回は「ページ」を選択。

(4) カスタムポストタイプ（カンマ区切り）

スラッグを入力することでカスタム投稿タイプに反映します。詳しくは下記サイト様を参照。

(5) Post ID （カンマ区切り）:

カスタムフィールドを特定の記事にだけ表示させたい場合に使用。表示させたい記事のIDをカンマ区切りで入力します。

例：113,214

(6) カテゴリーID （カンマ区切り）:

カスタムフィールドを特定のカテゴリーの記事にだけ表示させたい場合に使用。表示させたいカテゴリーのIDをカンマ区切りで入力します。

例：2,3

(7) ページテンプレートファイル名（カンマ区切り）:

カスタムフィールドを特定のページテンプレートを使用したページにだけ表示させたい場合に使用。表示させたいページのテンプレートのファイル名を拡張子込みでカンマ区切りで入力します。

例：hoge.php,test.php

(8) テンプレートフォーマット

ショートコードを使うための設定のようです（よくわからなかった）
以下の様な解説が本家サイトにて書かれています。

テンプレートフォーマットを使用すると、カスタムフィールドの入力にも

ショートコードフォーマットのフォーマットが適用されます。自由度の高い入力画面を作成したい場合に使用します。[key] はインプットフィールドの出力、[[key]] はデフォルトのキーの出力に使用します。fieldset タイプには対応していません。

(9) テンプレートコンテンツ

フォームテンプレートの内容を設定。
テンプレートの表示項目は（基本的に）下の3行で指定します。
IDを日本語にしてしまえば、labelはなくても問題無いような気がします。

[ID] ：カスタムフィールドのID（定義）
type ：カスタムフィールドの形状とサイズ
label：投稿画面で表示されるテキスト（注意事項など）

「type」は以下の様な種類が設定可能。

一行テキスト
テキストエリア
ファイル
チェックボックス
ラジオボタン
セレクトボックス

が設定可能です。

チェックボックス, ラジオボタン, セレクトボックス

それぞれvalueとなる内容は #（シャープ記号）区切りで指定。

テキストアエリア

「rows」：フィールドの高さを指定
「cols」：フィールドの横幅を指定
「tinyMCE」： trueを指定すると本文入力エリアのいわゆる「ビジュアル」の機能をフィールドに持たせることができます。
「htmlEditor」： trueを指定すると本文入力エリアの「テキスト」の機能をフィールドに持たせることができます。
「mediaButton」：trueを指定すると本文入力エリアの「メディアを追加」ボタンを表示します。

ファイル

「mediaPicker」：trueを指定するとメディアピッカーから画像を選択できるようになります。
「mediaRemove」：trueを指定すると登録した画像を削除できるチェックボックスを追加します。

まとめ

以上を踏まえ、以下のようにしてみました。

[stock]
type = radio
value = あり # なし
label = 在庫

[product_name]
type = text
size = 35
label = 商品名

[price1]
type = text
size = 35
label = 価格
before = (税抜き) 
after = 円

[price2]
type = text
size = 35
label = 価格
before = (税込み) 
after = 円

[description]
type = textarea
rows = 4
cols = 60
tinyMCE = true
htmlEditor = true
mediaButton = true
label = 概要

[place]
type = select
value = 滋賀県 # 京都府 # 大阪府 # 兵庫県 # 奈良県 # 和歌山県
label = 産地

[osusume]
type = checkbox
value = カレー # 肉じゃが # うどん # カツ丼 # サラダ
label = おすすめ料理

[photo]
type = file
mediaPicker = true
mediaRemove = true
label = 商品画像

[stock]

type = radio

value = あり # なし

label = 在庫

[product_name]

type = text

size = 35

label = 商品名

[price1]

type = text

size = 35

label = 価格

before = (税抜き)

after = 円

[price2]

type = text

size = 35

label = 価格

before = (税込み)

after = 円

[description]

type = textarea

rows = 4

cols = 60

tinyMCE = true

htmlEditor = true

mediaButton = true

label = 概要

[place]

type = select

value = 滋賀県 # 京都府 # 大阪府 # 兵庫県 # 奈良県 # 和歌山県

label = 産地

[osusume]

type = checkbox

value = カレー # 肉じゃが # うどん # カツ丼 # サラダ

label = おすすめ料理

[photo]

type = file

mediaPicker = true

mediaRemove = true

label = 商品画像

ショートコードで表示させる

テーマファイルをゴリゴリ書いても良いのですが、スマートさに欠けるので、ショートコードを用いて表示させます。
こっちの方が簡単ですしね。

カスタムフィールドテンプレートの設定画面から、[cft] and [cftsearch] Shortcode Formatを開きます。

FORMAT #0 は元からサンプルが入力されていると思うので、FORMAT #1 へ以下内容を記入します。

<div class="tgCft">
    <table>
    <tr>
    <th>在庫</th>
    <td>[stock]</td>
    </tr>
    
    <tr>
    <th>商品名</th>
    <td>[product_name]</td>
    </tr>
    
    <tr>
    <th>説明文</th>
    <td>[description]</td>
    </tr>
    
    <tr>
    <th>画像</th>
    <td><?php echo wp_get_attachment_image(post_custom('photo'),'full'); ?></td>
    </tr>
    
    <tr>
    <th>産地</th>
    <td>[place]</td>
    </tr>
    
    <tr>
    <th>価格</th>
    <td>[price1]</td>
    </tr>
    
    <tr>
    <th>価格</th>
    <td>[price2]</td>
    </tr>
    
    <tr>
    <th>オススメ料理</th>
    <td>[osusume]</td>
    </tr>
    </table>
</div>

<table>

<tr>

<td>[stock]</td>

</tr>

<tr>

<td>[product_name]</td>

</tr>

<tr>

<td>[description]</td>

</tr>

<tr>

</tr>

<tr>

<td>[place]</td>

</tr>

<tr>

<td>[price1]</td>

</tr>

<tr>

<td>[price2]</td>

</tr>

<tr>

<th>オススメ料理</th>

<td>[osusume]</td>

</tr>

</table>

</div>

"[]" でカスタムフィールドのIDを囲ったものをテーブルに書いているだけです。

チェックボックスやラジオボタン、セレクトボックスも特に気にすること無く、IDを書くだけ。

ただし、画像は php を使った方がてっとり早いので、

<?php echo wp_get_attachment_image(post_custom('photo'),'full'); ?>

1	<?php echo wp_get_attachment_image(post_custom('photo'),'full'); ?>

の様に書きます。

最後に、固定ページを作成するときに、本文欄へ

[cft format=1]

1	[cft format=1]

と記述。format= に続く数字は、「[cft] and [cftsearch] Shortcode Format」で使用したFORMAT番号です。
今回は FORMAT #1 を使ったので、1 と記述します。

↑ 結果。グゥレイト！

-WordPress
-custom field template, カスタムフィールドテンプレート

: WordPressの画像表示プラグイン「Lightbox2」を使ってみる

ブログ記事を書いていて、画像を使用するときに、サムネイル画像をクリックするとふわーんと大きい画像が表示される、有名なJavascriptのライブラリであるLightboxですが、WordPress用にプラグインとして公開されているので、使ってみたいと思います。

: 【WordPress】SVGファイルをアップロードしようとしたらエラーが出たので、アップロードできるようにする方法

WordPress（Ver4.9.1）でSVGファイルをメディアへアップロードしたところ、「セキュリティ上の理由によりこのファイル形式は許可されていません」というエラーメッセージが出て、アップロードできませんでした。functions.phpで設定されているMIMEタイプにsvgが含まれていないのが原因の様でしたので、プラグインを使わずに、functions.php を拡張することで対応する方法を紹介します。

: WordPressに「はてなブックマークボタン」をつけてみた。

少し前にfbの「いいね」ボタンをブログに付けてみましたが、今度は「はてなブックマーク」のブックマークボタンをつけてみましたので、その解説です。今回もアプリではなく、自分でコードを作成し、テーマに貼り付ける手法をとっています。

: WordPressのカテゴリの一括変更に「Batch Cat」プラグインを使ってみた。

テーマのリニューアルに伴い、カテゴリの整理も行ったのですが、標準機能ではなかな骨の折れる作業だったので、カテゴリ編集用のプラグイン「Batch Cat」を導入したのでご紹介。

: Google AdWords広告の位置を調整するためにWordPressのプラグインを作ってみた

Google AdWords広告を表示する位置を、ポストの直後に設定したいために、プラグインを作成してみました。作成したプラグインはWordPressのAPIであるフックを利用。意外と簡単に出来たので、公開したいと思います。

PREV: Facebookの言語設定を変更し、関西弁から通常に戻す方法
NEXT: 【UNIX・Windows】Apacheのバージョン確認方法

【WordPress】Custom Field Template（カスタムフィールドテンプレート）の使い方メモ

Custom Field Template メモ

Custom Field Templateとは

プラグインのインストール

プラグインの設定

フォームの作成

(1) テンプレートタイトル

(2) テンプレートインストラクション

(3) 投稿タイプ

(4) カスタムポストタイプ（カンマ区切り）

(5) Post ID （カンマ区切り）:

(6) カテゴリーID （カンマ区切り）:

(7) ページテンプレートファイル名（カンマ区切り）:

(8) テンプレートフォーマット

(9) テンプレートコンテンツ

チェックボックス, ラジオボタン, セレクトボックス

テキストアエリア

ファイル

まとめ

ショートコードで表示させる

【DIY】2x4や1x4など、SPF材サイズ早見表 (563,574)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (278,406)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (256,025)

【歴史】江戸幕府歴代将軍一覧 (143,287)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (130,127)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (129,522)

【WordPress】Custom Field Template（カスタムフィールドテンプレート）の使い方メモ

Custom Field Template メモ

Custom Field Templateとは

プラグインのインストール

プラグインの設定

フォームの作成

(1) テンプレートタイトル

(2) テンプレートインストラクション

(3) 投稿タイプ

(4) カスタムポストタイプ （カンマ区切り）

(5) Post ID （カンマ区切り）:

(6) カテゴリーID （カンマ区切り）:

(7) ページテンプレートファイル名 （カンマ区切り）:

(8) テンプレートフォーマット

(9) テンプレートコンテンツ

チェックボックス, ラジオボタン, セレクトボックス

テキストアエリア

ファイル

まとめ

ショートコードで表示させる

(4) カスタムポストタイプ（カンマ区切り）

(7) ページテンプレートファイル名（カンマ区切り）: