2026年9月13日

2026年9月13日

WordPressのBlock Bindings APIでカスタムフィールドをブロックに直接表示する方法

Block Bindings APIを使うと、段落・見出し・画像・ボタンといったコアブロックの中身を、カスタムフィールド(投稿メタ)の値に直接結び付けられます。必要なのは、メタを register_post_meta() で show_in_rest 付きで登録することと、ブロックの metadata.bindings に参照先を書くことの2点です。独自ブロックを作らずに「書籍の著者名」「イベントの開催日」のような値をテンプレートに差し込めるようになります。この記事では、基本の手順、ブロックテーマのテンプレートでの使い方、独自のデータソースを登録する方法、うまく表示されないときの確認点を説明します。

Block Bindings APIの概要と対応状況

Block Bindings APIはWordPress 6.5で導入された仕組みで、ブロックの属性値を外部の「ソース」から取得して描画時に差し替えます。コアには、投稿メタを読む core/post-meta と、同期パターンの一部を上書きする core/pattern-overrides などのソースが用意されています。

導入時点で対応していたのは、段落と見出しのテキスト、画像のURLや代替テキスト、ボタンのテキストとリンク先などです。その後のバージョンで、エディター上で値を表示・編集できるようになったり、ブロックの設定サイドバーから接続先を選べるようになったりと機能が広がっています(2026年10月現在)。対応するブロックや属性、画面の表記はバージョンごとに変わるため、お使いのバージョンの開発者向けリリースノート(Make WordPress Core)で確認してください。

旧来のメタボックスやショートコードとの違いは、ブロックの見た目(色・余白・タイポグラフィなど)をそのまま使い、中身だけをデータに置き換えられる点です。デザインはサイトエディターで調整し、データは投稿ごとに入力する、という分担ができます。

手順1:投稿メタを登録する

バインドできるのは、show_in_rest を有効にして登録したメタです。登録していないメタや、キー名がアンダースコアで始まる保護されたメタは、core/post-meta ソースでは表示されません。コードは子テーマの functions.php か独自プラグインに書きます。

add_action( 'init', function () {
	register_post_meta( 'post', 'book_author', array(
		'type'              => 'string',
		'single'            => true,
		'show_in_rest'      => true,
		'default'           => '',
		'sanitize_callback' => 'sanitize_text_field',
		'auth_callback'     => function ( $allowed, $meta_key, $post_id ) {
			return current_user_can( 'edit_post', $post_id );
		},
	) );
} );

sanitize_callback で保存時に値を整え、auth_callback でその投稿を編集できるユーザーだけが値を変更できるようにしています。show_in_rest を有効にすると、REST APIを通じて値を読めるようになるので、公開してはいけない情報(個人の連絡先など)はバインド用のメタにしないでください。

カスタム投稿タイプに登録する場合は、第1引数を投稿タイプ名にし、その投稿タイプの supports に custom-fields を含めておきます。これがないとREST APIにメタが出ず、エディターからバインドの値を扱えません。

手順2:ブロックにバインドを書く

ブロックエディターでコードエディター表示に切り替え、段落ブロックを次のように書きます。

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

bindings の中のキー(ここでは content)が置き換える属性名、source がデータの取得元、args.key がメタのキーです。ボタンなら text や url、画像なら url や alt を指定します。複数の属性を同時にバインドすることもできます。

フロントでは描画時にメタの値が差し込まれます。HTML内の <p></p> が空でも問題ありません。バージョンによっては、ブロックの設定サイドバーに接続先を選ぶ欄があり、コードを書かずに同じ設定ができます。

値の入力は、エディターの投稿サイドバーにある「カスタムフィールド」パネル(表示オプションで有効化が必要な場合があります)か、比較的新しいバージョンではバインドしたブロックに直接入力して行えます。

手順3:ブロックテーマのテンプレートで使う

効果が大きいのは、ブロックテーマのテンプレートにバインドを書く使い方です。たとえば子テーマの templates/single.html に上の段落を入れておくと、投稿ごとに book_author の値が表示されます。テンプレートやクエリループの中では、ブロックが「今どの投稿を表示しているか」という情報(ブロックコンテキストの postId と postType)を受け取り、それを使って各投稿のメタを読みます。

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
	<!-- wp:post-title {"level":1} /-->
	<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"book_author"}}}}} -->
	<p></p>
	<!-- /wp:paragraph -->
	<!-- wp:post-content /-->
</div>
<!-- /wp:group -->

