justmurmur
justmurmur

自動更新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

CC BY-NC-ND 2.0 版权声明

喜欢我的文章吗?
别忘了给点支持与赞赏,让我知道创作的路上有你陪伴。

加载中…

发布评论