ストーク(STORK)のCSSの変更内容が反映されない事象の原因と対処法

Wordpress

究極のモバイルファーストオールインワンWPテーマであり、ブロガー専用テーマ「STORK(ストーク)」を使っているブロガーは数え切れないぐらいいらっしゃるかと思います。

WordPressテーマ「ストーク」
ブログマーケッターJUNICHIとOPENCAGEが共同で考え作り上げたWordPressテーマ。これまでのテーマ開発の経験とブログマーケティングノウハウの融合によってうまれた究極のWordPressテーマです。
スポンサーリンク

CSSの変更内容が反映されない事象の原因

CSS等の変更を行わなくても、カスタマイズ画面から大半の設定が出来てしまうことから、初心者にも優しいWordPressのテーマではありますが、凝った作りを実現しようとすると、どうしてもCSSの変更が必要になるかと思います。

ただ、CSSを触っていると、「あれ?変更したのにCSSの内容が反映されない?」という事がよく起きます。

これは、他のWordPressのテーマでもそうなのですが、CSSを変更しても自動で反映してくれるような仕組みがないためです。

今回御紹介する「STORK(ストーク)」も同様で、CSSファイルを変更しただけでは反映されません。

だからといって、ブログを見て頂いている人にCSSを取り直してもらうことは不可能ですよね?

その対策として、CSSを修正したら、即ブログに反映される対処法を御紹介します。

なお、同対応にあたっては、以下のサイトを参考にしていますが、STORKテーマの内容ではなくSimplicityというテーマの対応内容ですが、対応内容は同じですので、よければ参考にして頂ければと思います。

【Simplicity】CSSに更新時間を付けてブラウザキャッシュ除外。更新したら勝手に再読み込みさせる方法
新規サイトを作成すると、「ここが違う・・・ここはこうやって」など、デザイン面で更新頻度が高くなります。ブラウザキャッシュはgtmetrixの指示通り6か月を.htaccessに記載。ってか6か月って長くね?ってなり、更新があれば、都度キャッ

Simplicity2のcssの変更内容が反映されない事象への対処法

環境情報

・STORKのバージョン:1.1.2

対応概要

子テーマのCSSファイルである「style.css」に、子テーマのCSSファイルの更新日時を付与します。

実際にはPHPのfilemtime関数を使用するため、Unixタイムスタンプが付与されます。

例えば、子テーマのCSSファイルの修正時間が「2017/01/01 00:00:00」の場合、「style.css?1483196400」と自動で付与されるように対応します。

修正対象ファイル

/wp-content/themes/jstork_custom/functions.php
※子テーマを利用している前提です。

修正前後の内容(修正箇所のみ)

【修正前】
get_stylesheet_directory_uri() . ‘/style.css’,

【修正後】
get_stylesheet_directory_uri() . ‘/style.css?’ . filemtime( get_stylesheet_directory().’/style.css’),

修正前後の内容(修正箇所近辺)

【修正前】
修正前の修正箇所近辺の画像

【修正後】
修正後の修正箇所近辺の画像
※修正前のPGは不具合等あって元に戻すことを想定し、コメント化しています。

注意点

上記対応を行うことで、STORKテーマに対してのCSSが即反映されるようになりますが、以下の点を了承の上、対応をするようにお願いします。

・上記対応はSTORKの推奨対応ではないため、自己責任で修正をお願いします。
・万が一のために、作業前にバックアップを必ず取ってください。
・STORKの子テーマの修正なので他の影響は受けにくいですが、今後バージョンアップに伴い正常に動作しない可能性も考えられますのでご注意ください。
タイトルとURLをコピーしました