初心者必見！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/

まとめ

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

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