かじこの備忘録

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

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

１．「Custom Field Template」をダウンロードする

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

2．「Custom Field Template」の設定

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

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以上でアップしてください。

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

[ID]：項目名

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

type：フォームタイプ

text・textfield

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

checkbox

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

入力例

radio

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

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

入力例

select

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

入力例

textarea

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

入力例

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

入力例

file

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

入力例

label：項目の説明

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

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

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

万が一、カスタムフィールドテンプレートが表示されない場合は、表示オプションの「カスタムフィールドテンプレート」にチェックが入っているか確認してください。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'); ?>

esc_html

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

例文

<?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; ?>