カスタムフィールドに保存した値を投稿本文内へショートコードで呼び出すコード

WordPressの便利機能の1つであるカスタムフィールド。

通常は以下のようにして使うことが多いのではないでしょうか？

1. プラグインやコードを使って入力欄を用意して、値を入力・保存しておく
2. カスタムフィールドの値を出力して表示させるテンプレートを用意する
3. テンプレート内に呼び出すコードを挿入する

WordPressでは、セキュリティ対策として、投稿や固定ページ本文内にPHPコードを直接記述できないようになっているので、この手順が至極スタンダードな方法なのですが、できれば自由に本文内で呼び出せたら便利ですよね？

そこで今回は、簡単なコードをテーマのfunctions.phpへ追加するだけで、カスタムフィールドに保存されている値を本文内へショートコードで出力する方法を紹介します。

ついでに別の投稿にあるカスタムフィールドの値も引っ張り出して表示できるようにしているので、比較表などを作る場合にも便利だと思います。

データのとり方（保存方法）が特異である「Advanced Custom Fields」プラグインの情報出力については対応していません

本ページではショートコードの作り方をメインに紹介していますが、文末ではWordPress6.5以降使用できるようになったBlock Bindings APIについても触れていますので、使いやすい方で実装してください

カスタムフィールドの値を呼び出すショートコードの作成方法

カスタムフィールドに挿入した値を投稿本文上で表示するには

1. カスタムフィールドの値を呼び出すためのショートコードを生成するプログラムを追加する
2. 1で作成したショートードを本文内へ挿入して、値を呼び出す

という作業が必要です。順に説明していきます。

ショートコードで出力するためのプログラムをテーマへ追加する

え？こんなに簡単なコードでいいの？位のコードを有効化しているテーマのfunctions.phpへ追記するだけで、カスタムフィールドの値をショートコードで出力することができます。

/*** fieldショートコードでカスタムフィールドの値を表示 ***/
function ha_show_shortcode_field($atts){
	extract(shortcode_atts(array(
	'post_id' => '',
	'field' => '',
	), $atts));

	if(!empty($field)){
		global $post;
		$post_id = ('' === $post_id) ? $post->ID : $post_id;
		return get_post_meta($post_id, $field, true);
	}
}
add_shortcode('c-field', 'ha_show_shortcode_field');

基本的には、Get Custom Field Value with Shortcodeというページのコードを参考にさせていただいていますが、以下のような点に工夫を加えています。

• ショートコード内の「field」パラメーターにカスタムフィールドキー（名前）が指定されていない場合は何も出力しない
• 引っ張る投稿のカスタムフィールドにカスタムフィールドキーがない（値がない）場合には何も出力しない

こうしておくことで、誤ったキーを指定した場合や、値がない場合でもノーメンテナンスで使うことができます。

つまり、上記コードを削除しなければ、本文内へ記述したショートコードが無効の場合には何も表示されないことになるため、そのカスタムフィールド名を使わなくなった場合でも、過去の投稿をすべて見直すといった作業をする必要がないように配慮しています。

カスタムフィールドの値をショートコードで表示させる

投稿本文内へ以下のショートコードを追加して、パラメーターを設定すれば、カスタムフィールドに保存してある値を表示できます。

[c-field  field='〇〇' post_id='××']

• パラメーター：field=’〇〇’の〇〇には、カスタムフィールドのキーを入力します
• パラメーター：post_id=’××’の××には、特定の投稿IDを入力します（省略すると現在の投稿IDのカスタムフィールド値を表示します）

コードの追加が不安な方にはプラグインもあります

前述の通り、簡単なコードを有効化しているテーマのfunctions.phpへ追加すれば、カスタムフィールドの値をショートコードで出力できるようになりますが、中にはコードの追加は不安という方もみえるでしょう。

そんな時はWordPress公式サイト内で配布されている「Embed Custom Field」というプラグインを追加すれば同じことができるようになります。

以下に私が「Embed Custom Field」を試用した際の印象などを書いたレポートページがありますので、参考にしてみてください。

カスタムフィールドに入力した値をショートコードで本文内へ表示するプラグイン「Embed Custom Field」

Block Bindings APIを使う方法

WordPress6.5から利用できるようになったBlock Bindings APIという機能。これを使うと、ショートコードではなく、ブロックエディター上に直接値を出力できるようになります。

さらにこのBlock Bindings APIは、ショートコードでは出来なかったクエリーループブロック内でも、それぞれのコンテンツの紐づくカスタムフィールドの値を出力できるようになるのでとても便利ですから、以下のページを参考に使って見てください。

Block Bindings APIの使い方、ハマりどころ、取得したデータ変換の方法例など（メモ）