2024/09/12

WordPressでページごとに読み込むCSSファイルを変える方法

Uncategorized

linkタグで読み込むのは非推奨

<link type="text/css" rel="stylesheet" href="<?php echo get_template_directory_uri() . '/style.css'; ?>">

これでも問題なく読み込めますが、WordPress開発では非推奨の方法になります。

理由としては、後述するwp_enqueue_style()を使ったほうが

・ファイルの重複読み込みを防げる

・functions.phpで一元管理できる

・ファイルの読み込み順序を指定できる

というメリットがあるからです。

wp_enqueue_style()で読み込む

<?php
add_action( 'wp_enqueue_scripts', function(){
    wp_enqueue_style( $handle, get_template_directory_uri() . 'xxx.css', $deps, $ver, $media);
});

$handle

他のCSSファイルと区別するためのハンドル名です。必ず固有の名称を付けてください。

$deps

依存関係を指定します。先に読み込んでほしいスタイルシートがあれば、そのハンドル名を記述してください。CSSはより後から読み込んだものが優先される決まりがあります。依存関係が特になければ、array()と記述します。

$ver

スタイルシートのバージョンを指定します。

$media

通常はスタイルシートにメディアクエリを書くことで、メディアごと（パソコンやスマホ、タブレット）にスタイルを分岐させますが、ファイル読み込み時点で分岐させることができます。

たとえば、(max-width: 1024px) と書けばブラウザの横幅が1024px以下の時だけ、このスタイルシートを読み込めます。初期値はallです。

上記を踏まえると

<?php
add_action( 'wp_enqueue_scripts', function(){
    wp_enqueue_style(
        'style1',
        get_template_directory_uri() . 'style1.css',
        array(),
        '1.0',
        '(max-width: 1024px)'
    );
});

のように書けます。

ページごとに異なるスタイルシートを読み込む

add_action( 'wp_enqueue_scripts', function(){
    if( in_category('sports') ) {
        wp_enqueue_style('sports', get_template_directory_uri() . 'sports.css', array(), '1.0', 'all');
    }
});

add_action内にif文を書くことで、たとえばカテゴリごとに異なるスタイルシートを読み込ませることが可能です。

※is_category()関数は、現在のページがカテゴリアーカイブページかどうかを確認します。

※in_category()関数は、特定のカテゴリに属する投稿かどうかを確認します。

ホームに戻る