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

公開日:2024(令和6)年9月15日/最終更新日:

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



WordPress6.5から恐らく使えるようになったBlock Bindings API。簡単に言えば、特定のブロックで記述にちょっと手を加えることで、カスタムフィールドの値を引っ張り出して表示できる機能です。

それならショートコードでやってるし..という私みたいな方が多いかも知れませんが、ショートコードで困るのが、クエリーループブロック内で機能しない(それぞれの投稿のカスタムフィールド値を引っ張ってきてくれない)ので、ブロックテーマのアーカイブやブログ一覧ではデータが表示できないことです。

これを解消するため(ではないかも..)に追加されたのがBlock Bindings APIで、これを使うとあら不思議、単一の投稿や固定ページでも、ブロックテーマのホームやアーカイブに使うことの多いクエリーループブロックでもきちんとそれぞれのカスタムフィールド値を表示してくれるんです。

いろいろな参考ページを見たり実際に公式のマニュアルなどを見ながらBlock Bindings APIを使ってみたけどイマイチ分からなかったという方のために、できるだけ細かい手順で説明していこうと思います。

また、文末には私がハマったところ、日付などをいい感じに出力する(取得したデータを変換する)方法など、自身のメモを兼ねて紹介してますのでそちらも参考になれば幸いです。

本ページで掲載しているコードは、以下に了承した上で使用ください

  • コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
  • コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
  • コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
  • コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
  • 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります(コメント欄等から質問いただいても基本回答は致しません)
  • 掲載しているコードの転載を禁じます(SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です)

段落ブロックにカスタムフィールドのデータを紐づけて表示する手順

WordPress6.6の段階では、Block Bindings APIを使用すると、段落ブロックだけでなく、いくつかのブロックでもカスタムフィールドのデータを紐づけて表示させることができるようですが、基本が分かれば見えてくると思うので、ひとまず段落ブロックでの紐づけをしてみましょう。

【手順1】カスタムフィールドをサイトに登録する

このBlock Bindings APIを使用するには、まず、サイト(WordPress)にそのカスタムフィールドが存在することを登録する必要があります。これを忘れるとうまく動作しません。

例として以下のコードを有効化しているテーマのfunctions.phpへ追加して、「test-field」というカスタムフィールド名(キー)を登録します。

function pwcn_register_post_meta(){
register_meta(
    'post',//必ずpostにする
    'test-field',
    [
        'show_in_rest' => true,//必ずtrueにする
        'single'       => true,//必ずtrueにする
        'type'         => 'string',
        'default'      => 'Default text field',
    ]
);

}
add_action('init','pwcn_register_post_meta');

これで「test-field」というカスタムフィールドキーが登録され、そのサイトで認識されるようになります。

コード中の必ず〇〇にするという部分はその通りにしないとうまくいかないので気を付けてください

【手順2】新規投稿を作成し、カスタムフィールドの値を追加する

投稿を新規作成します。

編集画面の下に「カスタムフィールド」という欄がない(デフォルトでは非表示になっています)場合は、画面右上の三点リーダーをクリック後、一番下の「設定」をクリックし、下図のように「一般」タブ内の下の方にある「カスタムフィールド」を有効にしてください。

Block Bindings APIの使い方、ハマりどころ、取得したデータ変換の方法例など(メモ)|Personal WP Customization Notes (PWCN)

有効にすると(編集画面のリロードを求められるので実行)、以下のように投稿編集画面下部にカスタムフィールドの欄が追加されます。

Block Bindings APIの使い方、ハマりどころ、取得したデータ変換の方法例など(メモ)|Personal WP Customization Notes (PWCN)

下図のように、表示されたカスタムフィールドパネルの最下部にある欄内の「新規追加」をクリックし、「名前」に「test-field」、「値」に適当な文字列(画像では「test-fieldの値」)を入力し、「カスタムフィールドを追加」をクリックします。

Block Bindings APIの使い方、ハマりどころ、取得したデータ変換の方法例など(メモ)|Personal WP Customization Notes (PWCN)
Block Bindings APIの使い方、ハマりどころ、取得したデータ変換の方法例など(メモ)|Personal WP Customization Notes (PWCN)

追加後、カスタムフィールドパネル内に「名前」が「test-field」、「値」が入力した値になっていることを確認して、次へ進んでください。

カスタムフィールドの内容を編集画面上に表示させる

ここまででカスタムフィールドの登録、カスタムフィールドの値の追加が終わったので、いよいよ投稿編集画面や閲覧画面への表示をします。

Block Bindings APIを使用するには、ブロックエディターを下図のように画面右上の三点リーダーをクリック後「コードエディター」を選択して、一旦コードエディターへ変更する必要があります(元のエディターへ戻すには三点リーダークリック後「ビジュアルエディター」をクリックします)。

