024：CSSファイルの読み込み

公開日:2020年11月08日

WordPress

CSSファイルの読み込みは「functions.php」に記述します。

functions.php

/*********************************
  CSS読み込み
 **********************************/
add_action('wp_enqueue_scripts', function () {
  // カルーセル
  wp_enqueue_style(
    'slick_css',
    'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css'
  );
  wp_enqueue_style(
    'slick_theme_css',
    'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css'
  );
  // スクロールアニメーション
  wp_enqueue_style(
    'aos',
    'https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css'
  );
  // 共通CSS
  wp_enqueue_style(
    'common_css',
    get_theme_file_uri('/css/style.css'),
    array('slick_css', 'slick_theme_css', 'aos'),
    filemtime(get_theme_file_path('/css/style.css'))
  );
});

jQuery用CSS読み込む場合

第1引数に読み込みCSSの名前を指定します。

  // カルーセル
  wp_enqueue_style(
    'slick_css',
    'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css'
  );
  wp_enqueue_style(
    'slick_theme_css',
    'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css'
  );
  // スクロールアニメーション
  wp_enqueue_style(
    'aos',
    'https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css'
  );

オリジナルCSSを読み込む

オリジナルCSSは必要ファイルをすべて読み込んだ後に読み込みます。

第3引数に事前に読み込むJSファイルを指定します。

第4引数にファイル更新日時を指定することでファイル名の後に更新日時クエリ文字列を付与することができます。クエリ文字列を付与することでファイル名（実際は読み込みURL）が更新前と違うものになりキャッシュされたファイルではなく更新されたCSSファイルが読み込まれます。これによりキャッシュを強制的に削除することができます。

  // 共通CSS
  wp_enqueue_style(
    'common_css',
    get_theme_file_uri('/css/style.css'),
    array('slick_css', 'slick_theme_css', 'aos'),
    filemtime(get_theme_file_path('/css/style.css'))
  );