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?


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


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


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

1
Itu bukan ide yang baik karena Anda ingin aset tersebut dapat diakses oleh browser selama mereka tidak berubah.
Marcel Stör
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.