【WordPress】カスタムフィールドの使い方


WordPressには、投稿編集フィールドを追加できる機能があります。

それが、『カスタムフィールド』。

カスタムフィールドの知識がない方は、「具体的な説明」と「作り方」を、次のページに書いていますので、そちらをチェックしてください。

⇒【WordPress】カスタムフィールドの作り方

以下で、カスタムフィールドの使い方をご説明します。

カスタムフィールドの使い方

カスタムフィールドに入力した値を、テーマのテンプレートファイルで表示(出力)させるためには、いくつかの関数を使います。

  • get_post_meta関数
  • get_post_custom関数

しかし、『get_post_custom関数』は、WordPressに初期設定されたものを含め、すべてのキーのカスタムフィールドの値を取得してしまうので、通常使われません。キーを指定し、表示させる『get_post_meta関数』を使うのが一般的です。

以下では、get_post_meta関数に関して書いています。

スポンサーリンク

特定の投稿のカスタムフィールドを出力

特定の投稿ページにおける、特定のキーからカスタムフィールドの値を取得には、「get_post_meta関数」とecho文を使います。

<?php echo get_post_meta(投稿のID,'キー名',値の取得数); ?>

そして、このコードをテーマのテンプレートファイル内で値を出力したい位置に書き込みます。

get_post_meta関数とは?

カスタムフィールドの名前を指定して、その項目に入力した値を得る(get)働きをします。

値は直接には出力されないので、出力(表示)したい場合はecho文などを使います

echo文とは?

文字列を表示(出力)させる場合に使われるPHP構文。

get_post_meta関数の説明

get_post_meta関数は、カスタムフィールドを表示させる基本的な関数。

次のように記述します。

get_post_meta(投稿のID,'キー名',値の取得数)

パラメータを3つ取り、1つ目が「投稿のID」、2つ目が「キー名(カスタムフィールドの名前)」。

また、3つ目は、trueかそれともfalseのどちらかを指定し、「値の取得数」を設定します。

カスタムフィールドは、同じキーに対して、複数の値を設定できますが、1番最初に設定した値だけ取得する場合は『true』、すべて取得する場合は『false』を指定します

パラメータ 内容
投稿のID カスタムフィールドを取得したい「投稿/固定ページのID番号」
キー(key)名 取得したい「カスタムフィールドの名前」
取得数 値の取得に関して、単独(true)がそれとも複数(false)か

ここでは、三つ目のパラーメータとしてtrueを指定する場合を取り上げます。falseを指定する場合の使い方は、後で解説します。

投稿/固定ページのID番号を知るには、確認したいページの編集画面のURLを見てください。『post=◯◯』と書かれている◯◯がID番号です。たとえば、URLにpost=2100と書かれていれば、そのページのID番号は2100となります。

たとえば、例をあげると…

たとえば、投稿/固定ページのID番号が「1」の投稿に、「price」という名前(キー名)のカスタムフィールドを作り、値を入力したとします。

この値をWebサイトに表示させるには、テーマのテンプレートファイル内で値を出力したい位置に、以下のようにget_post_meta関数を書き、echo文で呼び出します

<?php echo get_post_meta(1,'price',true); ?>

デザインを変更しやすくする

PHP文をdiv要素で囲み、id属性やclass属性をつければ、CSSでデザインもつけれますよ♪

<div id="◯◯" class="□ □">
<?php echo get_post_meta(1,'price',true); ?>
</div>

「投稿のID」を自動取得する

実際のところ、上記のように『ページのID』を指定して、get_post_meta関数を使う場合は、少ないです。普通に考えれば、カスタムフィールドを設定した値は、その個別のページごとに表示させたいですよね。

そこで登場するのが、get_the_ID関数

get_the_ID関数を使えば、ページのIDを自動取得してくれます。たとえば、投稿のIDが「201」のページの場合、get_post_meta関数の1つ目のパラメータに「201」を自動設定できます。

get_the_ID関数とは?

「投稿のID」を値として取得(get)したい場合に使われる関数。IDは、Webサイト内で固有の値なので、個々の投稿を識別するのに使われます。

たとえば、ページのIDが「10002」の場合は、「10002」という値を返してくれます。

その場合、1つ目のパラメータとしてget_the_ID関数を指定して、個々の投稿のIDを渡すようにします。

<?php echo get_post_meta(get_the_ID(),'キー名',true); ?>

たとえば、例をあげると…

たとえば、個々の投稿に、キー名「price」のカスタムフィールドを追加しているとします。

各々のページで、カスタムフィールドに入力した値を出力(表示)するには、出力したい場所に以下のコードを入れます。

<?php echo get_post_meta(get_the_ID(),'price',true); ?>

WordPressループ内でも使える

get_post_meta関数は、get_the_ID関数を使うことで、WordPressループ内でも問題なく使用できます。

その場合、WordPressループの中に、次のコードに「キー名」を入力して、記述してください。

<?php echo get_post_meta(get_the_ID(),'キー名',true); ?>
WordPressループとは?

WordPressの投稿を表示するために、使われるPHPコードのこと。WordPressループを利用すると、編集ページに記入した内容が個々のページに出力されます。

以下のような記述がされます。

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
ループ処理
<?php endwhile; ?>
<?php endif; ?>
スポンサーリンク

