WordPressでは、スタイルシートやスクリプトの読み込みは、functions.phpに記述します。シングルページや固定ページだけに読み込む場合は、読み込み用の関数を条件分岐させます。以下は、シングルページにのみ、読み込みたい場合の例です。
function add_files() {
// シングルページのみでスタイルシートの読み込み
if ( is_single() ) {
wp_enqueue_style( 'single_style', get_template_directory_uri() . '/css/single-style.css', "", '20220729' );
}
}
add_action( 'wp_enqueue_scripts', 'add_files' );スタイルシートの読み込みは、wp_enqueue_style()、スクリプト読み込みは、wp_enqueue_script()を使います。
function add_files(){
wp_enqueue_style('好きなハンドル名','読み込みたいcssファイルまでのパス');
wp_enqueue_script('好きなハンドル名','読み込みたいjsファイルまでのパス');
}
//上の読み込み用の関数を、「wp_enqueue_scripts」アクションにフックさせる。
add_action('wp_enqueue_scripts', 'add_files');地味に、調べるのも時間かかるのでメモしておきました。引数は 5つあります。
wp_enqueue_style($handle, $src, $deps, $ver, $media);例：
wp_enqueue_style( 'single_style', get_template_directory_uri() . '/css/single-style.css', "", '20220729' );
}引数の意味
| 引数 | 概要 | 初期値 |
|---|---|---|
| $handle | スタイルシートのハンドル名を指定。 ‘?’ を含むと、その後ろの部分はクエリパラメータとしてURL に追加される | なし |
| $src | スタイルシートへのパス | false |
| $deps | このスタイルシートより前に読み込む必要のあるスタイルシートがある場合、 他のスタイルシートのハンドル名を配列で指定 特にない場合は falseを指定 | array() |
| $ver | 任意のバージョンを指定できる ファイル名にパラメータとして追加され、ブラウザキャッシュ対策になる | false |
| $media | media属性に関する指定 | all |