WordPress修改style.css後沒反應的問題

初步觀察,css的檔名會自動產生?ver=4.7.5的字串

<link rel="stylesheet" id="style-css" href="../style.min.css?ver=4.7.5" type="text/css" media="all">

這個字串應該是wordpress的版本字串,好像沒有多大用處。
當覽器檢查到需要載入這個CSS時,會先檢查電腦的暫存檔內是否有這個檔案以及是否已經過期,如果還在期限內,就直接抓取遊覽器的暫存檔案,因此不管你怎麼修改style.css,在還沒有過期之前,遊覽器都不會去抓取新檔案,因此看起來就像沒有修改style.css的狀況
(印象中,之前只要使用Chrome選重新載入的方式可以重新載入一次style.css,最近發現這個功能沒了)。
知道這個原因之後,原本是想要採用style.css?time的方式,讓使用者每次都讀取新的CSS檔案,但是這種方法有一個大缺點,上線前於自己的電腦上很好用,但是上線後,伺服器的流量可能會突飛猛進,需要手動修改這個問題,有點麻煩
只好去拜Google大神,很外就找到了以下的解法。
<link href=”for_css/style.css?<?php echo filemtime(‘for_css/style.css’); ?>” rel=”stylesheet” type=”text/css” />
系統直接去搜尋CSS檔案的修改時間,當成檔名,這樣可以解決伺服器的流量可能會突飛猛進的問題。而WP比較麻煩一點,但是按照以下方法也是可以達到功能:
在functions.php 內加入以下程式碼後,就順利的解決了。

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
wp_enqueue_style( 'parent-style',get_template_directory_uri().'/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_uri(), NULL,
filemtime( get_stylesheet_directory() . '/style.css' ) );
}

轉載自 https://www.techmarks.com/wp-theme-version/

發佈留言