Block Bindings API入門

カスタムフィールドに入れた「開催日」と「会場」を、記事の中に表示する。これまでなら、テーマのテンプレートにPHPを書くか、ショートコードを作るのが定番でした。

今回、single.php などのテンプレートには手を入れていません。PHPで書いたのは、カスタムフィールドを登録する9行だけです。使ったのは、WordPress 6.5で本体に入った「Block Bindings API（ブロックバインディング）」です。段落ブロックに「このカスタムフィールドの値を表示する」と指定すると、表示のときに値が差し込まれます。

記事を、そのまま収益に。

WordPressサイトで記事の有料販売ができる
無料のプラグイン「YOMERU」。

YOMERU

Block Bindings APIとは

Block Bindings APIは、ブロックの中身（属性）を、カスタムフィールドなどのデータと結び付ける仕組みです。たとえば段落ブロックの本文を、記事のカスタムフィールド「event_date」と結び付けると、ページを表示するたびにその値が段落として出力されます。

勉強会の記事を複製して、開催日と会場の2つの値だけを書き換えれば、次の回の記事になります。

結び付けられるブロック

WordPress 7.1.3の本体のコードでは、次のブロックと属性が対象になっていました。

ブロック	結び付けられる属性
段落	本文（content）
見出し	本文（content）
リスト項目	本文（content）
画像	画像ID、URL、タイトル、代替テキスト、キャプション
ボタン	リンク先URL、ボタンの文字、新しいタブで開くか、rel
投稿日	日時
ナビゲーションのリンク	リンク先URL
ナビゲーションのサブメニュー	リンク先URL

対象は、WordPress 6.9からフィルター（block_bindings_supported_attributes）で増やすこともできます。

結び付けられるデータ（ソース）

値の取り出し元を「ソース」と呼びます。本体には、次の4つが用意されています。

ソース	取り出せる値
core/post-meta	記事のカスタムフィールド
core/post-data	記事の公開日、更新日、URL（WordPress 6.9から）
core/term-data	カテゴリーやタグの名前、URL、説明、記事数など（WordPress 6.9から）
core/pattern-overrides	同期パターンの中で、ページごとに上書きした内容

自分でソースを作ることもできます。

カスタムフィールドの値を表示する手順

Localで作ったテストサイトで、イベントの「開催日」と「会場」を記事に表示してみました。

1. カスタムフィールドを登録する

子テーマの functions.php か、自作のプラグインに次のコードを追加します。

add_action( 'init', function () {
	foreach ( array( 'event_date', 'event_place' ) as $key ) {
		register_post_meta( 'post', $key, array(
			'show_in_rest' => true,
			'single'       => true,
			'type'         => 'string',
		) );
	}
} );

「show_in_rest」は必ず true にします。本体のコードでは、REST APIに公開されていないカスタムフィールドは、ブロックに結び付けても値が表示されません。名前が「_」（アンダースコア）で始まる、管理画面に出ないカスタムフィールドも対象外です。

show_in_rest を true にすると、公開した記事のカスタムフィールドの値は、REST API（/wp-json/wp/v2/posts）から誰でも読めるようになります。外に出したくない値は、結び付けに使わないようにします。

2. ブロックにカスタムフィールドを結び付ける

段落ブロックを選び、右の設定欄の「属性」で「+」を押して「content」を追加します。追加した content（①）を押し、「投稿メタ」（②）から結び付けたいカスタムフィールド（③）を選びます。

属性パネルでカスタムフィールドを選ぶ

選び終わると、属性の欄に「content」と「event_date」が表示されます（②）。段落のブロックをクリックして入力すると、その値がそのままカスタムフィールドに保存されました（①）。

結び付けた段落と属性パネル

保存したあとの段落ブロックの中身は、次のようになっていました。右上「︙」→「コードエディター」で見られます。

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"event_date"}}}}} -->
<p></p>
<!-- /wp:paragraph -->

「metadata」の中の「bindings」で、段落の本文（content）を、カスタムフィールド（core/post-meta）の「event_date」と結び付けています。コードエディターでこの形を直接書いても、同じように結び付けられます。

3. カスタムフィールドに値を入れる

上のとおり、結び付けた段落に直接入力すれば値が入ります。投稿の編集画面の「カスタムフィールド」欄からも入れられます。テストサイトでは、WP-CLIでも入れてみました。

wp post meta update 109 event_date '2026年11月14日（土）14:00〜'

WP-CLIの使い方は、こちらの記事で紹介しています。

2026.10.24

2026.10.25

WP-CLI入門｜LocalのSite shellで始める5つの基本操作

WordPressでプラグインを入れたり、テスト用の記事を増やしたりするとき、管理画面で同じ操作を何度も繰り返すことはありませんか。そんな作業を、短い命令文でまとめて進められるのが「WP-CLI」です。「コマンド」と聞くと難しく感じるかもしれませんが、Localで作ったテストサイトがあれば、...

4. 表示を確かめる

編集画面に戻ると、段落の中にカスタムフィールドの値が表示されていました（①）。ブロックを選ぶと、右の設定欄に「属性」という項目が出て、本文（content）が event_date と結び付いていることが分かります（②）。

カスタムフィールドと結び付けた段落ブロック

サイトを開くと、値がそのまま段落として出力されています（①）。

サイトに表示されたカスタムフィールドの値

独自のソースを作る

カスタムフィールド以外の値も、ソースを自分で登録すれば結び付けられます。例として、サイト名を返すソース「demo/site-info」を作りました。

add_action( 'init', function () {
	register_block_bindings_source( 'demo/site-info', array(
		'label'              => 'サイト情報',
		'get_value_callback' => function ( array $source_args ) {
			if ( 'name' === ( $source_args['key'] ?? '' ) ) {
				return get_bloginfo( 'name' );
			}
			return null;
		},
	) );
} );

ブロックの側では、ソースの名前と、渡したい値（ここでは「key」）を指定します。

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"demo/site-info","args":{"key":"name"}}}}} -->
<p></p>
<!-- /wp:paragraph -->

サイトを開くと、段落にサイト名「テストサイト」が表示されました（「4. 表示を確かめる」の2枚目の画像の②）。

編集画面では、値の代わりにソースの名前「サイト情報」が表示されていました（「4. 表示を確かめる」の1枚目の画像の③）。編集画面でも値を表示したいときは、JavaScriptの側でも registerBlockBindingsSource でソースを登録します。書き方は、記事の最後に載せたBlock Editor Handbookにあります。