Mengaitkan nomor versi ke stylesheet utama tema anak

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?

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

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

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

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.

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.

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