親テーマのテンプレートを直接編集すると更新で上書きされるため、子テーマにコピーして編集するか、サイトエディターで編集します(サイトエディターでの変更はデータベースに保存され、テーマのファイルより優先されます)。毎回コードエディターでJSONを書くのが面倒なら、バインド済みの段落をブロックバリエーションとして登録しておくと、ブロック挿入メニューから呼び出せます。

クラシックテーマでも、投稿本文の中のブロックにバインドを書けば動作します。テンプレート全体に使えるのはブロックテーマの利点です。

手順4:独自のソースを登録する

メタ以外の値(サイトの設定、計算した値、外部APIの結果をキャッシュしたものなど)をバインドしたい場合は、register_block_bindings_source() で独自のソースを登録します。

add_action( 'init', function () {
	register_block_bindings_source( 'my-theme/book-info', array(
		'label'              => __( '書籍情報', 'my-theme' ),
		'uses_context'       => array( 'postId' ),
		'get_value_callback' => 'my_theme_book_info_value',
	) );
} );

function my_theme_book_info_value( array $source_args, $block_instance, string $attribute_name ) {
	$post_id = isset( $block_instance->context['postId'] ) ? (int) $block_instance->context['postId'] : 0;
	$field   = isset( $source_args['field'] ) ? $source_args['field'] : '';

	// 公開済みの投稿か、閲覧権限のあるユーザー(プレビュー時など)にだけ値を返す
	if ( ! $post_id || ( ! is_post_publicly_viewable( $post_id ) && ! current_user_can( 'read_post', $post_id ) ) ) {
		return null;
	}

	switch ( $field ) {
		case 'pages':
			$pages = (int) get_post_meta( $post_id, 'book_pages', true );
			return $pages ? esc_html( sprintf( '%dページ', $pages ) ) : null;
		case 'shop_url':
			$url = get_post_meta( $post_id, 'book_shop_url', true );
			return $url ? esc_url_raw( $url ) : null;
	}

	return null;
}

ソース名は 名前空間/名前 の形式で、ほかのプラグインと重ならない接頭辞を付けます。uses_context に postId を指定すると、テンプレートやクエリループの中で表示中の投稿IDを受け取れます。ブロック側では "source":"my-theme/book-info","args":{"field":"pages"} のように指定します。

段落や見出しのテキストに入る値はHTMLとして差し込まれるため、プレーンテキストを返すときは esc_html() を通しておきます。URLを返す場合は esc_url_raw() で使えないスキームを除いています。null を返すと、ブロックに保存されている元の内容がそのまま表示されます。非公開の投稿の値を誤って表示しないよう、投稿の公開状態と閲覧権限も確認しています。独自ソースのエディター上での表示は、JavaScript側でもソースを登録すると改善できますが、この部分のAPIはバージョンによる変化が大きいので、利用前に開発者ドキュメントを確認してください。

表示されないときの確認ポイント

  • メタが登録されていない: register_post_meta() の show_in_rest が有効か、キー名の綴りがブロック側の args.key と一致しているかを確認します。
  • キー名がアンダースコアで始まる: 保護されたメタとして扱われ、表示されません。アンダースコアなしの名前で登録し直します。
  • カスタム投稿タイプで値が出ない: 投稿タイプの supports に custom-fields があるか、register_post_meta() の第1引数がその投稿タイプ名かを確認します。
  • 対応していない属性を指定している: お使いのバージョンでバインドに対応していないブロックや属性は、指定しても置き換わりません。
  • キャッシュ: ページキャッシュを使っている場合、メタを更新しても古い表示が残ることがあります。

ACFなどのプラグインとの関係

Advanced Custom Fields(ACF)は、比較的新しいバージョンでBlock Bindings APIのソース(acf/field)に対応しています。ACFで作ったフィールドを同じ仕組みでブロックに表示できますが、セキュリティ上の理由から、フィールドごとにエディターやバインドからのアクセスを許可する設定が必要になる場合があります。対応バージョンと設定名はACFの公式ドキュメントで確認してください。

本番サイトに導入する前に、バックアップを取り、ステージング環境で表示と編集の両方を確認してください。

まとめ

  • Block Bindings APIはWordPress 6.5で導入され、コアブロックの属性を投稿メタなどの値に結び付けられる
  • メタは register_post_meta() で show_in_rest を有効にして登録し、sanitize_callback と auth_callback を設定する
  • ブロックの metadata.bindings に source と args.key を書く。ブロックテーマのテンプレートに置くと投稿ごとの値が表示される
  • 独自データは register_block_bindings_source() でソースを登録し、返す値は用途に応じてエスケープする
  • 対応ブロックやエディターの機能はバージョンで変わるので、リリースノートで確認する

お気軽にご相談ください

お見積りへ お問い合わせへ
▲