CSSとJavaScriptを直接テンプレートファイルに書かずに読み込む方法とキャッシュ対策

CSSやJSは記載する場所は自由ですが、適当に書いているとメンテナンス性が悪くなりますし、header.phpやfooter.phpファイル内に直接記載していると、読み込みだけで数行利用することとなり、可読性が落ちます。

オリジナルテーマを作っていると、よくある要望として以下のようなものがあります。

• 独自に作成するCSSやJSファイルをheader.phpに記載するのではなく、wp_head内に表示するようにしたい！
• JSファイルはbody終了タグの前に表示したい！
• CSSファイルのキャッシュが効いていて、更新したのに以前のCSSのキャッシュが消えない！

今回は用意されている関数を利用し、css/style.cssをheadタグ内に、js/common.jsをbody終了タグ前に読み込み、
更新日時のタイムスタンプをパラメーターとして含ませキャッシュ対策を行ったサンプルコードをご紹介します。

サンプルコード

/*
* cssとjsを「wp_enqueue_scripts」「enqueue_style_script」にて読込 ※キャッシュ対策として更新日時のパラメータを付与
*/
add_action( 'wp_enqueue_scripts', 'enqueue_style_script' );
if( ! function_exists( 'enqueue_style_script' ) ) {
    function enqueue_style_script() {
        wp_enqueue_style(
            'style-css',
            get_stylesheet_directory_uri() . '/css/style.css',
            false,
            date('YmdHis', filemtime(get_stylesheet_directory() . '/css/style.css'))
        );
        wp_enqueue_script(
            'common-js',
            get_stylesheet_directory_uri().'/js/common.js',
            array(),
            date('YmdHis', filemtime(get_stylesheet_directory() . '/js/common.js')),
            true
        );
    }
}

上記をfunctions.phpの任意の場所に記載します。例によって忘れずにバックアップを取っておいて下さい。
以下、解説します。

基本の利用方法とちょっとした便利な使い方

ファイル名により変更する箇所があります。
また、複数ファイルの読み込み方法や、特定のページだけに読み込ませたい場合など解説します。

CSS

CSSの場合は利用する関数は「wp_enqueue_style」になります。
サンプルでは「/css/style.css」となっており、これはテーマフォルダ内にあるcssフォルダ内にあるstyle.cssを指し示しています。利用するパスによって自由に変更してください。
変更する箇所は「get_stylesheet_directory_uri() . ‘/css/style.css’」と「date(‘YmdHis’, filemtime(get_stylesheet_directory() . ‘/css/style.css’))」の二箇所です。

各パラメータの詳しい解説はリファレンスを御覧ください。

JavaScript

JSの場合は「wp_enqueue_script」関数となります。styleと似ているので注意してください。
こちらも利用方法としてはwp_enqueue_styleと基本同じような感じで、サンプルでは「/js/common.js」となっているので、適宜テーマに合わせて改変してください。変更箇所はタイムスタンプ合わせて2箇所です。

クライアントワークでは必須！キャッシュ対策

filemtime関数でファイルの更新日時情報を取得し、date関数で日付として表示しています。
これを設定することにより、更新があったときのみキャッシュからの読み込みではなく、新しく読み込むようになるため、例えばクライアントワークで更新依頼を受けて作業＆確認依頼をだしたのに、「変わってないよ！」「キャッシュ削除してください！」っていう不毛なやり取りをせずにすみます。

サンプルでは「YmdHis」として「年月日時分秒」という形です。実際には下記のように表示されます。

//タイムスタンプを表示
common.js?ver=20171223081635

パラメータを任意の形式に変更したい場合はdate関数のパラメータを参考にしてください。

複数のcssやjsを読み込ませたいという場合

単純に関数を下に追加していくだけです。以下、複数のCSSを読み込ませるサンプルです。

//2つのCSSを読み込む 例: style.css / common.css
wp_enqueue_style(
    'style-css',
    get_stylesheet_directory_uri() . '/css/style.css',
    false,
    date('YmdHis', filemtime(get_stylesheet_directory() . '/css/style.css'))
);
wp_enqueue_style(
    'common-css',
    get_stylesheet_directory_uri() . '/css/common.css',
    false,
    date('YmdHis', filemtime(get_stylesheet_directory() . '/css/common.css'))
);

特に決まりがあるわけじゃないと思いますが、第一引数のハンドル名はユニークなものにしておいたほうが無難でしょう。

特定のページのみに読み込ませる場合

たとえば固定ページのみに表示させる、問い合わせページのみに適用させたいJSがある、といった用途で利用する場合は、WordPressの条件分岐の関数を利用します。
例として、問い合わせページと問い合わせ完了ページのみに適用させるJavaScriptを読み込ませるサンプルコードです。

//問い合わせページと問い合わせ完了ページのみ表示（slugがcontactとthanks）
if(is_page(array('contact','thanks'))) {
	wp_enqueue_script(
	    'contact-js',
	    get_stylesheet_directory_uri().'/js/contact.js',
	    array(),
	    date('YmdHis', filemtime(get_stylesheet_directory() . '/js/contact.js')),
	    true
	);
}