概要
wp_enqueue_style関数は、WordPressテーマやプラグインでスタイルシートを出力用のキューに入れるために使用されます。この関数を使うことで、スタイルシートの依存関係を管理し、正しい順序でCSSを読み込むことができます。以下は、この関数がよく使われる機能の例です。
- テーマでカスタムCSSを追加する。
- プラグインでスタイルを統一する。
- CDNからのスタイルシートを読み込む。
- フォントアイコンライブラリを追加する。
- メディアクエリに応じたスタイルを適用する。
- ローカライズされたスタイルを提供する。
- さまざまな条件に基づいてスタイルシートを条件付きで読み込む。
- ビジュアルビルダーコンポーネントのスタイルを指定する。
構文
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
パラメータ
$handle(string) 必須: スタイルシートのユニークな識別子。$src(string) 必須: スタイルシートのURL。$deps(array) 任意: 依存するスタイルシートのハンドル。$ver(string|bool) 任意: スタイルシートのバージョン。空文字を指定すると、バージョン番号は追加されません。$media(string) 任意: スタイルシートが適用されるメディアタイプ（例: ‘all’, ‘screen’, ‘print’など）。
戻り値
この関数はリターン値を持たず、スタイルシートをキューに追加するために使用されます。
関連する関数
利用可能なバージョン
wp_enqueue_style関数は、WordPress 2.1以降で導入されています。
コアファイルのパス
wp-includes/script-loader.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: テーマのスタイルシートを追加
function my_theme_enqueue_styles() {
wp_enqueue_style( 'theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
このサンプルでは、テーマのスタイルシートをwp_enqueue_scriptsアクションを使用して追加しています。
サンプル2: プラグインでカスタムスタイルを追加
function my_plugin_enqueue_styles() {
wp_enqueue_style( 'plugin-style', plugins_url( 'css/plugin-style.css', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_styles' );
このサンプルは、プラグインのCSSファイルをキューに追加します。
サンプル3: 依存関係を指定したスタイルシートの読み込み
function my_theme_enqueue_styles() {
wp_enqueue_style( 'theme-style', get_stylesheet_uri(), array( 'bootstrap' ) );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
このコードでは、Bootstrapのスタイルシートに依存するテーマのCSSをキューに追加しています。
サンプル4: バージョンとメディアタイプの指定
function my_theme_enqueue_styles() {
wp_enqueue_style( 'theme-style', get_stylesheet_uri(), array(), '1.0.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
この例では、スタイルシートのバージョンと適用メディアタイプを設定しています。
サンプル5: CDNからのスタイルシートを読み込む
function my_theme_enqueue_styles() {
wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:400,700' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
このコードは、Google FontsからのスタイルシートをWordPressサイトに追加しています。