Добавление номера версии к основной таблице стилей дочерней темы

Я считаю, что лучший способ — оставить таблицу стилей дочерней темы (style.css) пустой, содержащей только необходимые комментарии (такие как название темы, описание и т. д., чтобы WordPress мог распознать вашу тему), а затем создать другой CSS-файл в папке your-theme-name-folder/css/main.css.

После этого в файле function.php вы можете задавать новую «версию» каждый раз при изменении файла:

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

Логика:

Каждый раз при сохранении файла изменяется время его модификации. Новое время передаётся в функцию date для преобразования времени (filemtime возвращает целое число, представляющее время) в формат даты, чтобы получить строку в желаемом формате. В нашем примере время форматируется с точностью до минут. Вы можете изменить его для отслеживания даже секунд, например, "YmdHis". Затем новое время модификации файла передаётся в качестве новой версии в wp_enqueue_style.

Ссылки:

http://www.php.net/filemtime

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

Что вам нужно сделать — это отменить регистрацию основного стиля по его handle (идентификатору), а затем зарегистрировать его заново с вашей версией. В данном случае идентификатор — style-css.

Вы можете определить нужный handle, посмотрев на ссылку на таблицу стилей в HTML-коде:

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

Здесь id — style-css-css, что означает, что наш handle — style-css.

Добавьте этот код в function.php вашей дочерней темы:

function wpse_145141_change_style_version(){
    // Сначала отменяем регистрацию основного стиля
    wp_deregister_style( 'style-css' );
    // Затем добавляем его снова с вашим номером версии
    wp_register_style( 'style-css', get_stylesheet_uri(), array(), "НОМЕР_ВЕРСИИ" );
    // И наконец подключаем его снова
    wp_enqueue_style( 'style-css');
}

add_action( 'wp_enqueue_scripts', 'wpse_145141_change_style_version');

Текущий лучший ответ зависит от темы, так как требует, чтобы разработчик темы сделал номер версии дочерней темы переменной, а затем добавил его в child style.css при постановке в очередь. Я видел такое в некоторых темах, но не во многих. Следующий метод работает с любой темой, которая регистрирует стили дочерней темы в functions.php — он не будет работать со старым правилом @import, которое я уже редко встречаю.

В файле functions.php дочерней темы у вас должно быть что-то подобное:

// загрузка стилей дочерней темы

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

Если изменить его следующим образом, то при каждом сохранении файла будет добавляться временная метка в качестве номера версии, что позволит каждому изменению таблицы стилей обходить локальный кеш:

 // загрузка стилей дочерней темы

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

Надеюсь, это поможет кому-то. Я использую этот метод на каждом сайте, которым активно управляю.

Вместо использования стандартного style.css я обычно применяю wp_enqueue_style в файле functions.php дочерней темы или другом подключаемом PHP-файле. Таким образом, у вас останется style.css в дочерней теме со всеми её деталями, но при этом вы можете иметь отдельный CSS-файл в дочерней теме для фактического стиля дочерней темы (я обычно размещаю его в директории assets/css внутри дочерней темы). Это также позволит вам установить версию CSS с помощью четвёртого параметра. Например:

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

Вы можете добавить приоритет к действию, если стили загружаются в неправильном порядке, или работать с параметром зависимости в wp_enqueue_style выше:

add_action( 'wp_enqueue_scripts', 'theme_name_child_scripts', 20 );

Используйте filemtime для версионирования по изменению файла. Удалите и заново добавьте стили.

1. Посмотрите в исходном коде (ctrl + U) и найдите ID CSS дочерней темы без "-css". В данном случае это voyager-default

<link rel='stylesheet' id='voyager-default-css' href='/wp-content/themes/voyager-child-theme/style.css?1606484598' type='text/css' media='all' />

2. Используйте этот код (источник), но замените 'style' на найденную строку (здесь 'voyager-default')

functions.php дочерней темы

function add_timestamp_to_childtheme_stylesheet() {
    wp_dequeue_style( 'style' );
    wp_deregister_style( 'style' );
    wp_enqueue_style('style', get_stylesheet_uri().'?'.filemtime(get_stylesheet_directory().'/style.css'), array(), null);
}
add_action( 'wp_print_styles', 'add_timestamp_to_childtheme_stylesheet' );

Я считаю, что если вы используете редактор тем Wordpress для редактирования таблицы стилей дочерней темы, то при каждом сохранении файла автоматически добавляется новый номер версии.