WordPress как на ладони
wordpress jino

Как всегда загружать свежие файлы стилей и скриптов в браузере?

Как то прочитал на вашем сайте про чудесное "правильное" подключение стилей. С тех пор на всех сайтах на WP делаю так. Раньше когда я подключал через link и мог добавить в конце имени файла стилей ?v=123 и все изменения в css применялись, сейчас же не получается так сделать. Тут то столкнулся с проблемой что не могу донести изменения на сайте до конечного пользователя. Т.е. я меняю цвет ну например шапки, захожу со своего телефона - цвет не меняется(у целевого юзера то же самое). Проблема наблюдается в Chrome и Opera и скорее всего Safari. Firefox меняет все моментально. Честно говоря уже все перепробовал от очистки истории до перезагрузки телефона. Устанавливал SuperCache. Прописывал мета-тэги

<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

все безрезультатно. Не знаю куда копать, в этом деле не так давно и с таким столкнулся первый раз. Получается что мне приходят правки по сайту, я их делаю, а заказчик ничего не видит. Как заставить вышеуказанные браузеры использовать последнюю версию лежащего на хосте css файла?
Код function.php

<?php

add_action('wp_enqueue_scripts', 'add_ss');

function add_ss() {
	wp_deregister_script('jquery');
	wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
	wp_enqueue_script('jquery');
	wp_enqueue_script('js', get_template_directory_uri().'/js/js.js');
	wp_enqueue_style('bootstrap.min', get_template_directory_uri().'/css/bootstrap.min.css');
	wp_enqueue_script('bootstrap.js', get_template_directory_uri().'/js/bootstrap.min.js');
	wp_enqueue_style('owl.carousel.min.css', get_template_directory_uri().'/css/owl.carousel.min.css');
	wp_enqueue_style('owl.theme.default.css', get_template_directory_uri().'/css/owl.theme.default.css');
	wp_enqueue_script('owl.carousel.min.js', get_template_directory_uri().'/js/owl.carousel.min.js');
	wp_enqueue_style('my_styl', get_stylesheet_uri());
	wp_enqueue_style('media.css', get_template_directory_uri().'/css/media.css');
	wp_enqueue_script('fa.js', '//use.fontawesome.com/4a75adc633.js');
}
?>
1
Kenny1992663 5 месяцев назад
  • 0
    Kama4486

    В четвертом параметре wp_enqueue_script() и wp_enqueue_style() можно указать версию файла. Там можно указать любую строку и она будет добавлена в URL файла так: URL?ver=УКАЗАННАЯ_СТРОКА.

    Т.е. тебе нужно изменить подключение на такое:

    add_action('wp_enqueue_scripts', 'add_ss');
    function add_ss() {
    	$tpl_uri = get_template_directory_uri(); // оптимизация
    	$ver     = '1.0'; // уникальная строка, чтобы URL файла отличался и не срабатывал кэш
    	// динамическое указание версии на основе времени изменения файла
    	$ver = filemtime( get_stylesheet_directory() .'/style.css' ); // получит что-то вроде 1254875
    
    	wp_deregister_script('jquery');
    	wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
    	wp_enqueue_script('jquery');
    	wp_enqueue_script('js', $tpl_uri .'/js/js.js', array(), $ver );
    	wp_enqueue_style('bootstrap.min', $tpl_uri .'/css/bootstrap.min.css');
    	wp_enqueue_script('bootstrap.js', $tpl_uri .'/js/bootstrap.min.js');
    	wp_enqueue_style('owl.carousel.min.css', $tpl_uri .'/css/owl.carousel.min.css');
    	wp_enqueue_style('owl.theme.default.css', $tpl_uri .'/css/owl.theme.default.css');
    	wp_enqueue_script('owl.carousel.min.js', $tpl_uri .'/js/owl.carousel.min.js');
    	wp_enqueue_style('my_styl', get_stylesheet_uri(), array(), $ver );
    	wp_enqueue_style('media.css', $tpl_uri .'/css/media.css', array(), $ver );
    	wp_enqueue_script('fa.js', '//use.fontawesome.com/4a75adc633.js');
    
    }

    Тут я добавил версию только к скриптам и стилям, которые меняются. Для библиотек это не обязательно, ты же их не меняешь...

    Более того, чтобы постоянно не менять уникальную строку (версию). Можно указать её динамически - налету получить время последнего изменения файла, например возьмем файл стилей:

    $ver = filemtime( get_stylesheet_directory() .'/style.css' ); // получит что-то вроде 1254875

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

    Вообще, можно добавить такую динамику для каждого файла отдельно, чтобы файл изменился URL изменился тоже и не зависеть только от изменения style.css...

    Kenny199266 5 месяцев назад

    p.s. filetime() на filemtime() заменил.

    Kama 5 месяцев назад

    Ага, опечатка...

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Регистрация. Вход.