WordPressでCSS・JSを正しく読み込む方法【wp_enqueue】

Webサイトを作る時、通常なら<head>や</body>直前にCSS・JavaScriptの読み込みタグを直接書きますよね。ですがWordPressでは、この書き方はNGです。テーマの更新やプラグインとの競合で読み込み順が崩れたり、最悪の場合エラーの原因になったりします。

WordPressでは、スタイルシートはwp_enqueue_style()、スクリプトはwp_enqueue_script()という関数を使って、functions.phpに記載するのが正しい読み込み方です。functions.phpにまとめることでファイルの管理がしやすくなりますし、何より公式リファレンスで推奨されている方法なので、素直にそれに倣っておくのが一番安全です。

目次非表示

CSSを読み込む(wp_enqueue_style)
- 各パラメータの意味
スクリプトを読み込む(wp_enqueue_script)
- 各パラメータの意味
まとめ

目次へ

CSSを読み込む(wp_enqueue_style)

WordPress公式の関数リファレンスを見ると、書式は下記のようになっています。

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

functions.phpに書く場合は、下記のように関数でくるんでフックに登録する形になります。関数名は任意のもので構いません(下の例では最初と最後のadd_cssの部分です)。

function add_css() {
    wp_enqueue_style( 'common_style', get_template_directory_uri() . '/css/common.css', array('base_css'), '1.0.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'add_css' );

$depsや$verは省略してもOKなので、最低限は$handleと$srcだけの指定でも動きます。

function add_css() {
    wp_enqueue_style( 'common_style', get_template_directory_uri() . '/css/common.css' );
}
add_action( 'wp_enqueue_scripts', 'add_css' );

各パラメータの意味

$handle	スタイルの名前(識別ID)。すでに登録済みの名前と重複すると、新しいスタイルは追加されないので注意
$src	スタイルシートまでのURL
$deps	このスタイルより先に読み込みたいスタイルの`$handle`を配列で指定(依存関係)
$ver	バージョン番号。更新したスタイルを確実に反映させたい時に使う
$media	スタイルシートを適用するメディア。初期値は’all’

テーマ本体のスタイルシート(style.css)を読み込むだけなら、もっとシンプルに書けます。

function add_style_main() {
    wp_enqueue_style( 'style_main', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'add_style_main' );

💡 $verは地味だけど重要

「CSSを修正したのに、サイトに反映されない…」というトラブル、実は$ver(バージョン番号)を放置しているのが原因なことがよくあります。CSSファイルのURLは変わらないので、ブラウザが古いキャッシュを使い回してしまうんですね。修正のたびに$verの数値(例: ‘1.0.0’ → ‘1.0.1’)を上げておくと、ブラウザに「新しいファイルだよ」と伝えられて、キャッシュ問題に振り回されにくくなります。

スクリプトを読み込む(wp_enqueue_script)

JavaScriptファイルを読み込む場合はwp_enqueue_script()を使います。考え方はCSSの時とほぼ同じです。公式リファレンスの書式はこちらです。

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

各パラメータの意味

$handle	スクリプトの名前。登録済みの名前だと認識されないので注意
$src	スクリプトファイルまでのURL
$deps	このスクリプトより先に読み込みたいスクリプトの`$handle`を配列で指定
$ver	バージョン番号(CSSと同様、キャッシュ対策に使う)
$in_footer	読み込み位置。trueで閉じbodyタグ直前、falseで閉じheadタグ直前に出力

例えば、jsフォルダに保存したcommon.jsを読み込むなら、functions.phpにこう書きます。

function add_scripts() {
    wp_enqueue_script(
        'commonScript',
        get_template_directory_uri() . '/js/common.js'
    );
}
add_action( 'wp_enqueue_scripts', 'add_scripts' );

jQueryに依存するスクリプトの場合、jQueryが先に読み込まれるよう$depsで指定しておくと安全です。バージョン番号を指定する場合とあわせると、こうなります。

function add_scripts() {
    wp_enqueue_script(
        'smart-script',
        get_template_directory_uri() . '/js/common.js',
        array( 'jquery' ),
        '20260608',
        true
    );
}
add_action( 'wp_enqueue_scripts', 'add_scripts' );

in_footerをtrueにしてbodyの直前で読み込むようにしておくと、HTML本体の表示をブロックしにくくなるので、基本的にはtrueにしておくのがおすすめです。

まとめ

WordPressでCSS・JSを読み込む時は、直接HTMLに書かずfunctions.phpでwp_enqueue_style()・wp_enqueue_script()を使う
「修正が反映されない」時は$ver(バージョン番号)を上げてキャッシュを回避する
jQueryに依存するスクリプトは$depsで明示的に依存関係を指定する
スクリプトは基本的に$in_footerをtrueにして、表示速度への影響を減らす