wp_enqueue_style()

関数の概要

wp_enqueue_style()は、WordPressでCSSファイルをキューに登録し、テーマやプラグイン内で正しく読み込むための関数です。この関数を使用することで、依存関係を管理し、スタイルシートの読み込み順序を制御することができます。これにより、サイトのパフォーマンスを最適化し、スタイルの競合を防ぐことができます。

パラメータの説明

wp_enqueue_style()関数は6つのパラメータを受け取ります。

  1. $handle (string, 必須): スタイルシートの一意の識別子。
  2. $src (string, 必須): スタイルシートのURL。URLを指定しない場合、登録済みのスタイルシートが使用されます。
  3. $deps (array, オプション): スタイルシートの依存関係を示すハンドルの配列。デフォルトは空の配列です。
  4. $ver (string|bool|null, オプション): スタイルシートのバージョン番号。デフォルトはfalseです。バージョン番号を指定しない場合、WordPressのバージョンが使用されます。
  5. $media (string, オプション): スタイルシートのメディア属性。デフォルトはallです。

使用例

以下は、wp_enqueue_style()関数を使用してCSSファイルをテーマに追加する例です。

<?php
function my_custom_styles() {
    // カスタムスタイルシートをキューに登録する
    wp_enqueue_style(
        'my-custom-style', // ハンドル
        get_template_directory_uri() . '/css/custom-style.css', // スタイルシートのURL
        array(), // 依存関係なし
        '1.0.0', // バージョン番号
        'all' // メディア属性
    );
}
add_action('wp_enqueue_scripts', 'my_custom_styles');
?>

依存関係のあるスタイルシートを追加する例

<?php
function my_dependent_styles() {
    // 親スタイルシート
    wp_enqueue_style(
        'parent-style', // ハンドル
        get_template_directory_uri() . '/css/parent-style.css' // スタイルシートのURL
    );

    // 子スタイルシート（親スタイルシートに依存）
    wp_enqueue_style(
        'child-style', // ハンドル
        get_template_directory_uri() . '/css/child-style.css', // スタイルシートのURL
        array('parent-style'), // 依存関係
        '1.0.0', // バージョン番号
        'all' // メディア属性
    );
}
add_action('wp_enqueue_scripts', 'my_dependent_styles');
?>

外部スタイルシート（CDNなど）を追加する例

<?php
function my_cdn_styles() {
    // CDNから外部スタイルシートをキューに登録する
    wp_enqueue_style(
        'cdn-style', // ハンドル
        'https://cdnjs.cloudflare.com/ajax/libs/example/1.0.0/example.min.css', // 外部スタイルシートのURL
        array(), // 依存関係なし
        '1.0.0', // バージョン番号
        'all' // メディア属性
    );
}
add_action('wp_enqueue_scripts', 'my_cdn_styles');
?>

関連する関数

  • wp_enqueue_script(): JavaScriptファイルをキューに登録し、読み込みます。
  • wp_register_style(): スタイルシートをキューに登録せずに登録します。
  • wp_register_script(): スクリプトをキューに登録せずに登録します。
  • wp_deregister_style(): キューからスタイルシートを解除します。
  • wp_deregister_script(): キューからスクリプトを解除します。

使用上の注意

  • wp_enqueue_style()関数は、通常、テーマのfunctions.phpファイルやプラグインファイル内で使用されます。
  • 依存関係を適切に指定することで、スタイルシートの競合や読み込み順序の問題を防ぐことができます。
  • wp_enqueue_scriptsアクションフックを使用してスタイルシートを登録することで、WordPressの適切なタイミングでスタイルシートが読み込まれるようにします。