解決 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' );

Refer

• wp_enqueue_style() | Function | WordPress Developer Resources