【wordpressプラグイン】Custom Field Template:カスタムフィールドをより使いやすくする

公開日: : 最終更新日:2016/03/24 プラグイン ,

WordPressには、「カスタムフィールド」という機能が標準で実装されています。投稿や固定ページで、タイトルや本文以外に入力項目を作ることのできる機能です。Wordpressに標準で実装されていますから、プラグインを追加しなくても使うことは可能です。カスタムフィールドは任意の数だけ、項目と値のペアを記事に追加することができ、ループ内でテンプレートタグを使ってタイトルや本文等と同じように出力できます。
しかし、カスタムフィールドは便利な機能ですが、標準の管理画面でのカスタムフィールド入力欄は分かりやすい入力項目名が表示できないなど、若干難があるため、プラグインを導入し入力欄を拡張すると、より使いやすくなります。

WordPressプラグイン「Custom Field Template」は、カスタムフィールドの入力を支援するプラグインです。
通常のカスタムフィールドは、名前と値の両方をその都度入力する必要がありますが、このプラグインを利用すれば名前を固定でき、値だけ入力すればよいのでカスタムフィールドを多用するサイトでの記事作成が簡単になり、複数人で管理するときなどに便利になります。
製作者が日本人のため、管理画面も日本語で分かりやすく作られています。

1.「Custom Field Template」をダウンロードする

プラグインの新規追加

「WordPress管理画面」 > 「プラグイン」 > 「新規追加」
で「プラグインの検索」に「Custom Field Template」と打ち込んで「Custom Field Template」をインストールし、有効化します。

2.「Custom Field Template」の設定

plugin_custom

「Custom Field Template」の設定は
「Wordpressの管理画面」>「設定」>「カスタムフィールドテンプレート」
からできます。

plugin_custom2

TEMPLATE #0□無効

ここをチェックすると、設定したカスタムフィールドを一時的に無効にできます。
(テンプレートを追加すると#1、#2…と数字が増えていきます)

テンプレートタイトル

テンプレートのタイトルです。分かりやすいように入力します。日本語でも大丈夫です。

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

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

投稿タイプ

カスタムフィールドの表示を投稿タイプごとに指定したい場合は変更します。
基本的には初期値の「両方」のままでOKです。カスタムポストタイプを使用する場合は、「両方」を選択しておきます。
投稿ページのみに表示したい場合は「投稿」を、固定ページのみに表示したい場合は「ページ」を選択します。

カスタムポストタイプ~ページテンプレートファイル名

指定したページでのみカスタムフィールドを表示させるよう設定できます。複数ページを指定したいときは半角カンマ「,」で区切って指定します。

カスタムポストタイプ

カスタムポストタイプに表示させたい場合にカスタムポストタイプ名を入力します。投稿やページにも表示したい場合は、postやpageも入力します。

例:history,post,page

Post ID

特定の記事にだけ表示させたい場合に入力します。表示させたい記事IDを半角カンマ「,」で区切って入力します。
例:1,3,10,23

カテゴリーID

特定のカテゴリーの記事にだけ表示させたい場合に入力します。表示させたいカテゴリーID(タクソノミーID)を半角カンマ「,」で区切って入力します。
例:10,23

ページテンプレートファイル名

特定のページテンプレートを使用するときだけ表示させたい場合に入力します。
表示させたいページテンプレートファイル名を拡張子(.php)まで含めて半角カンマ「,」で区切って入力します。
例:index.php,history.php

テンプレートフォーマット

テンプレートフォーマットを使用すると、カスタムフィールドの入力にも[cft] ショートコードフォーマットのフォーマットが適用されます。自由度の高い入力画面を作成したい場合に使用します。

テンプレートコンテンツ

このフィールドにコードを入力することで、カスタムフィールドに表示する項目と表示方法をカスタマイズできます。
画面下にある「オプションリスト」を参照しながら入力します。

[公演名]
type = text
size = 35
label = 公演名を記入する EX) 真夏の夜の夢

[公演サブタイトル]
type = text
size = 35
label = 公演のサブタイトルを記入する EX) ~A Midsummer Night's Dream~

[公演の種類]
type = checkbox
value = 本公演 # 若手公演 # 研究生公演 # 移動公演
default = 本公演 # 移動公演
label = 複数選択可

[公演内容]
type = textarea
rows = 6
cols = 70

[チラシ画像アップロード]
type = file
label = ※縦横幅 短い方が690px以上でアップしてください。

などと入力してみました。

plugin_custom4

[ID]:項目名

項目名です。英語でも日本語でも大丈夫です。[]でくくります。

type:フォームタイプ

text・textfield

1行程度のテキストを入力するのに適しています。

size
横幅の長さ
checkbox

チェックボックスを作ります。チェックボックスとはこの形のことです。

plugin_custom_check

value
表示項目。
「value=◯◯ # ◯◯ # ◯◯ # 」と、 # 区切りで表示項目を指定。複数指定可。
default
始めにチェックを入れておく項目。省略可。

入力例

[公演の種類]
type = checkbox
value = 本公演 # 若手公演 # 研究生公演 # 移動公演
default = 本公演 # 若手公演
label = 複数選択可
radio

ラジオボタンを作ります。ラジオボタンとはこの形のことです。

plugin_custom_radio

value
表示項目。
「value=◯◯ # ◯◯ # ◯◯ # 」と、 # 区切りで表示項目を指定。
default
始めにチェックを入れておく項目。省略可。
clearButton
選択の解除テキストを表示。
「clearButton = true」で表示。

