自動更新WP的JS&CSS文件，解決修改wordpress的CSS JS沒反應的問題 | WordPress網站建置

使用wordpress建置網站的時候，每次只要是上線後修改css或JS就會出現「為什麼網站沒吃到最新的版本？」。上網查了一下，才知道原來是因為網站暫存或使用CDN的關係。如果你也有這樣的困擾，以下提供3個解決辦法：

方法1  透過版本編號更新

在function裡直接引入最近版本編號參數，範例如下

<pre class="wp-block-code has-white-color has-text-color"><code>function theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() . '/css/customstyle.css', array(), '1.0.0';)
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );</code></pre>

wordpress 函數說明 – wp_enqueue_style() for CSS

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

$handle：用於區別 CSS 的名稱(string)；
$src：CSS 檔案位置(string)；
$deps：相關性，指此 CSS 必須在此 CSS 之前載入(array,非必需)；
$ver：幫 CSS 加註版本，留空白則使用當前 wordpress 版本號碼(string,非必需)；
$media：用於 CSS 的 media 參數值(string,非必需)。

wordpress 函數說明 – wp_enqueue_script() for JS

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

$handle：用於區別 script 名稱(string)；
$src：javascript 檔案位置(string)；
$deps：相關性，指此 javascript 必須在此 javascript 之前載入(array,非必需的)；
$ver：幫 javascript 加註版本，留空白則使用當前 wordpress 版本號碼(string,非必需)；
$in_footer：是否放置到網頁HTML底部載入(boolean,非必需)。

方法2 透過時間記號更新

用filemtime()來取得檔案最新更新的時間記號，然候用時間來做為參數的值

function theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() ) . '/css/customstyle.css', null, filemtime( get_stylesheet_uri() . '/css/customstyle.css'));
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

方法3 直接在CSS上加上時間變數

<link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ) ?>/style.css?v=<?=time()?>" media='all' type="text/css"/>

以上三個方法都可以解決CSS或JS不會即時顯示修改的問題，但因為這樣會使得網站一直不斷取抓取新的版本，對網站載入速度還是會有一定影響，建議大家修改完後要記得改回去。

修改網站務必記得一定要備份，不然很容易GG

就這樣拉，如果有問題歡迎在留言提出討論喔

---

參考資料
WordPress Code Reference