[WordPress]CSSとJSをfunctions.phpで管理する

WordPressでCSSとJavaScriptをfunctions.php内で一元管理する方法です。
最初に2つの関数を説明し、実際に記載する方法を紹介します。

CSSを読み込む

関数「wp_enqueue_style()」を使用します。

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

パラメータ	説明	必須	初期値
$handle	スタイルシートのハンドル名。「ハンドル名-css」としてIDに付与される。	必須	なし
$src	スタイルシートのURL。		空文字列
$deps	依存する他のスタイルシートがある場合、配列で指定できる。		array()
$ver	パラメータとしてURLに連結できる。キャッシュ対策に使用可能。		false
$media	メディアを定義する場合に指定できる。		‘all’

参考：関数リファレンス/wp enqueue style – WordPress Codex 日本語版

JavaScriptを読み込む

関数「wp_register_script()」を使用します。

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

パラメータ	説明	必須	初期値
$handle	スタイルシートのハンドル名。「ハンドル名-js」としてIDに付与される。	必須	なし
$src	スクリプトのURL。		false
$deps	依存する他のスクリプトがある場合、配列で指定できる。		array()
$ver	パラメータとしてURLに連結できる。キャッシュ対策に使用可能。		false
$media	スクリプトは通常に置かれるが、trueにすると終了タグの前に配置される。		false

参考：関数リファレンス/wp enqueue script – WordPress Codex 日本語版

functions.pnpに記載する

実際に読み込ませる場合には以下の様な形でfunctions.phpに記載します。

function add_files()
{
    // CSSの読み込み
    wp_enqueue_style('main', get_template_directory_uri() . '/css/main.css', '', '20210101');

    // JSの読み込み
    wp_enqueue_script('main', get_template_directory_uri() . '/js/main.js', '', '20210101', true);
}
add_action('wp_enqueue_scripts', 'add_files');

管理画面やログイン画面で読み込む

アクションフックを変更する事で読み込むタイミングの変更ができます。

add_action('wp_print_scripts', 'add_scripts');

wp_enqueue_scripts	フロントエンド
login_enqueue_scripts	ログイン画面
admin_enqueue_scripts	管理画面

パラメータをファイルの更新日付で付与する

「filemtime」関数を利用して、ファイルの更新日付を自動で付与する事で、常にキャッシュ対策をする事が出来ます。

gmdate( 'YmdHi', filemtime( get_theme_file_path( '/assets/css/style.css' ) ) )

組み込み例

function add_files()
{
    // CSSの読み込み
    wp_enqueue_style('main', get_template_directory_uri() . '/css/main.css', '', gmdate('YmdHi', filemtime(get_theme_file_path('/css/main.css'))));

    // JSの読み込み
    wp_enqueue_script('main', get_template_directory_uri() . '/js/main.js', '', gmdate('YmdHi', filemtime(get_theme_file_path('/js/main.js'))), true);
}
add_action('wp_enqueue_scripts', 'add_files');

CSSにメディアクエリを指定する

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

「$media」の部分でメディアクエリを指定します。

wp_enqueue_style('main', get_template_directory_uri() . '/css/main.css', '', '20210101’, 'all and (min-width: 600px)');