如何缓存破坏子主题style.css


8

我的问题可能涉及多个方面,但从本质上讲,我觉得很简单:如何确保对子主题的更改style.css正确地在缓存之间传播?

我在一些地方读到,nnn当将资源提取为时,WP应该/将要放置WP版本http://host/wp-content/themes/theme-child/style.css?ver=nnn。在http://frightanic.com/上的安装中,我看到使用了父主题版本。我有W3 Total Cache和CDN,但是即使禁用了它们,也会wp-content/themes/frightanic/style.css?ver=3.0.7请求类似的资源。3.0.7Decode父主题的版本。

但是,如果这样,如果我更新子主题CSS而不同时更新WP或父主题,该如何从缓存中清除它?


Answers:


11

@dalbaeb的评论最终导致了深入的讨论和可行的解决方案。非常感谢!

我相信加载我的子主题CSS的原因'ver=<parent-theme-version>是因为我在子主题 1:1 遵循了WP Codex。我functions.php包含:

add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles() {
  wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}

我最终使用的代码最初是在https://wordpress.stackexchange.com/a/182023/30783中提到的,但是Internet上的许多站点都将其复制粘贴(未给予适当的信誉)。

// Making sure your child theme has an independent version and can bust caches: https://wordpress.stackexchange.com/a/182023/30783
// Filter get_stylesheet_uri() to return the parent theme's stylesheet
add_filter('stylesheet_uri', 'use_parent_theme_stylesheet');
// Enqueue this theme's scripts and styles (after parent theme)
add_action('wp_enqueue_scripts', 'my_theme_styles', 20);

function use_parent_theme_stylesheet()
{
    // Use the parent theme's stylesheet
    return get_template_directory_uri() . '/style.css';
}

function my_theme_styles()
{
    $themeVersion = wp_get_theme()->get('Version');

    // Enqueue our style.css with our own version
    wp_enqueue_style('child-theme-style', get_stylesheet_directory_uri() . '/style.css',
        array(), $themeVersion);
}

更新2017-01-26

当前的WP主题手册现在包含正确的修复程序::https://developer.wordpress.org/themes/advanced-topics/child-themes/#3-enqueue-stylesheet


真好!如果您回答了自己的问题,则可以接受您自己的回答作为解决方案。
phatskat

我知道,但是您必须等待2d,直到该功能可用。
MarcelStör16年

3
目前WP主题手册现在包含一个正确的解决办法:developer.wordpress.org/themes/advanced-topics/child-themes/...
马塞尔STOR

1

当您直接添加到header.php中并在每次更新css文件时刷新缓存时,此方法效果很好:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen" />

它显示:style.css?324932684,其中数字是文件被编辑的时间


1
应使用wp_enqueue_style而不是硬编码来排队样式。
bravokeyl

0

这也可能起作用。使用php rand函数:

function theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css?'.rand(),
        array( $parent_style )
    );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

1
这不是一个好主意,因为您希望这些资产在不更改的情况下仍可被浏览器访问。
MarcelStör16年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.