概要
get_block_wrapper_attributes関数は、ブロックのラッパー要素向けの属性を取得するために使用されます。この関数は、特定のブロック内で動的な属性を簡単に生成・取得することを可能にします。例えば、クラス名やスタイル、データ属性を指定する際に役立ちます。
よく使用される用途の例としては以下のようなものがあります：
- ブロックのスタイルを変更する際のクラス属性の設定
- レイアウトに応じて異なるデータ属性を付与する
- カスタムブロック内でのIDの設定
- JavaScriptとの連携のためのデータ属性追加
- メディアオプションに基づく CSS クラスの動的生成
- アクセシビリティ向上のための ARIA 属性付与
- レスポンシブデザインにおける条件付きスタイルの設定
- コンテンツの構造に基づいたカスタム属性の追加
構文
get_block_wrapper_attributes( $attributes = array(), $echo = true );
パラメータ
$attributes(配列): 取得する属性の配列。$echo(boolean): 属性を直接出力するかどうか。デフォルトはtrue。
戻り値
- 属性の文字列（例:
class="class1 class2" id="custom-id"）
関連する関数
使用可能なバージョン
- WordPress 5.0以降
コアファイルのパス
wp-includes/blocks.php
この関数のアクションでの使用可能性
| アクション | 使用例 |
|---|---|
| mu_plugin_loaded | |
| registered_post_type | |
| plugins_loaded | |
| wp_roles_init | |
| setup_theme | |
| after_setup_theme | |
| set_current_user | |
| init | |
| register_sidebar | |
| wp_loaded | |
| send_headers | |
| parse_query | |
| pre_get_posts | |
| wp | 〇 |
| template_redirect | |
| get_header | |
| wp_head | 〇 |
非推奨・削除されたバージョン: 特になし
サンプルコード
サンプル1: ベーシックなラッパー属性の取得
$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => 'my-class' ) );
echo '<div ' . $wrapper_attributes . '></div>';
このコードは、my-classというクラスを持つdiv要素を生成します。
サンプル2: データ属性の追加
$wrapper_attributes = get_block_wrapper_attributes( array( 'data-custom' => 'value' ) );
echo '<div ' . $wrapper_attributes . '></div>';
このコードは、カスタムデータ属性data-customを持つdiv要素を生成します。
サンプル3: エコー無しでの利用
$wrapper_attributes = get_block_wrapper_attributes( array( 'id' => 'unique-id' ), false );
echo '<div ' . $wrapper_attributes . '></div>';
この例では、IDがunique-idのdiv要素を出力しますが、echo引数をfalseに設定して別途出力しています。
サンプル4: 複数の属性を同時に設定
$wrapper_attributes = get_block_wrapper_attributes( array(
'class' => 'class1 class2',
'style' => 'background-color: red;'
) );
echo '<div ' . $wrapper_attributes . '></div>';
このコードは、複数の属性（クラスとスタイル）を持つdiv要素を生成します。
サンプル5: 動的なスタイルの適用
$dynamic_style = 'color: blue;';
$wrapper_attributes = get_block_wrapper_attributes( array( 'style' => $dynamic_style ) );
echo '<div ' . $wrapper_attributes . '></div>';
このコードは、動的に生成したスタイルを持つdiv要素を生成します。