web-dev-qa-db-ja.com

子テーマstyle.cssをバストキャッシュする方法

私の質問にはいくつかの側面があるかもしれませんが、本質的には簡単なことだと思います。子テーマstyle.cssへの変更がどのようにしてキャッシュ間で適切に伝播されるのですか？

私は、リソースがhttp://Host/wp-content/themes/theme-child/style.css?ver=nnnとしてフェッチされたときにWPがnnnにWPバージョンを配置すべきであることをいくつかの場所で読みました。 http://frightanic.com/ 私のインストールでは、 親テーマ バージョンが代わりに使用されているのがわかります。 W3 Total CacheとCDNを用意していますが、無効になっていてもwp-content/themes/frightanic/style.css?ver=3.0.7のようなリソースが要求されています。 3.0.7は、 Decode 親テーマのバージョンです。

しかし、WPも親テーマも更新せずに自分の子テーマCSSを更新した場合、それをキャッシュから破棄するにはどうすればよいでしょうか。

child-themecache
7
Marcel Stör

@ dalbaebのコメントは結局洞察に満ちた議論と実行可能な解決策につながります。どうもありがとう！

私の子テーマCSSが'ver=<parent-theme-version>を使ってロードされたのは、子テーマの WP Codex 1：1に従ったからであると思います。私の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 - で言及されていました しかしインターネット上の多数のサイトが（適切な信用を与えることなく）それをコピー＆ペーストしました。

// 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

10
Marcel Stör

あなたの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
jcdarocha

これはうまくいくかもしれません。 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' );
0
Joshua Coolman