WordPress讓瀏覽器自動加載最新的CSS、JS文件(免刷新緩存)

作者: 魯智深 分類: wordpress 發布時間: 2016-03-24 11:06

在開發WordPress 主題的時候,如果頻繁更新主題的CSS、JS文件但主題已經上線,如何讓訪客的瀏覽器獲取最新的CSS、JS文件而非等到瀏覽器刪除緩存后?下面就介紹一個簡單的方法。

版本號參數

相信有過開發經驗的童鞋都知道是用版本號參數控制。即原來比如說css 文件路徑代碼是如下面的:

1
http://xxx.com/wp-content/themes/Devework/style.css

那么如果更新了css 文件,可以為此添加版本號,即改為:

1
http://xxx.com/wp-content/themes/Devework/style.css?v=2

但是,在WordPress 中如果每修改一次就要手動更新版本號那太累了。如何讓版本號自動更新(即?v=后面的數字自動更新)?

時間戳

想必你也知道了,用時間戳代替版本號。在WordPress 中,用時間戳代替版本號的處理方式可以更加方便一點。

1
http://xxx.com/wp-content/themes/Devework/style.css?v=<?php echo time(); ?>

或者:

1
http://xxx.com/wp-content/themes/Devework/style.css?v<?php echo filemtime($pathToCSS); ?>" />

WordPress 中呢?

有過WordPress 主題開發經驗的都知道,WordPress 中引用主題的styl.css 文件的路徑是直接使用函數<?php bloginfo(‘stylesheet_url’);?>的,這么一來,在header.php 中的路徑代碼如下:

1
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen, projection" />

雖然手動修改路徑也可以,但我們并不推薦該方法,你可以hook一下該wp_enqueue_style()?函數。

將下面的代碼添加到主題的functions.php 文件下即可為styl.css 文件添加時間戳版本號:

1
2
3
4
5
6
add_action( 'wp_enqueue_scripts', 'add_styles' );
function add_styles()
{
     $css_file = get_stylesheet_directory() . '/css/style.css';
     wp_enqueue_style( 'css-file', get_stylesheet_directory_uri().'/css/style.css', NULL, filemtime($css_file) );
}

js文件的話依照上面的照搬即可實現。

如此一來,就能保證瀏覽器每次訪問都是最新的css、js文件,而非采用緩存。

本文轉載自網站devework

如果覺得我的文章對您有用,請隨意打賞。您的支持將鼓勵我繼續創作!

發表評論

電子郵件地址不會被公開。 必填項已用*標注

中了亿元大奖