Как удалить параметр с версией в подключаемых Javascript и CSS файлах? [WordPress]

Привет друг 🙂

Недавно, работая над одним из своих проектов, я решил проанализировать его (это сайт) в плане скорости. Для этого решил использовать классный сервис GTMetrix, он бесплатный и очень удобный. В своем чек-листе WordPress оптимизатора я уже упоминал об этом инструменте, советую тебе как-нибудь обязательно прогнать через этот сервис свой сайт, если у тебя такой есть, или, например, сайт своей компании, если тебе это интересно.

Так вот, после того, как GTMetrix изучил мой сайт, он сказал мне, что есть несколько недочетов, которые желательно исправить. И одним из этих серьезных недочетов был следующий: Remove query strings from static resources. PageSpeed поставил мне за него меньше 50 баллов.

Скриншот того, как стало после оптимизации этого пункта:

gtmetrix remove query strings from static resources

Просто забив этот запрос в гугл, я через несколько минут узнал, что ко всем файлам javascript (.js) и все файлы стилей CSS (.css), которые вызываются через штатные функции вордпресса (wp_enqueue_script, wp_enqueue_style),  в названии в коде страницы дописывается параметр ?ver=[любая версия].

То есть, если разработчик какого-то плагина, который вы используете на своем блоге/сайте, подключает необходимые скрипты и стили через одну из соответствующих функций и указывает свою версию, то будет показываться его версия этого файла. Если же он ничего не указывает, то в параметр ?ver будет дописываться текущая версия установленного WordPress-а.

В коде это выглядит, к примеру, вот так:

<script type="text/javascript" src="/jquery.min.js?ver=1.7.2"></script>

Как я понял, это сделано для того, чтобы в случае обновления какого-то плагина, который использует дополнительные JS или CSS файлы, кэш браузера любого посетителя переключался со старого скрипта на новый. Потому что иначе, допустим, твоей браузер сохраняет Javascript-файлы и CSS-файлы на твой компьютер (т.е. кэширует), чтобы в дальнейшем не скачивать их снова, а просто брать уже готовые. И вот когда версия каждого скрипта и файла стилей указана, то при ее изменении на сайте, браузер подумает, что это новый файл и скачает его в кэш заново, тем самые отобразив все свежие изменения.

Важно! Если у тебя на сайте используются какие-то сложные и часто меняющиеся стили и/или скрипты, то тебе нужно обязательно проверить, что станет с сайтом, когда ты используешь этот код.

Итак...

Как убрать версию из скриптов/стилей в WordPress-е:

Зайди в админку > Внешний вид > Редактор > справа в списке найди Функции темы (functions.php) > добавить следующий код в конец файла перед закрывающим тэгом PHP (?>):

function _remove_script_version( $src ){
	$parts = explode( '?', $src );
	return $parts[0];
}
//Это для скриптов
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
//Это для стилей
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

P.S. Если тебе нужно избавиться от версий в запросах для чего-то одного - либо стилей, либо скриптов, убери из кода выше соответствующую строку.

Если у тебя что-то не получается или какие-то ошибки на сайте, обязательно напиши об этом в комментариях под этой записью.

Успехов в освоении WordPress!

Богдан Григорук

[ Прочитайте комменты ниже или напишите свой... ]

Ищете хостинг для своего сайта? Могу порекомендовать свой (нажмите здесь)

