アクションフックでCSSやJSの読み込みを一元管理する【WordPress】

WordPress開発において、CSSやJavaScriptの読み込みをfunctions.phpで管理することは、保守性とパフォーマンス向上のために不可欠です。本記事ではwp_enqueue_scriptsアクションフックを使用した推奨される管理手法を解説します。

なぜ直接読み込んではいけないのか？

header.phpなどに直接記述すると、プラグインの読み込み順序と競合したり、重複読み込みが発生しやすくなります。WordPress標準の関数を使用することで、依存関係（jQueryの読み込み待ちなど）を適切に制御できます。

基本的な記述方法

function my_theme_scripts() {
    // CSSの登録と読み込み
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
    
    // JSの登録と読み込み
    wp_enqueue_script( 'main-script', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

解説

• wp_enqueue_style: CSSファイルを読み込みます。
• wp_enqueue_script: JSファイルを登録・読み込みます。array('jquery')を渡すことで、jQueryより後に読み込まれるよう依存を指定できます。
• true: オプションをtrueにすると、スクリプトが</body>直前で読み込まれます。