1 つのブロックに 2 つの異なるバインディングを登録する。カスタム URL と代替テキストを画像ブロックに追加。

基本

php編集

register_meta(
	'post',
	'projectslug_image_url',
	array(
		'show_in_rest'      => true,
		'single'            => true,
		'type'              => 'string',
		'sanitize_callback' => 'esc_url_raw'
	)
);

register_meta(
	'post',
	'projectslug_image_alt',
	array(
		'show_in_rest'      => true,
		'single'            => true,
		'type'              => 'string',
		'sanitize_callback' => 'wp_strip_all_tags'
	)
);

コードエディタ編集

<!-- wp:image {	"metadata":{
		"bindings":{
			"url":{
				"source":"core/post-meta",
				"args":{
					"key":"projectslug_image_url"
				}
			},
			"alt":{
				"source":"core/post-meta",
				"args":{
					"key":"projectslug_image_alt"
				}
			}
		}
	}
} -->
<figure class="wp-block-image">
<img src="" alt="" />
</figure>
<!-- /wp:image -->

カスタムフィールド登録

• projectslug_image_url
  https://prof.sunakoto.com/wp-content/uploads/2023/06/image-8.jpeg
• projectslug_image_alt
  天気の良い日の機嫌の良い傘

デフォルト値の追加

php編集

defaultの新しい引数を追加

  register_meta(
	'post',
	'projectslug_image_url_default',
	array(
		'show_in_rest'      => true,
		'single'            => true,
		'type'              => 'string',
		'sanitize_callback' => 'esc_url_raw',
               'default'           => get_theme_file_uri( 'images/bg-top.jpg' )
	)
); 

コードエディタ編集

<!-- wp:image {	"metadata":{
		"bindings":{
			"url":{
				"source":"core/post-meta",
				"args":{
					"key":"projectslug_image_url_default"
				}
			},
			"alt":{
				"source":"core/post-meta",
				"args":{
					"key":"projectslug_image_alt"
				}
			}
		}
	}
} -->
<figure class="wp-block-image">
<img src="" alt="" />
</figure>
<!-- /wp:image -->

画像URL未登録の場合はデフォルト画像を表示

完了。