Mengaitkan nomor versi ke stylesheet utama tema anak


11

Di header.php, saya ingin mengaitkan nomor versi dengan stylesheet sehingga browser terpaksa menyegarkannya. Tetapi ketika bekerja dengan tema anak, stylesheetnya tidak secara eksplisit disebut, melainkan WordPress yang secara otomatis mencarinya. Jadi bagaimana atau di mana menghubungkan nomor versi ke stylesheet tema anak?

Jawaban:


5

Anda dapat memperbarui versi di lembar gaya tema anak itu sendiri ...

/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.1.2 <---- Update here
*/

Apakah Anda yakin ini akan menghapus setiap stylesheet yang di-cache dan memaksa versi baru untuk dimuat, sama seperti ketika menambahkan nomor versi di header.php?
drake035

Ya, jika Anda melihat sumber halaman Anda akan melihat string kueri diperbarui saat Anda mengubah nomor versi di dalam theme child Anda style.css
Matt Royal

7
Apakah ini masih berfungsi? Bagi saya, mengubah versi pada style.css tema anak tidak ada bedanya - string kueri style.css di kepala masih keluar sebagai nomor versi Wordpress (dalam hal ini 4.1.1).
Tim Malone

2
Tergantung bagaimana tema Anda telah diatur. Lihat ke bawah halaman @kraftner jawaban. Jika tema Anda tidak mendaftar dan kemudian mendaftar ulang file maka ini tidak akan berfungsi.
Matt Royal

4
Melihat lagi dan versi default sekarang didasarkan pada versi WP. Jadi jawaban ini tidak lagi valid! ( github.com/WordPress/WordPress/blob/… )
Matt Royal

13

Saya pikir cara terbaik untuk melakukan ini adalah membiarkan stylesheet tema anak (style.css) kosong dengan hanya komentar yang diperlukan (seperti nama tema, deskripsi dll, sehingga dapat wordpress mengenali tema Anda) dan kemudian membuat file css lain di- Anda theme-name-folder / css / main.css

Setelah itu pada function.php Anda dapat memiliki "versi" baru setiap kali Anda mengubah file Anda:

function my_scripts_and_styles(){

$cache_buster = date("YmdHi", filemtime( get_stylesheet_directory() . '/css/main.css'));
wp_enqueue_style( 'main', get_stylesheet_directory_uri() . '/css/main.css', array(), $cache_buster, 'all' );

}

add_action( 'wp_enqueue_scripts', 'my_scripts_and_styles', 1);

Logika:

Setiap kali Anda menyimpan file, waktu modifikasi file diubah. Waktu baru diteruskan ke fungsi tanggal untuk mengonversi waktu (filemtime mengembalikan integer yang mewakili waktu) ke format tanggal untuk menjadikannya string dalam format yang Anda inginkan. Dalam contoh kita, waktu sedang diformat dengan akurasi menit. Anda dapat mengubahnya untuk melacak bahkan kedua yaitu. "YmdHis"Setelah itu waktu modifikasi file baru diteruskan sebagai versi baru wp_enqueue_style.

Referensi:

http://www.php.net/filemtime

http://php.net/manual/en/function.date.php


2
Saya lebih suka menggunakan versi tema sebagai cache buster. Jika Anda menggunakan, $cache_buster = wp_get_theme()->get('Version')Anda akan mendapatkan versi yang ditentukan di blok komentar style.css. Lihat codex.wordpress.org/Function_Reference/wp_get_theme untuk referensi.
Marcel Stör

Nice tidak tahu keberadaan fungsi ini. Tetapi sekali lagi Anda harus mengubah versi secara manual setiap kali Anda membuat perubahan dan itu bisa membuat frustrasi terutama ketika mengembangkan (diberikan masalah cache). Anda juga wajib untuk kode dalam style.css bahkan jika Anda mengimpor file main.css Anda di sana, tetapi saya tidak menganggapnya sebagai pendekatan yang baik. Lebih jauh lagi jika Anda kode dalam SASS itu bisa sulit lagi untuk mempertahankannya. Akhirnya saya pikir lebih cepat untuk memeriksa waktu file daripada membuka file, membaca komentar pertama dan menemukan versinya (saya tidak yakin jika wp_get_theme()->get('Version')bekerja seperti itu).
Laxmana

Benar, tetapi di sisi positif Anda mendapatkan kontrol yang lebih baik atas gaya Anda. Anda dapat memperbarui CSS secara bertahap dan ketika Anda puas dengan hasilnya, Anda akhirnya dapat membenturkan versi dan "melepaskannya".
Marcel Stör

