Bagaimana cara cache bust theme style.css anak

8

Mungkin ada beberapa aspek dari pertanyaan saya, tetapi pada dasarnya saya merasa mudah: bagaimana Anda memastikan perubahan pada tema anak style.cssdisebarkan dengan benar di seluruh cache?

Saya membaca di beberapa tempat bahwa WP seharusnya / akan menempatkan versi WP nnnketika sumber daya diambil sebagai http://host/wp-content/themes/theme-child/style.css?ver=nnn. Dalam instalasi saya di http://frightanic.com/ saya melihat bahwa versi tema induk digunakan sebagai gantinya. Saya memiliki W3 Total Cache dan CDN di tempat tetapi bahkan jika mereka dinonaktifkan sumber daya seperti wp-content/themes/frightanic/style.css?ver=3.0.7diminta. 3.0.7adalah versi dari tema induk Decode .

Tapi betapapun itu, jika saya memperbarui CSS tema anak saya tanpa memperbarui WP atau tema induk pada saat yang sama, bagaimana saya dapat memecahkannya dari cache?

Marcel Stör
sumber

Jawaban:

11

Komentar @ dalbaeb akhirnya mengarah pada diskusi yang mendalam dan solusi yang layak. Terima kasih banyak!

Saya percaya alasan CSS tema anak saya dimuat menggunakan 'ver=<parent-theme-version>karena saya telah mengikuti WP Codex pada tema anak 1: 1. Saya functions.phpberisi ini:

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

Kode yang akhirnya saya gunakan pertama kali disebutkan di https://wordpress.stackexchange.com/a/182023/30783 tetapi banyak situs di Internet menyalinnya (tanpa memberikan kredit yang layak).

// 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);
}

Pembaruan 2017-01-26

Buku pegangan WP Theme saat ini sekarang berisi perbaikan yang tepat :: https://developer.wordpress.org/themes/advanced-topics/child-themes/#3-enqueue-stylesheet

Marcel Stör
sumber
Bagus! Jika Anda menjawab pertanyaan Anda sendiri, tidak apa-apa untuk menerima jawaban Anda sendiri sebagai solusinya.
phatskat
Saya tahu tetapi Anda harus menunggu 2d sampai fungsi itu tersedia.
Marcel Stör
3
Buku pegangan WP Theme saat ini sekarang berisi perbaikan yang tepat: developer.wordpress.org/themes/advanced-topics/child-themes/…
Marcel Stör
1

Ini berfungsi baik ketika Anda menambahkan langsung di header.php Anda dan menyegarkan cache setiap kali Anda memperbarui file css Anda:

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

Ini menampilkan: style.css? 324932684 di mana nomor tersebut adalah waktu ketika file diedit

jcdarocha
sumber
1
Gaya harus enqueued menggunakan wp_enqueue_stylealih-alih pengkodean keras.
bravokeyl
0

Ini mungkin bekerja juga. Menggunakan fungsi rand php:

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' );
Joshua Coolman
sumber
1
Itu bukan ide yang baik karena Anda ingin aset tersebut dapat diakses oleh browser selama mereka tidak berubah.
Marcel Stör