解決 WordPress Child Themes 沒有更新 stylesheet 問題
上一篇文章提到如何製作 Ashe 子主題，經過這兩天的研究發現，在XAMPP安裝的WordPress修改style.css樣式之後，傳到虛擬主機卻還是最原始的版本，怎麼用都還是無法套用新樣式。
在子主題加入父樣式及子樣式
而我是子主題的functions.php加入以下程式碼：
function ashe_child_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_uri() , array(), "1.0" );
}
add_action( 'wp_enqueue_scripts', 'ashe_child_enqueue_styles' );問題
用上面的程式碼可以讓我匯入原主題樣式跟自定義的樣式，但就是不知道為什麼不能更新樣式表。雖然知道原因是style.css連結到舊版本的檔案，但是就算修改新的版本號碼還是不能成功更新樣式。
檢查網頁原始碼
只好用瀏覽器去看網頁原始碼到底是否更新，以下是我的主題匯入版面的CSS檔案：
- parent theme stylesheet
<link rel='stylesheet' id='parent-style-css' href='https://yang10001.yia.app/wp-content/themes/ashe/style.css?ver=5.7.2' type='text/css' media='all' />- child theme stylesheet
<link rel='stylesheet' id='child-style-css' href='https://yang10001.yia.app/wp-content/themes/ashe-child/style.css?ver=1.0' type='text/css' media='all' />- original theme stylesheet
<link rel='stylesheet' id='ashe-style-css' href='https://yang10001.yia.app/wp-content/themes/ashe-child/style.css?ver=1.9.7' type='text/css' media='all' />前兩個是我用剛剛的functions.php連結的CSS樣式表，而最後一個是Ashe的程式碼自動連結的樣式，而這個樣式一直連到同一個版本的子主題樣式表，所以問題是出在最後一個上。
檢查原主題的functions.php
最後一個樣式的程式在原主題的functions.php，照理說應該是不會執行這段程式碼才對，但是可能在子主題匯入父主題時就會執行到這邊了，導致程式又再次引入父主題樣式，而且他已經固定版本號碼為1.9.7，而這裡儲存的樣式應該是原本第一次上傳的樣式並以存到CDN中，所以才會不管怎麼改都還是使用原本的樣式。
/*
** Enqueue scripts and styles
*/
function ashe_scripts() {
// Theme Stylesheet
wp_enqueue_style( 'ashe-style', get_stylesheet_uri(), array(), '1.9.7' );
// FontAwesome Icons
wp_enqueue_style( 'fontawesome', get_theme_file_uri( '/assets/css/font-awesome.css' ) );
// Fontello Icons
wp_enqueue_style( 'fontello', get_theme_file_uri( '/assets/css/fontello.css' ) );
// Slick Slider
wp_enqueue_style( 'slick', get_theme_file_uri( '/assets/css/slick.css' ) );
// Scrollbar
wp_enqueue_style( 'scrollbar', get_theme_file_uri( '/assets/css/perfect-scrollbar.css' ) );
// WooCommerce
if ( class_exists( 'WooCommerce' ) ) {
wp_enqueue_style( 'ashe-woocommerce', get_theme_file_uri( '/assets/css/woocommerce.css' ) );
}
// Theme Responsive CSS
wp_enqueue_style( 'ashe-responsive', get_theme_file_uri( '/assets/css/responsive.css' ), array(), '1.9.7' );
// Enqueue Custom Scripts
wp_enqueue_script( 'ashe-plugins', get_theme_file_uri( '/assets/js/custom-plugins.js' ), array( 'jquery' ), '1.8.2', true );
wp_enqueue_script( 'ashe-custom-scripts', get_theme_file_uri( '/assets/js/custom-scripts.js' ), array( 'jquery' ), '1.9.7', true );
// Comment reply link
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'ashe_scripts' );除了載入樣式表還會載入其他必要的CSS檔案。雖然可以直接把那個版本號碼改掉就好，但這樣就違背子主題用意，而且更新主題之後可能又會出現問題。
解決方法
直接覆蓋掉'ashe-style'樣式表的CSS版本號碼，並設成跟子主題一樣的版本號。
當用子主題時，get_stylesheet_uri()都會變成子主題的樣式路徑，這也是為什麼我不能夠更新樣式的主要原因，雖然最理想方式是直接不要引入父主題的程式碼，但是只要執行wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );這段就一定會跳到原主題的function.php，所以才會出此下策。
function ashe_child_enqueue_styles() {
$version = "1.0";
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_uri() , array(), $version );
wp_enqueue_style( 'ashe-style', get_stylesheet_uri() , array(), $version );
}
add_action( 'wp_enqueue_scripts', 'ashe_child_enqueue_styles' );經過修改版本之後，現在'ashe-style'的CSS樣式表版本已經變更為?ver=1.0，而這樣的方式也成功更新樣式了。
<link rel='stylesheet' id='ashe-style-css' href='https://yang10001.yia.app/wp-content/themes/ashe-child/style.css?ver=1.0' type='text/css' media='all' />Update
因為都直接使用網路上範例的，範例用的樣式表名稱都是child-style，重新審視程式碼之後，其實只要直接改ashe-style的版本號碼即可。
function ashe_child_enqueue_styles() {
$version = "1.0";
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
// 移除'child-style'
// wp_enqueue_style( 'child-style', get_stylesheet_uri() , array(), $version );
// 直接去更新'ashe-style'版本
wp_enqueue_style( 'ashe-style', get_stylesheet_uri() , array(), $version );
}
add_action( 'wp_enqueue_scripts', 'ashe_child_enqueue_styles' );