21 комментарий к “Как удалить параметр с версией в подключаемых Javascript и CSS файлах? [WordPress]”

  1. Иван 03.09.2013 в 14:27 #

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

    • Богдан 06.09.2013 в 09:45 #

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

      Если что-то поменяется в худшую сторону, то для "отката" тебе достаточно будет просто убрать код, который ты добавил согласно этой заметке в файл functions.php.

      То есть, этот кусочек код никак не меняет файлы, и беспокоиться об их сохранении не нужно. Фактически, он просто немного влияет на вывод ссылок на подключаемые на страницах стили и скрипты, а именно - убирает вот этот кусочек "?ver=1.1.1.1".

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

      Если что-то еще осталось неясным для тебя, пиши 🙂

  2. den 22.09.2013 в 14:11 #

    О, я дважды здесь. Первый раз сделал так, как написано, второй раз искал, что я сделал чтобы убрать это 🙂

    Полезный пост, спасибо.

    • Богдан 23.09.2013 в 19:24 #

      Рад помочь, Den 🙂 Пиши на этом блоге в комментах, если нужна будет помощь с чем-то подобным. Постараюсь помочь.

  3. Светлана 12.10.2013 в 03:27 #

    Работает. 🙂 Богдан, а как убрать версии тем и некоторых плагинов, которые выводят мета генератор? Жаль, подписки на комментарии нет для отслеживания ответа по почте.

  4. Светлана 13.10.2013 в 00:19 #

    Богдан, у тебя получаются толковые рекомендации. 🙂 Я немножко другой вопрос задала. Как скрыть версию темы - логика для разных тем. А также плагинов. К примеру, у конкретных плагинов Saphali Lite и WooCommerce.

    • Богдан 13.10.2013 в 13:55 #

      Понятно. В таком случае, насколько я знаю, надо искать вывод версий в коде плагинов. В некоторых темах или плагинах разработчики предусматривают код, который позволяет скрыть версию с помощью remove_action или remove_filter, аналогично тому, что я описал в новой инструкции. В остальных случаях нужно просто убирать вывод версий из кода.

  5. leo 17.10.2013 в 04:38 #

    А наоборот как узнать какая версия СВОЕГО вордпресс ,если в самом файле версия.пхп изменил раньше . Вообщем в каких файлах ее можно найти.

    • Богдан 19.10.2013 в 14:05 #

      Привет! Попробуй ввести в адресной строке свой сайт и дописать к адресу: /readme.html

      То есть, например, twog.me/readme.html, так можно открыть файл, в котором будет указана версия WordPress.

  6. Светлана 17.10.2013 в 22:10 #

    Спасибо, Богдан! 🙂

  7. Игорь 15.12.2014 в 23:46 #

    этот пост без преувеличения спас мне жизнь, огромное спасибо! я часа три копался, прежде чем понять, почему wp перестал реагировать на изменение стилей, а проект утром должен быть готов на 100%. прыгаю по офису от счастья.)

    • Богдан 26.12.2014 в 15:25 #

      Рад что вам помогло. Спасибо за коммент, Игорь!

  8. Евгений 09.02.2016 в 14:16 #

    Здравствуйте, Богдан. Спасибо за статью, очень помогла. Все работает.

    • Богдан 09.02.2016 в 14:38 #

      Спасибо, Евгений. Заглядывайте 🙂

  9. Александр 28.02.2016 в 05:38 #

    Добрый день, прописал так как вы советуете, но теперь при просмотре кода страницы выдает ошибку GET https://fonts.googleapis.com/css, не подскажите что с этим делать? (в pingdom стало все ГУД)

    • Богдан 28.02.2016 в 11:01 #

      Здравствуйте, Александр. Спасибо за вопрос.

      Попробуйте вот эту строку:

      $parts = explode( '?', $src );

      ... заменить на эту:

      $parts = explode( '?ver', $src );

      Тогда наша функция не будет обрезать строку запроса в ссылке Google Fonts API, которая тоже отделяется символом "?".

  10. Александр 28.02.2016 в 21:18 #

    спасибо! добавил в избранное!

  11. ВИК 17.11.2016 в 13:48 #

    Привет Богдан!
    Я совсем мало опытный.
    Твоя статья как раз тоже мой случай. Ставлю кодировку в function, но наверное не туда. Что имеется ввиду конец файла? Если ставлю после последней } или перед ней }, то сайт не работает. После твоего кода пишу ?> Ставил в середину файла перед последним ?>, тоже не работает. Где ошибка, посоветуй

  12. Максим 20.12.2016 в 04:04 #

    Спасибо за решение, Богдан! Ответьте пожалуйста на 2 вопроса:

    1) Применяя этот метод, я буду получать обновление кэша на стороне пользователя при каждом заходе? Или единожды после применения метода (так как ?ver убрали, он загрузит новый файл 1 раз и всё?), и после новых изменений css кэш на стороне пользователя опять будет мешать увидеть нововведения?

    2) Вопрос скорее вытекает из первого: обновляя плагины/тему, пользовательский кэш не обновится, тк ?ver не поменялся?

  13. Алексей 02.01.2017 в 00:50 #

    А не подскажите как удалить: meta name="generator" content="Saphali Lite