WordPressでサイトの制作をしていると、気になってくるのが「カスタムフィールド」の存在です。カスタムフィールドとはいったい何なのか、どうやったらWordPressで使えるようになるのか知りたいですよね。
今回はカスタムフィールドがどういったものなのか、どのようにしてWordPress上で使うのかをお教えします。またカスタムフィールドを便利に使うためのプラグインもありますので、合わせてご紹介します。
目次
WordPressのカスタムフィールドとは？
WordPressでブログを作成し定期的に投稿するだけなら、タイトルと本文があればできます。ですが、2021年1月現在WordPressは多様化してきており、商品の販売サイトなどでも使われることが多いです。
そうなってくると商品情報を毎回項目を作って内容を入力する作業が大変になってきますよね。そこで商品情報などのデータをまとめて管理できるのが、WordPressのカスタムフィールドです。
販売したい商品の品名や値段などをカスタムフィールドに入力しておけば、専用タグを使ってデータを呼び出し表示することができます。これからWordPressを使って、多数の商品を紹介したいなど考えているなら、カスタムフィールドが便利です。
WordPressでカスタムフィールドを有効にする手順
カスタムフィールドはWordPressにデフォルトでついていますが、基本は設定しないと表示されない機能です。以下の手順を行えば、新規追加ページ内の本文の下辺りにカスタムフィールドのウィジットが表示されます。
- 新規追加ページ内右上の「表示オプション」をクリック
- 表示されたメニュー内「カスタムフィールド」にチェックを入れる
WordPress本文内でカスタムフィールドの内容を表示させるための設定
カスタムフィールドは新規追加ページ内で表示して入力しただけでは、本文内で呼び出すことができません。カスタムフィールド内の数値を呼び出す関数を使うことで、本文内に表示することができます。
以下ではカスタムフィールド内の数値を呼び出すことができる、2つの関数をご紹介します。
カスタムフィールド内の指定した数値を表示するpost_custom()関数
任意の場所にカスタムフィールド内から指定した数値を呼び出したい場合、post_custom()関数を使って以下のように記述します。
|
1 |
値段は<?php echo post_custom(‘値段’); ?>です。 |
カスタムフィールド内に「値段」の項目を作って、数値に「500円」と入力しておきます。その後上記の記述を行うと、以下のように表示してくれます。
記事別で設定できるので、弁当の記事内で500円、お茶の記事内で120円と入力すれば、それぞれのページ内で入力された数値が表示されます。
設定したカスタムフィールドの全ての数値を表示するthe_meta()関数
カスタムフィールドのデータを一つずつではなく、数値を全て表示したい場合はthe_meta()関数を使います。呼び出したい場所で以下のように記述します。
|
1 |
<?php the_meta(); ?> |
すると設定された内容がソースコード上では以下のように表示されます。
|
1 2 3 4 |
<ul class='post-meta'> <li><span class='post-meta-key'>品目: </span>お弁当</li> <li><span class='post-meta-key'>値段: </span>500円</li> </ul> |
装飾などをしなければページ上では以下のように表示されます。
値段: 500円
CSS内任意の場所で以下のように記述して、装飾などもすることができます。
|
1 2 |
.post-meta {color: green;} .post-meta-key {font-wight: bold;} |
より高度な使い方ができるget_post_meta()関数
より高度な使い方をしたいのであれば、カスタムフィールド内のデータ全てを呼び出すことができる以下のようなget_post_meta()関数を使います。
|
1 |
<?php get_post_meta($post_id, $key, $single); ?> |
上記のままだと（）の中身が定義されていないためうまく表示されないので、（）の中身をそれぞれ定義していきます。
まず「$post_id」は取得先のカスタムフィールドがある記事のIDなので、「get_the_ID()」などで記事のIDを取得します。続いて「$key」は取得先のデータに付けられている名前の文字列なので、名前が「画像」であれば「’画像’」と表記します。
最後に「$single」はtrueまたはfalseを設定できる場所で、tureの場合は文字列をfalseの場合はカスタムフィールドの配列を返します。
これを使って以下のように記述していきます。
|
1 2 3 4 5 6 |
<?php if ( get_post_meta( get_the_ID(), '画像', true ) ) : ?> <h2>商品画像：</h2> <img class="画像" src="<?php echo get_post_meta( get_the_ID(), '画像', true ) ?>" alt="<?php the_title(); ?>" /> <?php else: ?> 商品画像がありません <?php endif; ?> |
上記によりカスタムフィールド内画像の項目に画像があれば表示、無ければ「商品画像がありません」の文字を表示してくれます。このように必要なものだけを表示させるなど高度な使い方をすることができます。
カスタムフィールド用プラグインをご紹介
デフォルトのカスタムフィールドだけでも利便性が高く使いやすいのですが、専用のプラグインを使えばより扱いやすくなります。以下では特にカスタムフィールドのプラグインとして利用されているものを2つご紹介します。
テキスト以外に様々なものをカスタムフィールドから呼び出せるAdvanced Custom Fields
https://ja.wordpress.org/plugins/advanced-custom-fields/
特にカスタムフィールドの定番プラグインとなっているのが、「Advanced Custom Fields」通称ACFです。通常はテキストでしか呼び出せませんが、このプラグインを使うことで以下のようなテキスト以外も呼び出すことができます。
- ・WYSIWYG
- ・画像
- ・ファイル
- ・ページリンク
- ・日付ピッカー
- ・etc…
上記から選択して呼び出すことができるため、カスタムフィールドとの互換性が高く定番のプラグインとして定着しています。
初心者でもカスタムフィールドを使いやすくするCustom Field Template
https://ja.wordpress.org/plugins/custom-field-template/
こちらも定番プラグインで、特に初心者がカスタムフィールドを使いやすくなるようにできるのがCustom Field Templateです。記事内で紹介したコードを使わなくても、このプラグインを使って専用のタグを使えば、簡単にカスタムフィールドの導入・表示が可能です。
導入・表示だけでなく中身のカスタムまでできるので、プラグイン導入後長く使える便利なプラグインです。
まとめ
今回は「WordPressのカスタムフィールドって何？設定方法と便利なプラグイン」をご紹介しました。商品情報など同じ要素を使い回すものであれば、カスタムフィールドでデータ管理しやすいことがわかったと思います。
もとからあるカスタムフィールドの情報以外に、プラグインを使えばより細かい情報の設定などもできますので、ぜひ活用してみてください。