「clearButton = true」で解除テキストが表示されます。
plugin_custom_clear

入力例

[年齢]
type = radio
value = 0~9歳 # 10~19歳 # 20~30歳 # 30歳以上
default = 0~9歳
clearButton = true
select

セレクトボックスを作ります。セレクトボックスとはこの形のことです。

plugin_custom_select

value
表示項目
「value=◯◯ # ◯◯ # ◯◯ # 」と、 # 区切りで表示項目を指定。
default
始めにチェックを入れておく項目。省略可。

入力例

[年齢]
type = select
value = 0~9歳 # 10~19歳 # 20歳以上
default = 0~9歳
textarea

複数行のテキストを入力するのに適しているタイプです。

rows
入力欄の高さ
cols
入力欄の幅
tinyMCE
入力フォームに「ビジュアルエディタ」を使用可能にするかどうか(初期値:false)
htmlEditor
入力フォームに「htmlエディタ」を使用可能にするかどうか(初期値:false)
mediaButton
入力フォームに「メディアボタン」を使用可能にするかどうか。trueにすれば、そのフォームに画像や動画などを差し込めるようになります。(初期値:false)

入力例

[説明]
type = textarea
rows = 4
cols = 40
tinyMCE = true
htmlEditor = true
mediaButton = true

エディターを使わないときは下記のシンプルな記述で大丈夫です。

入力例

[説明]
type = textarea
rows = 4
cols = 40
file

画像ファイルをアップロードします。

入力例

[画像のアップロード]
type = file
label = ※縦横幅 短い方が690px以上でアップしてください。

label:項目の説明

項目にさらに詳しい説明をつけたいときに使用します。

3.ページ編集画面でカスタムフィールドへ入力する

「Custom Field Template」が表示されるように指定した投稿および固定ページ、カスタムポストタイプの編集画面に、新たに「カスタムフィールドテンプレート」という入力オプションが表示されるようになりました。
本文とともにカスタムフィールドテンプレートにも入力して保存します。

plugin_custom5

万が一、カスタムフィールドテンプレートが表示されない場合は、表示オプションの「カスタムフィールドテンプレート」にチェックが入っているか確認してください。Wordpressの初期装備である「カスタムフィールド」は表示されると二重になり、ややこしいのでチェックをはずします。

4.カスタムフィールドの値を出力する

カスタムフィールドで入力された値は、各テンプレートファイルのループ内で、カスタムフィールドの値を呼び出すテンプレートタグpost_customを利用し、値を出力します。

if文で条件分岐:カスタムフィールドに値が入っていない場合は、if文の中身を非表示するよう記述

<?php if(post_custom('key')): ?>
<p class="key">
<?php echo esc_html(post_custom('key')); ?>
</p>
<?php endif; ?>

post_custom

カスタムフィールドの値を取得する関数です。出力の際は、echoを前置し、以下のように記述します。

<?php echo post_custom('key'); ?>
関数 post_custom
機能 カスタムフィールドの値を取得する
書式 <?php post_custom('key');?>
引数 key:指定された項目名のカスタムフィールドの内容を出力
位置 ループ内

esc_html

カスタムフィールドの出力に際しては、HTMLを入力した場合に画面に適用させないよう、関数esc_htmlを用いてエスケープさせます。

関数 esc_html
機能 指定された文字列のHTMLをエスケープ
書式 <?php esc_html('text');?>
引数 text:エスケープする文字列

例文

<?php while (have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php if(has_post_thumbnail()) the_post_thumbnail(); ?>
<dl>
<?php if(post_custom('公演名')): ?>
<dt>公演名</dt>
<dd><?php echo esc_html(post_custom('公演名')); ?></dd>
<?php endif; ?>
<?php if(post_custom('サブタイトル')): ?>
<dt>サブタイトル</dt>
<dd><?php echo esc_html(post_custom('サブタイトル')); ?></dd>
<?php endif; ?>
<?php if(post_custom('会場')): ?>
<dt>会場</dt>
<dd><?php echo esc_html(post_custom('会場')); ?></dd>
<?php endif; ?>
</dl>
<?php endwhile; ?>


関連記事

EWWW Image Optimizer

【wordpressプラグイン】EWWW Image Optimizer:画像を自動的に圧縮する

wordpressのプラグインは入れれば入れるだけ、ダッシュボードが複雑になって、訳が分かんなくなる...

記事を読む

Post Types Order

【wordpressプラグイン】Post Types Order:記事の表示順番を変更できる

wordpressプラグイン「Post Types Order」は、投稿ページとの記事とカスタム投稿...

記事を読む

「WP Multibyte Patch」の設定

【wordpressプラグイン】WP Multibyte Patch:日本語処理の問題点を補完する必須プラグイン

「WP Multibyte Patch」は、Wordpress日本語版をダウンロードした際に同梱され...

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

no image
エコノミークラス症候群

エコノミークラス症候群とは?  エコノミークラス症候群は、旅行に関連

no image
巻き爪・陥入爪

巻き爪・陥入爪ってなに?  巻き爪とは、主に親指の爪の両端が「巻く」

no image
結婚お祝い金

披露宴に出る場合 祝儀袋の渡し方  受付でお祝いの言葉を述べ、祝儀

no image
結婚祝い

お祝い品選びと費用 お祝い品の選び方  新居を構える二人には、生活

no image
ダニ除去マニュアル

ダニ除去マニュアルについて  基本的なダニアレルゲン対策としては、

→もっと見る

PAGE TOP ↑