Как добавить версию style.css в WordPress

Если вы разрабатываете темы, вам может понадобиться принудительная перезагрузка ресурсов при выпуске новой версии.

Версионирование темы указывается в файле style.css

/*
    Theme Name: Название вашей темы
    Version: 1.0.2
*/

В начале файла functions.php добавьте:

$theme = wp_get_theme();
define('THEME_VERSION', $theme->Version); // получает версию, указанную в style.css

Затем, при подключении CSS или JS используйте константу THEME_VERSION в качестве четвертого параметра:

function theme_styles()
{
    wp_enqueue_style('main', get_template_directory_uri().'/css/main.css', [], THEME_VERSION, 'all');
}
add_action('wp_enqueue_scripts', 'theme_styles'); 

В результате на странице будет выводиться:

.../your-theme-name/css/main.css?ver=1.0.2 

Это особенно удобно, когда у вас много ресурсов и вы не хотите менять их версии вручную.

Вместо жесткого указания версии, в некоторых случаях может быть лучше динамически версионировать ваш файл стилей. Это позволит автоматически обновлять версию при каждом изменении файла, сразу же очищая кеш браузера без необходимости постоянно редактировать functions.php.

Для этого можно использовать функцию filemtime(). Вот как это реализовать в дочерней теме, которая ссылается на стиль родительской темы:

    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), filemtime( get_stylesheet_directory() . '/style.css' )  );

Вы можете добиться этого одним из следующих способов:

1) Добавьте следующий тег в файл header.php вашей темы.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>'?v=1.2" type="text/css" media="all" />

2) Добавьте следующий код в файл functions.php вашей темы.

function theme_styles()  
{ 
  // Регистрируем стиль для темы следующим образом:  
  // (Сначала уникальное имя стиля (custom-style), затем src, 
  // зависимости, версия и тип медиа)
  wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css', array(), '1.2', 'all' );
}
add_action('wp_enqueue_scripts', 'theme_styles');

Для получения дополнительной информации см. эту страницу.

Лучший способ загрузки CSS в вашу тему WordPress — это следующий код в файле functions.php:

function theme_styles()  
{ 
  global $ver_num; // определяем глобальную переменную для номера версии
  $ver_num = mt_rand(); // при каждом вызове/загрузке стиля переменная $ver_num будет получать новое значение
  wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css', array(), $ver_num, 'all' );
}
add_action('wp_enqueue_scripts', 'theme_styles');

Это правильный способ загрузки стилей в вашу тему, а также он идеально подходит для тестирования, так как при каждом обновлении страницы будет загружаться актуальная версия стиля.

Если вы хотите избежать первого способа, можно использовать сокращенную версию и поместить следующую строку в файл header.php — результат будет таким же:

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

Удачи!

Попробуйте это:

Добавьте в functions.php следующий код:

function autoVer($filename){
    $url = get_template_directory_uri() . $filename;
    $file = get_template_directory() . $filename;
    if ( file_exists($file)) {
        return $url . '?v=' .md5(date("FLdHis", filectime($file)) . filesize($file));
    }
    clearstatcache();
}

Добавьте в header или footer вызов функции -> autoVer('/js/main.js');

В отличие от методов, представленных ранее, я считаю, что лучше использовать номер версии, указанный в верхней части вашего файла style.css:

// style.css
/**
Название темы: Моя тема
...
Версия: 1.2.3
...
**/

Чтобы использовать версию темы в вашем CSS, добавьте следующий код в файл functions.php (или аналогичный):

<?php

wp_enqueue_style(
    'my-theme',
    get_stylesheet_directory_uri() . '/style.css',
    [],
    wp_get_theme()->get('Version')
);

Это означает, что после редактирования файла style.css вам достаточно изменить номер версии в верхней части этого же файла, чтобы изменения отобразились во фронтенде.

Если вы посмотрите на секцию head HTML-кода темы, то увидите следующее:

<link rel='stylesheet'
    id='my-theme-css'
    href='... style.css?ver=1.2.3'
    type='text/css'
    media='all'
/>

Ещё одно решение, если вы до сих пор не разобрались — это изменить имя файла style.css вашей дочерней темы на, например, style2.css, а затем изменить его в файле functions.php вашей дочерней темы, как показано ниже:

wp_enqueue_style( 'style', get_stylesheet_directory_uri() .'/style2.css' );

Это заставит WordPress запрашивать и использовать новый CSS-файл для вашего сайта.

Здесь мы используем функцию WordPress wp_get_theme() для получения версии темы (как указано в таблице стилей темы style.css):

// получаем версию темы
function rave_get_version() {
    $theme_data = wp_get_theme();
    return $theme_data->Version;
}
$theme_version = rave_get_version();
global $theme_version;

wp_enqueue_style( 'main-style', get_template_directory_uri() .'/assets/css/style.css', [], THEME_VERSION, 'all' );

На самом деле вам не нужно сбрасывать кеш файла style.css.

Вы можете написать свой собственный CSS-файл и добавить его в очередь, как показано в примере от @vinod dalvi.

function theme_styles()  
{ 
  wp_enqueue_style('stylecss',get_template_directory_uri().'/yourname.css', array(), '1.2', 'all' );
}
add_action('wp_enqueue_scripts', 'theme_styles');

Согласно правилам браузеров, последний загруженный CSS-файл имеет более высокий приоритет, поэтому убедитесь, что используете !important в вашем CSS-коде, если это необходимо.

Удачи.

Это довольно простой способ получения номера версии путем вызова функции bloginfo($show) дважды. Сначала для таблицы стилей, а затем для номера версии.

<link rel="stylesheet" id="style-css" href="<?php bloginfo('stylesheet_url'); ?>?ver=<?php bloginfo('version'); ?>" type="text/css" media="all" />

Вот и все, что нужно сделать. Надеюсь, это поможет или окажется полезным. Вы можете просмотреть все доступные параметры и посмотреть, что можно вывести с помощью функции bloginfo().

Проигнорируйте мой комментарий, так как @Ravs указал на мою ошибку относительно параметра 'version' для функции bloginfo(). Действительно, он выводит номер версии WordPress.