wp_enqueue_scripts フックの使い方｜説明・引数・注意点

説明

基本構文

do_action( 'wp_enqueue_scripts' )

引数

引数はありません。

戻り値

引数はありません。

使い方（サンプル）

add_action( 'wp_enqueue_scripts', function() {
	wp_enqueue_style( 'my-style', get_stylesheet_uri() );
} );

注意点

• 名前に反して、スタイルの読み込みにも使います。
• 管理画面は admin_enqueue_scripts、ログイン画面は login_enqueue_scripts です。

実務での使いどころ

• フロントで、CSSやJavaScriptを、読み込むとき。
• 特定のページだけで、スクリプトを読み込むとき（条件分岐を使える）。

よくあるミスと対処

• 管理画面のCSSやJavaScriptを読み込むのに、使っている。管理画面には、admin_enqueue_scripts を使う。ログインページには、login_enqueue_scripts。
• 名前は scripts だが、CSSの読み込みにも使う。
• header.php に、直接 <script>・<link> を書いている。

NG例

add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style( 'my-admin', get_theme_file_uri( '/css/admin.css' ) ); // フロントに出る
} );

OK例

add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style( 'my-style', get_theme_file_uri( '/css/main.css' ), array(), '1.0.0' );
	if ( is_front_page() ) {
		wp_enqueue_script( 'front', get_theme_file_uri( '/js/front.js' ), array(), '1.0.0', true );
	}
} );

使い分け早見表

関連項目

admin_enqueue_scripts、wp_enqueue_style()、wp_enqueue_script()

公式リファレンス：wp_enqueue_scripts | WordPress Developer Resources