• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / TIPS / CSSとJavaScriptを直接テンプレートファイルに書かずに読み込む方法とキャッシュ対策

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

池田祐太郎 | 2017年12月24日 公開


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

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

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

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

目次

  • 1 サンプルコード
  • 2 基本の利用方法とちょっとした便利な使い方
    • 2.1 CSS
    • 2.2 JavaScript
    • 2.3 クライアントワークでは必須!キャッシュ対策
    • 2.4 複数のcssやjsを読み込ませたいという場合
    • 2.5 特定のページのみに読み込ませる場合

サンプルコード

/*
* 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’))」の二箇所です。

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

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

JavaScript

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

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

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

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
	);
}
メールコンサルティング
WordPress保守管理サービス

Filed Under: TIPS 関連タグ:WordPressカスタマイズ

池田祐太郎

WordPressの導入を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在はWordPressの保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

この記事と関連する記事

WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
2022年1月27日
タグ: WordPressカスタマイズ
カテゴリー: WordPress
フレームワークを使ってWordPressサイトをリニューアルしたら表示速度が速くなった話
2018年6月4日
タグ: Webサイト高速化, WordPressカスタマイズ
カテゴリー: WordPress, ホームページ制作, モバイル
WP固定ページや投稿内でphpファイルを読み込むショートコード
2018年4月1日
タグ: WordPressカスタマイズ
カテゴリー: TIPS

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  4. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  5. WordPress において PHP 8.1 に更新していいかどうか検証
  6. [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  • WordPress のクロスサイト・スクリプティング被害にあった事例を共有します
  • メール作業の生産性を向上させる最低限覚えておくべき Gmail のショートカットキー
  • タブ固定とタブ一発アクセスのショートカットキーの組み合わせでブラウザ作業の生産性を向上
  • メールフォームプラグイン MW WP Form を使いながら WP Rocket を使う場合にエラー回避する設定

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS ssh SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウド クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 改ざん 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.