WordPressのfunctions.phpからCSS・JavaScriptを読み込む方法【wp_enqueue_style・wp_enqueue_script】

WordPressでCSSやJavaScriptを追加する場合は、header.php へ直接 <link>タグや <script>タグを記述するのではなく、functions.php から wp_enqueue_style() や wp_enqueue_script() を利用して読み込む方法が推奨されています。

本記事では、基本的な読み込み方法から、ページごとの条件分岐、キャッシュ対策として filemtime() を利用する方法、コードが長くなった場合の管理方法まで解説します。

WordPressではfunctions.phpから読み込むのが推奨

WordPressでは、CSSやJavaScriptはfunctions.phpから読み込む方法が推奨されています。

WordPress専用の wp_enqueue_style()・wp_enqueue_script() を利用することで、以下のメリットがあります。

• 読み込み順を管理できる
• 他のプラグインとの競合を防ぎやすい
• 必要なページだけ読み込める
• WordPress標準の読み込み方法を利用できる

CSS・JavaScriptを読み込む基本コード

以下は、CSSとJavaScriptを読み込む最も基本的な例です。

my_theme_enqueue_assets は任意の関数名です。
ほかの関数名と重複しない名前であれば自由に変更できます。
関数名を変更する場合は、add_action() の第2引数も同じ名前にしてください。

wp_enqueue_style() とは

wp_enqueue_style()は、CSSファイルを読み込むためのWordPress標準関数です。
テーマやプラグインからCSSを安全に追加でき、読み込み順の制御も行えます。

wp_enqueue_style() の主な引数

wp_enqueue_style(
    $handle, // ハンドル名（適当な識別子）
    $src,    // CSSファイルのURL
    $deps,   // 依存関係（ない場合は array()）
    $ver,    // バージョン番号（省略する場合は null）
    $media   // 適用するメディア（通常は 'all'）
);

wp_enqueue_script()とは

wp_enqueue_script()は、JavaScriptファイルを読み込むためのWordPress標準関数です。
$in_footerにtrueを指定すると、</body>の直前で読み込まれるため、ページの表示速度への影響を抑えられます。

wp_enqueue_script() の主な引数

wp_enqueue_script(
    $handle,     // ハンドル名（適当な識別子）
    $src,        // JavaScriptファイルのURL
    $deps,       // 依存関係（ない場合は array()）
    $ver,        // バージョン番号（省略する場合は null）
    $in_footer   // フッターで読み込むか（true：フッター、false：ヘッダー）
);

get_template_directory_uri() とは

親テーマのURLを取得する関数です。

例えば、以下のようなURLを自動で取得します。
https://example.com/wp-content/themes/sample

親テーマ内のCSSやJavaScriptのURLを取得する場合に使用します。

filemtime()とは

filemtime()は、ファイルの最終更新日時を取得するPHP関数です。

例えば、
filemtime( get_template_directory() . '/style.css' )
をバージョン番号として指定すると、
style.css?ver=1753678281
のように更新日時が自動で付与されます。

CSSやJavaScriptを更新した際にブラウザキャッシュが自動更新されるため、開発時・公開後ともによく利用される方法です。

WordPressではheader.phpへ直接記述する方法は推奨されない

昔はheader.phpへ直接 <link> タグや <script> タグを記述する方法もよく利用されていました。

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css" />
<script src="<?php echo get_template_directory_uri(); ?>/js/common.js"></script>

<?php wp_head(); ?>
</head>

しかし現在は以下の理由で推奨されていません。

• プラグインとの競合が起きやすい
• 読み込み順を管理できない
• WordPress本来の仕組みを利用できない
• 条件分岐が書きにくい

特別な理由がない限りは、functions.phpから読み込む方法が推奨されます。

条件分岐を使ってページごとに読み込む

WordPressでは、条件分岐タグを利用することで、必要なページだけCSSやJavaScriptを読み込めます。

例えば、is_front_page() ならトップページ、is_singular('post') なら投稿ページだけCSSを読み込めます。
用途に応じて自由に条件を組み合わせられます。

不要なページではファイルを読み込まないため、
・表示速度の改善
・HTTPリクエスト数の削減
・ページサイズの軽量化
につながります。

enqueue.phpへ分割して管理する方法

テーマが大きくなると、functions.phpだけではコード量が多くなり管理しづらくなります。

そのような場合は、enqueue.phpなどの別ファイルへ分割すると、functions.phpが整理されて管理しやすくなります。

まずfunctions.phpでファイルを読み込みます。

functions.php

require_once get_template_directory() . '/inc/enqueue.php';

次に、enqueue.phpへCSS・JavaScriptの読み込み処理を記述します。

/inc/enqueue.php

<?php
function my_theme_enqueue_assets() {

    // スタイルシートを読み込む
    wp_enqueue_style(
        'theme-style',
        get_template_directory_uri() . '/style.css',
        array(),
        filemtime( get_template_directory() . '/style.css' )
    );

    // スクリプトを読み込む
    wp_enqueue_script(
        'common-script',
        get_template_directory_uri() . '/js/common.js',
        array(),
        filemtime( get_template_directory() . '/js/common.js' ),
        true
    );

}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' );
?>

CSS・JavaScriptの管理を1か所にまとめられるため、保守性が向上します。

まとめ

WordPressでCSSやJavaScriptを追加する場合は、functions.phpからwp_enqueue_style()やwp_enqueue_script()を利用する方法が基本です。

特に次のポイントを押さえておくと、保守性の向上や表示速度の改善につながります。

• functions.php から読み込む
• wp_enqueue_style()・wp_enqueue_script() を使用する
• 条件分岐で必要なページだけ読み込む
• filemtime() でキャッシュ対策を行う
• コード量が増えたら enqueue.php へ分割する

これらを取り入れることで、WordPress標準に沿った、保守性の高いテーマを構築しやすくなります。