WordPressでシングルページにだけスタイルシートを読み込む方法

WordPressでシングルページにだけスタイルシートを読み込む方法

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
$mediamedia属性に関する指定all
まい

フロントエンドエンジニア目指して、勉強中です。

Wordpressカテゴリの最新記事