wp_enqueue_block_style()


WordPressのwp_enqueue_block_style()関数は、ブロックエディタ用のスタイルをキューに追加するために使用されます。この関数は、特定のブロックに対してカスタムスタイルを適用する際に役立ちます。

構文

wp_enqueue_block_style( string $block_name, array $args );

引数の説明:

  • $block_name(string) — スタイルを適用するブロックの名前。
  • $args(array) — スタイルの詳細を指定する配列。以下のキーを含むことができます:
    • handle — スタイルのハンドル名。
    • src — スタイルシートのURL。
    • deps — 依存するスタイルシートのハンドル名の配列。
    • version — スタイルシートのバージョン。
    • media — スタイルシートのメディアタイプ。

例1: 基本的なブロックスタイルの追加

この例では、core/paragraphブロックにカスタムスタイルを追加します。

wp_enqueue_block_style('core/paragraph', array('handle' => 'my-paragraph-style', 'src' => get_template_directory_uri() . '/styles/paragraph.css'));

例2: 依存関係を持つスタイルの追加

この例では、core/headingブロックに依存関係を持つスタイルを追加します。

wp_enqueue_block_style('core/heading', array('handle' => 'my-heading-style', 'src' => get_template_directory_uri() . '/styles/heading.css', 'deps' => array('wp-block-library')));

例3: バージョン指定付きのスタイル追加

この例では、core/imageブロックにバージョン指定付きのスタイルを追加します。

wp_enqueue_block_style('core/image', array('handle' => 'my-image-style', 'src' => get_template_directory_uri() . '/styles/image.css', 'version' => '1.0.0'));

例4: メディアタイプを指定したスタイル追加

この例では、core/quoteブロックにメディアタイプを指定してスタイルを追加します。

wp_enqueue_block_style('core/quote', array('handle' => 'my-quote-style', 'src' => get_template_directory_uri() . '/styles/quote.css', 'media' => 'screen'));

例5: 複数のブロックにスタイルを追加

この例では、複数のブロックに同じスタイルを適用します。

wp_enqueue_block_style('core/paragraph', array('handle' => 'shared-style', 'src' => get_template_directory_uri() . '/styles/shared.css')); wp_enqueue_block_style('core/heading', array('handle' => 'shared-style', 'src' => get_template_directory_uri() . '/styles/shared.css'));

例6: 条件付きでスタイルを追加

この例では、特定の条件が満たされた場合にのみスタイルを追加します。

if(is_single()){ wp_enqueue_block_style('core/list', array('handle' => 'single-post-list-style', 'src' => get_template_directory_uri() . '/styles/single-list.css')); }

例7: テーマ内のスタイルを追加

この例では、テーマ内のスタイルをブロックに追加します。

wp_enqueue_block_style('core/group', array('handle' => 'theme-group-style', 'src' => get_stylesheet_directory_uri() . '/styles/group.css'));

注意点

  • スタイルのハンドル名は一意である必要があります。
  • スタイルの依存関係を正しく設定しないと、スタイルが正しく読み込まれない場合があります。
  • スタイルのバージョン管理は、キャッシュの問題を避けるために重要です。

関連機能：