wp_enqueue_style()


WordPressのwp_enqueue_style()関数は、テーマやプラグインでスタイルシートを登録および読み込むために使用されます。この関数を使用することで、スタイルシートの競合を避け、適切にロード順序を管理できます。

構文

wp_enqueue_style( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, string $media = 'all' );

引数の説明:

  • $handle (string) — スタイルシートの識別名。
  • $src (string) — スタイルシートファイルのURL。
  • $deps (array) — 依存関係となる他のスタイルシートのハンドル名。
  • $ver (string|bool|null) — スタイルシートのバージョン。
  • $media (string) — スタイルシートが適用されるメディアタイプ。例: ‘all’, ‘screen’, ‘print’。

例 1: 基本的なスタイルシートの読み込み

テーマにスタイルシートを読み込むための基本的な例です。

<?php
function enqueue_my_styles() {
    wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_styles' );
?>

例 2: 依存関係の指定

別のスタイルシートに依存するスタイルシートを登録します。

<?php
function enqueue_dependent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/parent.css' );
    wp_enqueue_style( 'child-style', get_template_directory_uri() . '/child.css', array( 'parent-style' ) );
}
add_action( 'wp_enqueue_scripts', 'enqueue_dependent_styles' );
?>

例 3: バージョン番号の指定

キャッシュ問題を回避するためにバージョン番号を指定します。

<?php
function enqueue_versioned_styles() {
    wp_enqueue_style( 'my-versioned-style', get_template_directory_uri() . '/style.css', array(), '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_versioned_styles' );
?>

例 4: 特定のメディアタイプの指定

印刷用のスタイルシートを読み込みます。

<?php
function enqueue_print_styles() {
    wp_enqueue_style( 'print-style', get_template_directory_uri() . '/print.css', array(), null, 'print' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_print_styles' );
?>

例 5: 条件付きでスタイルを読み込む

特定の条件でスタイルシートを読み込みます。

<?php
function enqueue_conditional_styles() {
    if ( is_singular() ) {
        wp_enqueue_style( 'single-style', get_template_directory_uri() . '/single.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_conditional_styles' );
?>

注意点:

  • ハンドル名は一意でなければなりません。
  • 同じスタイルシートを複数回登録しないよう注意してください。
  • 依存関係が正しく設定されていないと、スタイルシートが正しい順序で読み込まれない場合があります。

関連機能：