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

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

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

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

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

Advanced Custom Fields

image6.jpg
Screenshot on WordPress.org

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

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

Custom Field Template

02.png
Screenshot on WordPress.org

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

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

Custom Field Suite

03.png
Screenshot on WordPress.org

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

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

カスタムフィールドを使ってワードプレス記事をワンランクアップ

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

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

WordPressについてさらにチェック

世界でシェアを誇る有名CMSを比較！それぞれのメリット・デメリット

世界でシェアを誇る有名CMSを比較！それぞれのメリット・デメリット

Webサイトを制作する際によく利用されるCMS。いざ利用しようと思っても、たくさん種類があるためどれを利用すべきか迷ってしまうこともあるのではないでしょうか。この記事では、*世界シェア上位5位までのCMSを、メリット・デメリットを挙げながら比較*してみました。CMS選びの際に、ぜひ参考にしてみてください。
All in One SEO Packとは？WordPress人気プラグインの最低限設定すべきポイントを解説

All in One SEO Packとは？WordPress人気プラグインの最低限設定すべきポイントを解説

今回は、WordPressを使用するならインストール必須の、All in One SEO Packの基本的な使用方法を紹介します。高機能プラグインのため各種設定が難しく見えがちですが、まずは最低限必要な場所のみ設定できれば問題ありません。本記事内では、画面のキャプチャを使用しつつ手順を追ってご紹介しますので、ぜひ参考にしてみてください。