---
title: "wp_enqueue_block_style()で各ブロック用のスタイルを読み込む"
canonical_url: "https://olein-design.com/blog/wp_enqueue_block_style"
language: "ja"
date_published: "2024-06-10T12:15:46+09:00"
date_modified: "2024-06-10T12:15:48+09:00"
content_type: "post"
author: "久野晃司"
taxonomies:
  category:
    - "WordPress"
  post_tag:
    - "WordPress functions"
---

# wp_enqueue_block_style()で各ブロック用のスタイルを読み込む

`wp_enqueue_block_style()` 関数は、特定のブロックに対応するスタイルを読み込むための関数です。

目次

## wp_enqueue_block_style() 関数とは

特定のブロックで使用する CSS ファイルを読み込むことができます。

`$args['path']` にもファイルへの絶対パスを設定することで、CSS ファイルサイズが一定以下であればインラインで出力し、一定以上であれば `$args['src']` で指定しているファイルを読み込みます。

## パラメーター

| `$block_name` | 名前空間を含んだブロック名（ `core/paragraph` など） |
| --- | --- |
| `$args` | 引数の配列 |

### handle

スタイルシートのハンドル名

### src

スタイルシートの URL

### deps

このスタイルシートが依存するスタイルシートのハンドル名を配列で指定

### ver

スタイルシートのバージョン番号

### media

このスタイルシートが定義されているメディア（通常は `all` ）

### path

スタイルシートへの絶対パス。インライン化したい場合には入力する。

## 使い方

以下のように記述することで、段落ブロックが利用されているページでスタイルを読み込むことができます。

```
add_action(
	'init',
	function () {
		wp_enqueue_block_style(
			'core/paragraph',
			array (
				'handle' => 'sample-paragraph-styles',
				'src' => get_theme_file_uri( '/css/sample-paragraph-styles.css' ),
				'path' => get_theme_file_path( '/css/sample-paragraph-styles.css' )
			)
		);
	}
);
```

上のソースコードでは、`css/sample-paragraph-styles.css` にあるファイルを読み込んでいます。適宜変更してお試しください。

実際にフロントエンドで表示を確認し、ソースコードでハンドル名を検索するとインラインで出力されているかリンクで表示されているか確認することができます。

## まとめ

一般的にスタイルやスクリプトを読み込む際には、`wp_enqueue_style()` や `wp_enqueue_script()` を使用します。

しかし、これらを利用する場合、特に条件を指定しない限り全てのページで読み込まれます。

こちらで紹介した `wp_enqueue_block_style()` を活用することで、特定のブロックに対してスタイルを用意し読み込み、利用している場合にのみ出力・リンクさせることができます。

結果として、不要なスタイルの読み込みを防ぐことにも繋がります。ぜひご活用ください。

[埋め込みコンテンツ](https://developer.wordpress.org/reference/functions/wp_enqueue_block_style)