正しいCSSファイルの読み込み方法

スポンサーリンク

今まで、CSSファイルの読み込み方法を間違えていたようです。headタグ内で読み込みをしていましたが、WordPressが推奨する読み込み方法は、functions.phpファイル内での読み込みでした。

テーマで利用したいCSSファイルを読み込むには、functions.phpファイル内で wp_enqueue_style関数を使って読み込みを行います。wp_enqueue_style関数を使うと、安全に読み込んでくれます。重複チェックとか適切な読み込み場所とか勝手に判断してくれます。

wp_enqueue_style(①ハンドル名, ②CSSのURL, ③先に読み込みたいCSSファイルを配列で指定, ④バーションを指定)

<使用例>


    wp_enqueue_style('bootstrap-min-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', array(), '3.3.6');
    wp_enqueue_style('fontawsome-min-css', '//maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css', array(), '4.6.2')
    wp_enqueue_style('style', get_stylesheet_uri(), array(), wp_theme_version());


/* テーマのバーション取得 */
function wp_theme_version() {
    $theme = wp_get_theme();
    return $theme->get('Version');
}


第4引数の④バーションを指定しておくと、サイトの高速化処理でファイルのキャッシュ保存期間を長く設定していた場合でも、バーションをチェックして新しいCSSファイルを読み込んでくれるようになります。

CSSファイルは、wp_enqueue_style関数を使って、functions.phpファイルで一元管理すると、修正も楽になります。

スポンサーリンク

逆引き辞典 

この記事と一緒によく読まれています!