wp_enqueue_block_style_variation_styles()


WordPressの関数wp_enqueue_block_style_variation_styles()は、ブロックのスタイルバリエーションのスタイルシートをエンキューするために使用されます。この関数を使うと、特定のブロックスタイルのバリエーションに関連するスタイルをテーマまたはプラグインでロードできます。

構文

wp_enqueue_block_style_variation_styles( string $block_name, string $variation_name );

引数の説明:

  • $block_name (string) — スタイルバリエーションを追加するブロックの名前。
  • $variation_name (string) — 追加するスタイルバリエーションの名前。

例1: ブロックスタイルバリエーションのスタイルシートをエンキュー

このコードは、特定のブロック「core/paragraph」とそのスタイルバリエーション「highlight」のスタイルシートをエンキューします。

wp_enqueue_block_style_variation_styles( 'core/paragraph', 'highlight' );

例2: カスタムブロックのスタイルバリエーションをエンキュー

カスタムブロック「myplugin/custom-block」とそのスタイルバリエーション「wide」のスタイルシートをエンキューします。

wp_enqueue_block_style_variation_styles( 'myplugin/custom-block', 'wide' );

例3: ブロックのスタイルバリエーションに応じて異なるCSSをロード

異なるブロックのスタイルバリエーションに基づいて、異なるCSSファイルをエンキューします。

if ( 'highlight' === get_post_meta( get_the_ID(), '_wp_block_style', true ) ) {
    wp_enqueue_block_style_variation_styles( 'core/paragraph', 'highlight' );
} else {
    wp_enqueue_block_style_variation_styles( 'core/paragraph', 'default' );
}

例4: 複数のカスタムブロックスタイルバリエーションをエンキュー

この例では、カスタムブロック「myplugin/custom-block」の複数のスタイルバリエーション「wide」と「boxed」をエンキューします。

wp_enqueue_block_style_variation_styles( 'myplugin/custom-block', 'wide' );
wp_enqueue_block_style_variation_styles( 'myplugin/custom-block', 'boxed' );

例5: スタイルバリエーションに関連するCSSを条件付きでエンキュー

条件によって、特定のスタイルバリエーションのCSSファイルをエンキューします。

if ( has_block( 'core/paragraph' ) && is_single() ) {
    wp_enqueue_block_style_variation_styles( 'core/paragraph', 'highlight' );
}

注意点:

  • 関数は、ブロックのスタイルバリエーションの名前が正しく指定されている場合にのみ機能します。
  • スタイルシートのエンキューが成功するためには、ブロックとそのスタイルバリエーションがWordPressで正しく登録されている必要があります。

関連機能：