在更新Wordpress网站样式表时破坏浏览器缓存

Question

当我为我的站点编辑子样式表时，我遇到了一个问题，任何已经浏览过我的站点的人都不会看到正确的版本，因为他们的浏览器缓存使用的是同一个样式表的旧版本。我在函数文件中放置了一些与子主题相同的文件夹中的代码，以便在函数文件中增加“版本”数量(目前为2.4)时，强制浏览器使用新代码。使用这种方法不会破坏站点，但是它也不会修复浏览器缓存的问题，所以知道他们在做什么的人能帮我解决这个问题吗？下面是我在函数文件中使用的代码(这是我的第二次尝试，这个问题是编辑的)：

我是不是做错了什么事？还有什么其他事情会阻碍这种破坏浏览器缓存的方式呢？非常感谢

下面是父样式表函数文件的enqueue部分：

if ( !function_exists('purpose_enqueue_scripts') ) {
    function purpose_enqueue_scripts() {
    
        // Enqueue Styles
        wp_enqueue_style( 'purpose-style', get_stylesheet_uri() );
        wp_enqueue_style( 'purpose-style-mobile', get_template_directory_uri() . '/css/style-mobile.css', array( 'purpose-style' ), '1.0' );
        wp_enqueue_style( 'purpose-style-ie8', get_template_directory_uri() . '/css/style-ie8.css', array( 'purpose-style' ), '1.0' );
        
        // IE Conditional Styles
        global $wp_styles;
        $wp_styles->add_data('purpose-style-ie8', 'conditional', 'lt IE 9');
        
        // Resgister Scripts
        wp_register_script( 'purpose-fitvids', get_template_directory_uri() . '/js/jquery.fitvids.js', array( 'jquery' ), '20130729' );
        wp_register_script( 'purpose-hover', get_template_directory_uri() . '/js/hoverIntent.js', array( 'jquery' ), '20130729' );
        wp_register_script( 'purpose-superfish', get_template_directory_uri() . '/js/superfish.js', array( 'jquery', 'purpose-hover' ), '20130729' );
        wp_register_script( 'purpose-isotope', get_template_directory_uri() . '/js/jquery.isotope.js', array( 'jquery' ), '20130729' );
    
        // Enqueue Scripts
        wp_enqueue_script( 'purpose-html5shiv', get_template_directory_uri() . '/js/html5shiv.js' );
        wp_enqueue_script( 'purpose-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20130729', true );
        wp_enqueue_script( 'purpose-custom', get_template_directory_uri() . '/js/jquery.custom.js', array( 'jquery', 'purpose-superfish', 'purpose-fitvids', 'purpose-isotope', 'jquery-masonry', 'jquery-color' ), '20130729', true );
        
        // IE Conditional Scripts
        global $wp_scripts;
        $wp_scripts->add_data( 'purpose-html5shiv', 'conditional', 'lt IE 9' );
        
        // Load Flexslider on front page and slideshow page template
        if ( is_home() || is_front_page() || is_single() || is_page_template('template-slideshow.php') || is_page_template('template-blog.php') ) {
            wp_enqueue_script( 'purpose-flexslider', get_template_directory_uri() . '/js/jquery.flexslider.js', array( 'jquery' ), '20130729' );
        }
    
        // Load single scripts only on single pages
        if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
            wp_enqueue_script( 'comment-reply' );
        }
    }
}
add_action('wp_enqueue_scripts', 'purpose_enqueue_scripts');

Answer 1

如果您正在编辑子主题CSS，那么这一行与此无关：

    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', [], THEME_VERSION, 'all');

get_template_directory_uri总是引用父主题，get_stylesheet_directory_uri总是引用活动主题，在这种情况下是子主题。

同样，这些行引用当前活动的主题，也就是子主题：

$theme = wp_get_theme();
define('THEME_VERSION', $theme->Version); //gets version written in your style.css

你需要核实：

• 当您使用browser dev工具修改它时，您正在编辑的文件的URL会发生变化，如果它没有改变，那么您应该期望它被缓存，直到它改变为止。
• 您没有将父主题版本用于子主题样式表，反之亦然。
• 他们的名字都很清楚，以免混淆
• 子主题在查询时使用get_stylesheet_directory_uri，而不是get_template_directory_uri。

大多数人在文件更改时不使用主题版本来更新URL，因为这需要修改主题版本，这是一个手动的、容易被遗忘的过程。相反，使用filemtime或样式表的MD5哈希更可靠。