1
"lepaskan" ke pengguna yang kembali ke situs. pengguna baru melihat segar apa pun yang ada di file.
ryanrain

10

Yang perlu Anda lakukan adalah membatalkan registrasi gaya utama dengan pegangan dan kemudian mendaftar ulang dengan nomor versi Anda. Dalam hal ini pegangannya adalah style-css.

Anda dapat menentukan pegangan yang perlu Anda gunakan dengan melihat tautan stylesheet yang diberikan:

<link rel='stylesheet' id='style-css-css'  href='http://site-url/wp-content/themes/child-theme/style.css?ver=4.6.1' type='text/css' media='all' />

Di sini id adalah style-css-cssyang berarti pegangan kitastyle-css

Letakkan ini di function.php dari tema anak Anda:

function wpse_145141_change_style_version(){
    // First de-register the main stylesheet
    wp_deregister_style( 'style-css' );
    // Then add it again, using your custom version number
    wp_register_style( 'style-css', get_stylesheet_uri(), array(), "VERSION_NUMBER" );
    //finally enqueue it again
    wp_enqueue_style( 'style-css');
}

add_action( 'wp_enqueue_scripts', 'wpse_145141_change_style_version');

1

Jawaban teratas saat ini adalah bergantung pada tema, karena mengharuskan pengembang tema untuk menjadikan nomor versi tema anak itu menjadi variabel dan kemudian menambahkannya ke child style.css saat di-enqueuing. Saya pernah melihat ini pada beberapa tema, tetapi tidak banyak. Berikut ini berfungsi pada tema apa pun yang mendaftarkan gaya anak di functions.php - tidak akan bekerja dengan aturan @import lama, yang saya tidak melihat banyak lagi.

Di functions.php dari tema anak, Anda harus memiliki sesuatu yang mirip dengan ini:

// enqueue the child theme stylesheet

function wp_schools_enqueue_scripts() {
  wp_register_style( 'childstyle', get_stylesheet_directory_uri() . '/style.css'  );
  wp_enqueue_style( 'childstyle' );
}
add_action( 'wp_enqueue_scripts', 'wp_schools_enqueue_scripts', 11);

Jika Anda mengubahnya ke berikut ini, itu akan menambahkan cap waktu sebagai nomor versi setiap kali file disimpan, memungkinkan setiap perubahan stylesheet untuk menembus cache lokal:

 // enqueue the child theme stylesheet

 function wp_schools_enqueue_scripts() {
   wp_register_style( 
     'childstyle', 
     get_stylesheet_directory_uri() . '/style.css', 
     array(), 
     filemtime( get_stylesheet_directory() . '/style.css' ) 
   );
   wp_enqueue_style( 'childstyle' );
 }
 add_action( 'wp_enqueue_scripts', 'wp_schools_enqueue_scripts', 11);

Semoga ini bisa membantu seseorang. Saya menggunakan ini di setiap situs yang saya kelola secara aktif.


0

Saya percaya bahwa jika Anda menggunakan editor tema Wordpress untuk mengedit stylesheet tema anak Anda, maka secara otomatis menambahkan nomor versi baru setiap kali Anda menyimpan file.


1
Benar tapi saya tidak menggunakan editor WP untuk mengerjakan stylesheet saya ..
drake035

0

Alih-alih menggunakan style.css standar, saya biasanya menggunakan wp_enqueue_style di functions.php tema anak atau file php lain yang disertakan. Jadi, Anda masih memiliki style.css dalam tema anak dengan semua detail tema anak tetapi kemudian Anda dapat memiliki file css terpisah di tema anak untuk styling tema anak yang sebenarnya (saya biasanya meletakkan ini di aset / css direktori dalam tema anak). Ini juga akan memungkinkan Anda untuk mengatur versi CSS dengan parameter ke-4. Sebagai contoh:

function theme_name_child_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_directory_uri() . '/assets/css/child-style.css', array(), '1.0.0', 'screen');
}

add_action( 'wp_enqueue_scripts', 'theme_name_child_scripts' );

Anda dapat menambahkan prioritas pada tindakan jika tidak memuat dalam urutan yang benar atau berfungsi dengan parameter dependensi di wp_enqueue_style di atas:

add_action( 'wp_enqueue_scripts', 'theme_name_child_scripts', 20 );
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.