投稿日:2018年11月9日  更新日:

テーマカスタマイズをするときはstyle.cssにタイムスタンプをつけよう

WordPressのテーマカスタマイズをしていて不都合なことは「ブラウザキャッシュ」により、リアルタイムに更新したスタイルシートが反映してくれないことがあります。
今回はスタイルシートをバリバリカスタムするときに事前にやっておくと便利なテクニックをご紹介します。

この記事がおすすめな人

  • WordPressのテーマをCSSで見栄えを調整したい!
  • CSSをリアルタイムに反映させるにはどうしたらいいの?

とりあえず読み込みファイルのバージョンを消す。

<head>タグ内で読み込まれているファイルにはデフォルトで、そのファイルのバージョン名かWorpressのバージョン名がパラメータとして付与されています。

これを見ると、そのサイトはWordpressのどのバージョンを使っているかもバレてしまうので、最新ではなくレガシーバージョンで運用しているサイトは脆弱性を狙われる心配もあるので、できれば隠しておきましょう。

functions.phpに以下を記述

// cssとjsのバージョン名を削除します
function remove_cssjs_ver2( $src ) {
    if ( strpos( $src, 'ver=' ) )
        $src = remove_query_arg( 'ver', $src );
    return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_ver2', 9999 );
add_filter( 'script_loader_src', 'remove_cssjs_ver2', 9999 );

 

するとcssとjsファイルの末尾のパラメーターが消えていると思います。

子テーマのstyle.cssファイルにタイムスタンプをつける

テーマカスタマイズをする場合は、子テーマを作りその中のファイルをいじるようにしましょう。

これは運用のしやすさ、リカバリのしやすさ、管理のしやすさ全てにおいてメリットがあるので、子テーマを作り運用するクセをつけましょう。

functions.phpに先程コードを追加した下に以下を記述

//style.cssをタイムスタンプ付きで読み込む
function header_stylecss_include() {
 $styleurl = get_bloginfo("stylesheet_url"); //現在のテーマのstyle.cssのパスを取得
 $styletime = filemtime( get_stylesheet_directory() . '/style.css'); //現在現在のテーマのstyle.cssのタイムスタンプ取得
 echo '<link rel="stylesheet" id="child-style-css" href="',$styleurl,'?',$styletime,'" />'; //タイムスタンプ付きstyle.cssを読み込む
}
add_action('wp_head', 'header_stylecss_include');

 

↑の画像のように、子テーマのstyle.cssのファイル名の末尾にタイムスタンプのパラメーターが付きました!

これで子テーマのstyle.cssを更新してサーバーにアップロードする度にパラメーターが変更されるので、読み込むブラウザでは常に最新のスタイルシートが適応されます。

スタイルシートの修正が終わったら不要なコードは削除しておく

全ての更新作業が終わったら、先程のタイムスタンプを付与するコードは削除しておきましょう。

こうすることでCSSをユーザー側にブラウザキャッシュさせることができるのでページの読み込みが早くなります。

お試しください。

WordPressやテンプレートのカスタマイズまとめ

【これがやりたかってん】WordPressでブログを作る時に役立つカスタマイズをまとめました

続きを見る

Amazonチャージ

Amazonで買い物するなら、Amazonチャージを利用しよう!

チャージごとに、プライム会員なら最大2.5%Amazonポイントが貯まる!

クレジットカードがなくてもOK! Amazonギフト券チャージでお得にお買い物しよう!

さっそくチャージする

  • この記事を書いた人

りょうま

WEBエンジニア/フリーランス5期目/大阪府北摂在住🏠長野県諏訪市出身🎣webデザインやフロントエンド技術の情報を中心に、人生をカスタマイズして楽しく過ごすための情報を発信中📢WPテーマはAFFINGER5です。

-Wordpressカスタマイズ
-, , , , , , ,

Copyright© ヤッテモータース , 2019 All Rights Reserved.