WordPressには、「カスタムフィールド」と呼ばれる、記事のタイトルや本文以外に別の情報を追加してサイトに掲載する属性を設定できる機能があります。

今回は、WordPressを扱っているなら絶対に知っておきたいカスタムフィールドについて、初心者〜中級者向けに設定方法を解説します。
カスタムフィールドの設定は初心者にとっては難しいところもあるので、プラグインをつかって簡単に導入する方法もあわせてご紹介します。

Wordpress（ワードプレス）のカスタムフィールドとは？

WordPressで「投稿」を作成する画面では、初期画面で「タイトル」と「本文」の2つがあります。
ここに、入力する情報を追加できるのがカスタムフィールドです。

ブログ記事であれば、「タイトル」「本文」だけで事足りるのですが、例えば次のようなテーマだと、追加で情報をまとめておきたい場合があります。

不動産サイト：
　　場所・交通情報・築年数・賃料・敷金礼金・おすすめポイントなど
レストランのレビューブログ：
　　場所・交通情報・評価・価格帯・おすすめ料理など
アパレルショップ：
　　ブランド・価格・サイズ・在庫数など
日記：
　　今日の天気・今日の気分・一言コメントなど

こうした情報を本文に書き込んで管理することもできますが、「カスタムフィールド」を使うとさらに便利です。
カスタムフィールドを使えば、「タイトル」や「本文」だけではなく任意のフォームを追加することができるだけでなく、テンプレートタグを駆使することで、後ほど「評価が高い順に並べ替える」といったこともできるようになります。

Wordpress（ワードプレス）でカスタムフィールドを表示させる手順

カスタムフィールドは、通常初期画面では表示されていないので、表示するように設定する必要があります。

まず、ページ右上に「表示オプション」があるので、そこをクリックします。

option.png
Screenshot on WordPress.org

「表示する項目」の「カスタムフィールド」にチェックを入れます。

すると、本文の下にカスタムフィールドのウィジェットが表示されます。
ここでカスタムフィールドの設定を行うことになります。

Custom-field-box.png
Source: WordPress Codex

「カスタムフィールドを追加」で新しく属性(キー)を追加することで、次回以降はプルダウンメニューから属性を選択することができます。

カスタムフィールドを記事に表示してみよう

post_custom()関数

しかし、カスタムフィールドはそのままでは表示することができません。
カスタムフィールドの値を、テンプレートソース内の任意の箇所に表示させたい場合が多いと思いますが、指定した数値だけを出したい場合には、テンプレートタグ「post_custom()」を使って以下のように記述します。

<?php echo post_custom('値'); ?>

例えば、「商品価格」という属性をカスタムフィールドで作って、バナナの記事で価格を「100円」と入力した場合、その価格を表示したいとします。

価格は<?php echo post_custom(‘商品価格’); ?>です。

上記のように記述すると、以下のように表示されます。

価格は100円です。

ぶどうの記事で価格を「150円」とすれば、ぶどうの記事を閲覧しているときには「価格は150円です。」と表示されるということです。

the_meta()関数

また、設定したカスタムフィールドをすべて表示したい場合には、テンプレートタグ「the_meta()」を使うのもいいでしょう。

<?php the_meta(); ?>

すると、ソースコードではこのように表示されているはずです。

<ul class='post-meta'>
<li><span class='post-meta-key'>今読んでいる本: </span>変身</li>
<li><span class='post-meta-key'>作者: </span>フランツ・カフカ</li>
</ul>

さらに、カスタマイズすることもできます。

.post-meta {color: red;}
.post-meta-key {font-weight: bold;}

さらに高度なテクニック

すべてのデータを取得するには、「get_post_meta()」関数を使います。

<?php get_post_meta($post_id, $key, $single); ?>

「$post_id」は、データの値を取得する記事のIDなので、「$post->ID」を使って記事のIDを取得しましょう。
「$key」には取得する名前の文字列を入れます。
「$single」はboolean型(true/false型)で、trueに設定されている場合は結果を1つの文字列として、falseの場合にはカスタムフィールドの配列を返します。

例えば、カスタムフィールドから果物の商品画像のURLを取得して表示する場合には、以下のようなコードを利用します。
この例では、サムネイル画像のURLが「thumb」という名前でカスタムフィールドにあります。

<?php if ( get_post_meta( get_the_ID(), 'thumb', true ) ) : ?>
<h2>果物の商品画像：</h2>
<img class="thumb" src="<?php echo get_post_meta( get_the_ID(), 'thumb', true ) ?>" alt="<?php the_title(); ?>" />
<?php else: ?>
商品画像がありません
<?php endif; ?>

これで、商品画像がある場合には画像を表示し、ない場合には「商品画像がありません」を表示します。