初心者必見！WordPressで便利なカスタムフィールドとは？設定する手順とプラグインもまとめて紹介

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

カスタムフィールドを使えば、「ピックアップ商品の中から、価格が500円以上のものを最新5件だけ表示する」「国産カテゴリで評価が5つ星のものをランダムに10件表示する」など細かな条件を指定できます。

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

カスタムフィールドとは？

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

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

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

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

カスタムフィールドを表示させる手順

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

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

Screenshot on WordPress .org

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

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

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

さらに高度なテクニック

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

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

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

カスタムフィールドを便利にする プラグイン

WordPress で標準で用意されているカスタムフィールド自体、非常に汎用性が高く便利ではありますが、 プラグイン を使えばさらに便利になります。

ここでは、特におすすめのカスタムフィールドを便利にする プラグイン を3つご紹介します。

Advanced Custom Fields

Screenshot on WordPress .org

Advanced Custom Fieldsは、通称「ACF」と呼ばれているカスタムフィールド プラグイン の定番とも呼べる プラグイン です。
カスタムフィールドの出力タイプを、 テキスト やWYSIWYG、画像やファイル、 ページ リンク や日付ピッカーなどから選択でき、ネイティブの WordPress カスタムフィールドとの互換性が抜群です。

https://ja.wordpress.org/plugins/advanced-custom-fields/

Custom Field Template

Screenshot on WordPress .org

Custom Field Templateは、初心者でも簡単にテンプレート タグ を扱うことができるシンプルな プラグイン です。
専用の簡単なコードでテンプレートを作成すれば、簡単にホームページに追加の属性を表示することができます。

https://ja.wordpress.org/plugins/custom-field-template/

Custom Field Suite

Screenshot on WordPress .org

Custom Field Suiteも初心者に非常に扱いやすい プラグイン の一つです。
「フィールドグループ」と呼ばれるグループを作成し、複数のカスタムフィールドをまとめることができます。
また、配置ルールを使って、フィールドグループを並べ替えることも可能です。

https://ja.wordpress.org/plugins/custom-field-suite/

まとめ

カスタムフィールドを使うことで、投稿 コンテンツ を ブログ 記事以上の価値にすることができます。
ちょっとしたコードを追加するだけで、データに表示期限を付け加えたり、工夫次第でさまざまな使い方ができるのも特徴です。

自分なりの使い方を見つけて、ご自身のサイトをさらに魅力的にしていきましょう。