Block Bindings APIの使い方、ハマりどころ、取得したデータ変換の方法例など(メモ)|Personal WP Customization Notes (PWCN)

すると、ブロックではなく、1つの入力窓へ編集画面が切り替わります。

以下が基本となるコードですので、コードエディターへそのまま貼り付けます。

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

貼り付け終わったら、再度エディターのモードを「コードエディター」から「ビジュアルエディター」へ戻します。

すると...元のブロック画面に切り替わり、編集画面上には先ほど「test-field」の値欄に入力した文字列が表示されているはずです。

これがBlock Bindings APIの機能です。

プレビュー表示させると、きちんとフロントエンド側(閲覧画面側)でも値が表示されるのを確認できます。

これが段落ブロックを使ったBlock Bindings APIの基本的な操作手順です。

このブロックをコピーして、他の投稿へ貼り付けたり、クエリーループの中に貼り付ければ、「test-field」というキーで値のあるものに限り、きちんとデータが表示されるようになります。便利ですね~~。

画面の切り替えや必要な措置が分かれば、段落以外でも使えますので、公式マニュアル等を見て試してみてください。

QA Analytics QA Analytics

register_meta()で登録していないカスタムフィールドでは使えない点に注意

ここまでBlock Bindings APIの基本的な使い方(段落ブロック編)を紹介してきましたが、今回のように新規にカスタムフィールドを登録して使用するよりも、今まで入力パネルなどから追加した既存のカスタムフィールドの値を表示させたいという利用ケースが多いのではないでしょうか?

ただ、やってみると...値が表示されず、編集画面にはカスタムフィールドキーが表示され、閲覧画面には何も表示されないという事態になることが多々あります。

これは、前述の手順の中にある「カスタムフィールドをサイトに登録する」という作業が行われていないことが原因です。

自作で入力窓(カスタムフィールド用のメタボックス)を追加した場合でも、プラグインなどで追加されている場合でも、ショートコードなどで表示させる分には、この登録作業が必要ないため、行われていないケースが多々あります(正直私も長年WordPressを使ってきて、初めてregister_meta()という関数を知りました..)

ただ、前述したように、Block Bindings APIを利用してカスタムフィールドの値を取得・表示するためには、register_meta()関数を使ってWordPress(サイト)自体にカスタムフィールド名(キー)の登録を行う必要がありますから、登録されていなければ新たに登録することが必須となります。

参考:register_meta( string $object_type, string $meta_key, array $args, string|array $deprecated = null ): bool

見落としがちなので、うまくいかない場合はぜひチェックしてみてくださいね。

取得したカスタムフィールドの値を加工して出力するには

例えば日付として格納されているカスタムフィールドの値を、管理画面の設定で登録されている日付フォーマットで表示したい場合には「register_block_bindings_source()」という関数を使って取得した値を加工するための措置を行います。

/* 日付を加工するためのソースを登録 */
function pwcn_register_last_mod_block_bindings() {
	register_block_bindings_source( 
		'pwcnbindsource/moddate',
		array(
		'label'              => '',
		'get_value_callback' => 'pwcn_moddate_bind_data_callback'
	)
	);
}

/* 日付を管理画面のフォーマットにする */
function pwcn_moddate_bind_data_callback() {
	return '最終更新日:'.date_i18n(get_option( 'date_format' ));
}

上記をまずはテーマのfunctions.phpへ追加した上で、投稿編集画面(コードエディターに変更後)では以下のようにしてsourceに先ほどのregister_block_bindings_source()の第一引数(上記コードでは「pwcnbindsource/moddate」)を指定し、argsのkeyには、カスタムフィールド名(下記コードでは「last_modified」)を入れたコードを作ります。

<!-- wp:paragraph {
	"metadata":{
		"bindings":{
			"content":{
				"source":"habindsource/moddate",
				"args":{
					"key":"last_modified"
				}
			}
		}
	}
} -->
<p></p>
<!-- /wp:paragraph -->

つまりは、「last_modified」というカスタムフィールドの値を取得して、データを「habindsource/moddate」で指定している形に変換しなさいという流れになるんですね。

単純にカスタムフィールドの値を取得する場合のsourceの値は「core/post-meta」でしたから、そこに変換するおまじないを加えてあげればOKということですね。

この場合のpタグ内に何かの文字列を入れても無視されるので、「日付を管理画面のフォーマットにする」のコールバック関数上で文字列を指定する(この場合は「最終更新日:」という接頭辞)ようにします

以上、Block Bindings APIを利用したカスタムフィールドの表示方法でした。

今後使えるブロックも増えていくと思いますので、今のうちに使えるようにしておくといいかも知れません。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Block Theme Customize | Personal WP Customization Notes (PWCN)
ブロックテーマでサイトの背景画像を設定する5つの方法