リロードなしにスタイルシートの更新を反映させる方法

ヱブサイトの再構築中には、スタイルシート、style.css を頻繁に調整更新する。

CSSを追加、編集する度に再読み込みを繰り返して、変更の反映を確認していた。

これで編集者は反映を確認できるのだが、一般閲覧者はわざわざ再読み込みしたり、キャッシュを削除したりするはずはないので、変更が反映されていない崩れたデザインを見ているかもしれない。

 

わざわざリロードしたりキャッシュを削除したりしなくても変更が確実に反映されるような設定方法を発見した。

 

wp_enqueue_scripts で CSS、JS の読み込みを管理している場合には、次のようにfunctions.php に記述する。

 

// 子テーマのstyle.cssを最後に読み込む 
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles() {
date_default_timezone_set('Asia/Bangkok');
wp_register_style( 'pjax_child', '/wp-content/themes/pjax-blog/style.css', array("leapin-stylesheet"), date_i18n('ndHis', filemtime( get_stylesheet_directory() . '/style.css')));    
wp_enqueue_style( 'pjax_child' ); }

 

array("leapin-stylesheet")は、依存関係で、親のスタイルシートが読み込まれた後に読み込む設定。読込順番の指定。

 

date_i18n('ndHis', filemtime( get_stylesheet_directory() . '/style.css'))

 

は、style.css の後に、更新日時のタイムスタンプを付ける設定。

 

* https://makotoiwasaki.com/wp-content/themes/pjax-blog/style.css?ver=825162621

 

のようにソースに表示される。

最後のタイムスタンプが変われば別のファイルとして認識されるので確実に読み込まれて変更内容が反映される。

 

これで変更する度に再読み込みする必要がなくなった。

 

参考:

 

  • Google の Indexing API を使うと、新しい投稿記事を瞬時にGoogleの検索エンジンに登録できる。 WordPress のプラグインとしてインデックスAPIが利用できる。使い方は英語 ...
  • Yoast SEO を停止して、Rank Math SEO プラグインを使ってみたらGoogle の検索結果に表示される記事抜粋スニペットの文字数が短過ぎに見えてびっくりした。#1 Yoast Alt ...
  • WP_CRON を停止して、Linux の crontab に移行する設定をこれまでに何度も試みたがうまくいかなかった。 毎日バックアップされるはずの、UpdraftPlus プラグインのクロンが動い ...
  • Kusanagi WordPress プラットフォームでは Fcache とBcache がある。 Fcache とはNginx ヱブサーバーのキャッシュ機能であり、Kusanagi の独自機能ではな ...
  • 目次 1 HTTPD アクセスログの日本語化 2 Logwatch も日本語化 HTTPD アクセスログの日本語化 Nginx,  Apache ヱブサーバーのアクセスログを見ると、日本語URLはエン ...
  • WordPressで使える頁カウンターをいくつか同時に使ってカウントの仕方の違いを比べてみた。WP-PostViews    長期常用中 Post Views Counter  新規インストール Go ...
  • Pjax で非同期画面遷移するWordpress テーマ Pjax Blog に変えてみた。 Pjax Blog テーマでは、Barba.js が使用されている。Pjax Blog | Unique ...
  • WordPressの投稿記事は、誤字脱字を少し修正しただけでも更新日時が変更されてしまう。 誤字の訂正だけで3年前の記事の更新日が更新されてしまうのはおかしい。 目次 1 編集画面に更新日時の変更オプ ...

タグクラウド

WordPress カテゴリ人気記事 Views most

WordPress カテゴリ人気記事 月間

20190825

タグ関連記事

閲覧履歴

    //cookieが無い場合の処理
2019
GA-views: 2
20190825