同じキー名で登録した値をすべて表示

『1つのキー(カスタムフィールドの名前)に対して、1つの値』というシバリはありません

WordPressのカスタムフィールド機能では、1つの投稿/固定ページに対して、同じ名前のカスタムフィールドを複数回追加できます。

たとえば、「order」という名前のカスタムフィールドを3回追加し、それぞれに「ハンバーガー」「ポテト」「コーラ」の値で保存できます。

3つ目の値をfalseにする

同じキー名(カスタムフィールド名)の「値」を複数回、追加登録していて、そのすべての値をWebサイトに表示させる場合も、上述のget_post_meta関数を使います。

前回との違いは、3つ目のパラメータ。

  • trueではなく、falseを渡す
  • 3つ目のパラーメータを記述しない

つまり、記述方法は、以下のどちらかになります。

get_post_meta(投稿のID,'キー名',false)
get_post_meta(投稿のID,'キー名')

さらに、ここからが重要ですが、この関数を前回と同様にecho文で出力すると、「Array」という文言しか表示されません。

同一の「キー名」で入力した複数の値は、配列(array)で保存されます。そのため、配列を出力するためにforeach文を使う必要があります。

foreach文とは?

配列要素を順番に1つずつ取り出すために使われる構文。「フォーイーチ」と読みます。

配列要素の数に応じて、ループを繰り返します。たとえば、配列の中に4つの値があれば、4回同じ動作を繰り返します。

たとえば、以下のように使います。

  foreach(取り出したい配列名 as 取り出した値を入れる変数){
  繰り返す処理;
}  

たとえば、例をあげると…

たとえば、カスタムフィールド名「food」に、複数の値を入力しているとします。

この場合、次のコードを使って、キー名「food」の値をすべて表示させます。

流れとしては、『変数を作成し、PHPのforeach文を使って、「food」の個々の要素を出力する』。

<?php
  $vegetables = get_post_meta(get_the_ID(),'food',false);
  foreach($vegetables as $vegetable){
  echo $vegetable;
}
?>

まず、変数$vegetablesを作成します。そして、この変数に、get_post_meta関数で「food」のカスタムフィールドの値をすべて格納します。

そして、foreach文を使って、$vegetablesに格納した個々の値(配列)を変数$vegetableとして出し、繰り返す処理として、echo文で$vegetableを表示(出力)させます。

たとえば、カスタムフィールド「food」に、「トマト」「キューリ」「ナスビ」という値を入力している場合は、「トマトキューリナスビ」と表示されます。

トマトキューリナスビ

このように、このコードだと、カスタムフィールドの値が横一列に並んでしまいます。

値を改行して、見やすくする

それぞれ値を改行して、縦並びに表示させたい場合は、次のように$vegetableの後に「.'<br>'」を追加します。

brタグ

文字列を改行させるために使われるHTMLタグ。

<?php
  $vegetables = get_post_meta(get_the_ID(),'food',false);
  foreach($vegetables as $vegetable){
  echo $vegetable.'<br>';
}
?>

注目すべきは、「.(ピリオド)」があること。このピリオドを結合演算子といいます。そして、<br>を文字列として扱うので、それぞれの前後に「‘(シングルクォーテーション)」を入れます。

結合演算子とは?

文字列を結合させるために使う演算子。地味な演算子ですが、非常に重要!

たとえば、「トマト」「キューリ」「ナスビ」という値を入力している場合は、次のようにリストで表示されます。

トマト
キューリ
ナスビ

カスタムフィールドの値をリストで表示

上記のように横並びで表示されると、見にくいですよね。

そこで、ul/li要素を使うことによって、複数のカスタムフィールドの値をリストで表示させます。

たとえば、例をあげると…

前回と同様に、「food」という名前のカスタムフィールドに、複数の値を追加しているとします。

キー名「food」の値をリストとして出力するには、ul/li要素を使って、次のようなコードになります。

前回との違いは、『ul要素で囲むことと、foreach文で繰り返す処理にli要素を記述すること』。それ以外は、基本、同じです。


<ul>
<?php 
  $vegetables = get_post_meta(get_the_ID(),'food',false); 
  foreach($vegetables as $vegetable){
  echo '<li>'.$vegetable.'</li>';
  }
?>
</ul>


まずは、ul/li要素として出力するため、ulタグでPHP文を囲む形で記述します。

次に、3行目で、変数を作成し、foreach文を使って、前回と同様に、繰り返し処理を行います。

<li></li>を文字列として扱うので、それぞれの前後に「’(シングルクォーテーション)」を入れます。そして、結合演算子「.(ピリオド)」を使って、liタグと”$vegetableの値”を結合します。

表示結果ですが、たとえば、「トマト」「キューリ」「ナスビ」という値を入力している場合は、次のようにリストで表示されます。

  • トマト
  • キューリ
  • ナスビ

最後に

このページで書かせていただいたのは、あくまでもカスタムフィールドを使った一例です。

カスタムフィールドは、アイデア次第で、未知なる可能性を秘めています。

たとえば、『サイドバーにページの内容に合ったアフィリエイト広告を入れる』なんてことにも使えます。

スポンサーリンク
ページ先頭へ