ウェブログ

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終了タグ前に読み込み、
更新日時のタイムスタンプをパラメーターとして含ませキャッシュ対策を行ったサンプルコードをご紹介します。

サンプルコード

上記を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」として「年月日時分秒」という形です。実際には下記のように表示されます。

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

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

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

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

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

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

この記事を書いた人

池田祐太郎

池田祐太郎

WordPress好きの池田です。Webの仕事の前はライブハウスでブッキングや音響をしてました。PHP, JavaScriptを自由に操りたいと思いつつ、つい訪れたサイトのソースコードを見てしまいます。


CONTACTお問い合わせ / お見積もり