カスタムフィールドとは?
ECサイトの商品ページや、店舗サイトのメニューなど、あらかじめ内容が決まっている入力情報をテンプレート化する場合などに非常に便利です。
今回は、「カスタムフィールド」の使い方について初心者の方向けに解説します。
こんな人にオススメ!
- カスタムフィールドって何?
- そもそもカスタムフィールドが表示されてない
- カスタムフィールドの値の取得について知りたい
- 設定したカスタムフィールドの値を表示したい
カスタムフィールドとは
冒頭で説明した通り、WordPressのカスタムフィールドとは、投稿ページや固定ページなどに、タイトルと本文以外にユーザーが自由に入力項目を追加できる機能です。
しかし、カスタムフィールドの入力画面は、初期状態では表示されていません。
カスタムフィールドの表示手順
カスタムフィールドの入力内容を実際に表示するまでには、以下の手順でカスタムフィールドの 有効化 → 入力 → 表示 をする必要があります。
カスタムフィールドの有効化(表示)
カスタムフィールドを有効化(表示)する方法は、以下の通りです。
❶ 編集画面右上の3点リーダー( )をクリック
❷ 表示されるサイドバー下部の「設定」をクリック
❸ 画面中央に表示されるウィンドウ内の、左サイドバーの「パネル」をクリック
❹ 「カスタムフィールド」→ ❺ 「ページを表示して、リロード」の順にクリック
すると、次のように編集画面下部にカスタムフィールドの入力画面が表示されます。
旧エディター(Classic Editor)の場合は、投稿ページの編集画面右上の ❶ 表示オプション をクリックし、開いたウィンドウで ❷「カスタムフィールド」にチェックを入れましょう。
すると、次のように編集画面下部にカスタムフィールドの入力画面が表示されます。
カスタムフィールドの入力
次に、表示されたカスタムフィールドに「名前」(キー)と「値」を入力します。
既に他のフィールドで「名前」が入力されている場合は、ドロップダウンメニューから選択が可能です。
新たに「名前」を入力したい場合は、「新規入力」ボタンをクリックしてから入力します。
フィールドを追加する場合は、入力欄下の「カスタムフィールドを追加」ボタンをクリックしましょう。
カスタムフィールドの取得と表示
カスタムフィールドに入力された内容は、「post_meta」というデータとして、データベースに保存されます。
そして、この「post_meta」の内容を表示させるには、主に以下のような関数を記述して取得し、表示します。
関数 | 役 割 | 利用箇所 |
get_post_meta() | 投稿ID と 名前(キー) を指定して値を取得 | どこでも可 |
get_post_custom() | 投稿ID を指定して全ての名前(キー)と値を配列で取得 | どこでも可 |
post_custom() | 名前(キー)を指定して値を取得 | ループ内 |
※the_meta関数 (全ての名前と値を表示する関数)は、Wordpress.orgでは廃止されましたとあります。
代わりにget_post_metaを使用しましょう。(引用元:WordPress.org)
それでは、一つずつ見ていこう!
get_post_meta 関数
投稿ID と 名前(キー) を指定して値を取得する場合は、get_post_meta関数を使用します。
get_post_meta( $post_id , $key , $single );
$post_id (整数) | カスタムフィールドの値を取得したい投稿のID。[必須] |
$key (文字列) | 取得したい値の名前(キー)。初期値:'' |
$single (真偽値) | 何も指定しない(またはfalseを指定する)と配列、 trueを指定すると単一の値を返す。初期値:false |
図のようなカスタムフィールドを入力している投稿(ID = 212)があるとします。
カスタムフィールドの「カロリー」に設定した値のみを取得して表示する場合は、任意の箇所で次のように記述します。
<?php
$meta = get_post_meta( 212 , 'カロリー' , true );
echo esc_html($meta);
?>
HTMLとしては、以下のように表示されます。
500
ご覧の通り、第三引数にtrueを指定しているため、単一の値として「500」が表示されていますね。
get_post_custom 関数
投稿ID を指定して全ての名前(キー)と値を配列で取得したい場合は、get_post_custom関数を使用します。
get_post_custom( $post_id );
$post_id (整数) | カスタムフィールドの値を取得したい投稿のID。初期値:現在の投稿ID (存在しないIDを指定した場合は、結果として空文字が返される) |
図のようなカスタムフィールドを入力している投稿(ID = 212)があるとします。
カスタムフィールドの全ての値を表示する場合は、任意の場所で次のように記述します。
<?php
$meta = get_post_custom( );
foreach($meta as $name => $values) {
if(!(preg_match("/^_/", $name))){
echo esc_html($name).':';
foreach($values as $value) {
echo esc_html($value) .'<br> ';
}
}
}
?>
HTMLとしては、以下のように表示されます。
商品名:ミートスパゲッティ<br> 料金:780<br> カロリー:500<br>
名前(キー)と値が全て表示されていますね。
なお、get_post_custom関数では、カスタムフィールドの名前(キー)と値が連想配列で返るため、foreach文 で一つずつ値を取り出す必要があります。
また、図のように何も処理をせずに表示すると _(アンダースコア)から始まるキーが表示されてしまうため、正規表現※で除外しています。
※テキストのパターンを記述し、テキストの中から特定の文字列パターンを検索、抽出、置換、または操作するための手法のこと。
今回は、 _(アンダースコア)から始まるキー を除外したいので、foreach文内の最初のif文で、preg_mach関数を使用して以下のように記述しています。
if(!(preg_match("/^_/", $name))){}
preg_mach関数では、第一引数に「正規表現パターン」、第二引数に「検索対象の文字列」を指定します。
つまり、正規表現パターン /^_/
は、文字列 $name
が _(アンダースコア)で始まるかどうかをチェックしています。
そして、if
文の !
(否定演算子)を含めることで、$nameが「最初に _(アンダースコア)で始まらない場合」という条件を表しています。
post_custom 関数
ループ内で、名前(キー)を指定して値を取得する場合は、post_custom関数を使用します。
post_custom( $key );
$key (文字列) | カスタムフィールドの取得したい値の名前(キー)。初期値:'' (存在しない名前を指定した場合も、結果として空文字が返される) |
図のようなカスタムフィールドを入力している投稿(ID = 212)があるとします。
カスタムフィールドの商品名の値を表示したい場合は、任意の場所で次のように記述します。
<?php
$meta = post_custom('商品名');
echo esc_html($meta);
?>
HTMLとしては、以下のように表示されます。
ミートスパゲッティ
名前「商品名」に設定した値「ミートスパゲッティ」が表示されていますね。
もし、名前の入力欄がチェックボックスやラジオボタンなどを利用し、値が複数ある場合は配列で返ってくる場合は、値が配列として返るので次のように記述しましょう。
<?php
$meta = post_custom('商品名');
if($meta) {
foreach($meta as $value) {
echo esc_html($value);
}
}
?>
最後に
今回は、カスタムフィールドの基本的な使い方について解説しました。
カスタムフィールドは奥が深く、プラグインを使用することで、画像を追加したりチェックボックスを設定することも可能です。
ぜひ、この色々な使い方を試して見てくださいね!
WordPressについて、他にも詳しく知りたい方は他の記事もチェックしてみて下さい!
WordPress
WordPressの基本的な使い方について解説した記事一覧ページです。 イラストを交えてやさしく解説していますので、ぜひご覧ください。
続きを見る