CSS и JS подключение и кеширование в WordPress

Если вы активно дорабатываете свой веб-сайт  и сталкиваетесь с проблемами кеширования при внедрении обновлений, будет полезным использовать технику сброса кеша. Я встречал несколько из них, просмотрев результаты поиска Google я встретил много, но выделил лишь два, один из них использую и по сей день . Первый метод использует встроенную PHP  функцию filemtime вместе со встроенными в WordPress функциями подключения JS и CSS wp_enqueue_style() и wp_enqueue_script() без необходимости править файл .htaccess. Метод второй немного сложнее, но для тех, кто хочет попробовать, работает еще лучше и нацелен на большее число браузеров.

Правильно ли Ваша тема подключает скрипты?

Важно использовать функции WordPress wp_enqueue_style () и wp_enqueue_script () при вставке скриптов в заголовок или нижний колонтитул вашей темы. Он позволяет плагинам и коду WordPress работать с их магией. Если вы просто вставляете скрипты в свой файл header.php вручную, эта техника не сработает, и я настоятельно рекомендую вам пересмотреть свой подход. Это займет немного времени, и результаты будут быстрее и будут соответствовать стандартам.

Вариант 1. Добавить идентификатор версии

Идентификатор версии используется для кэширования URL-адреса. Браузер обнаружит URL-адрес – с строкой запроса – как новый и обновленный файл, а не кешированный ресурс. Четвертый параметр wp_enqueue_script – это версия.

Строка, указывающая номер версии скрипта, если она есть, которая конкатенирована до конца пути в виде строки запроса.

Мы добавим номер версии в конец файла. Этот номер версии будет основываться на времени изменения файла с помощью функции PHP filemtime. Использование wp_enqueue_style

wp_enqueue_style('site_responsive', get_template_directory_uri() . '/assets/css/website-responsive.css', false, filemtime(get_stylesheet_directory() . '/assets/css/website-responsive.css'));
wp_enqueue_style('scrollbars', get_template_directory_uri() . '/assets/css/jquery.mcustomscrollbar.css', false, null);

Использование wp_register_script Для JavaScript мы сначала зарегистрируем наш скрипт с помощью wp_register_script, а затем введем его в очередь:

// Вначале регистрируем
wp_register_script('js_main', get_template_directory_uri() . '/assets/js/main.js', false, filemtime( get_stylesheet_directory().'/assets/js/main.js' ), true);
// Добавляем в очередь
wp_enqueue_script('js_main');

Результат должен выглядеть примерно так: ../js/main.js?ver=1571391276 Этот метод работает хорошо и, похоже, успешно очищает кеш в браузере Chrome. Я также тестировал в Firefox и Internet Explorer — отличные результаты. Не требуется модификация .htaccess. Несмотря на мой успех, Google заявляет, что этот метод не идеален (спасибо WPengineer за ссылку). Хотя, если это сработает для вас, это самый быстрый и простой способ быстро сбросить кеш-память. Если вы хотите окончательную версию и не боитесь изменить свой .htaccess!

Вариант 2. Кодирование параметров в имена файлов с использованием .htaccess

Примечание. Для использования этого метода вам понадобится доступ к вашему файлу .htaccess. Он отлично работает, но будьте осторожны.

Этот метод сброса кеша отлично работает. Опять же, это немного более активно, поэтому будьте осторожны – и всегда проверяйте в тестовой среде. Цель здесь – кодировать номер версии в самом имени файла, не меняя его в системе.

Шаг 1: Расширьте свой .htaccess

Расширьте свой файл .htaccess следующими строками:

RewriteEngine On
RewriteBase /
 
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)\.(.+)\.(js|css)$ $1.$3 [L]

Шаг 2. Загрузите и активируйте этот плагин.

Возьмите  этот плагин на Gist:

<?php
/**
 * Plugin Name: Filename-based cache busting 
 * Version: 0.2
 * Description: Filename-based cache busting for WordPress scripts/styles.
 * Author: Dominik Schilling
 * Author URI: http://wphelper.de/
 * Plugin URI: http://wpgrafie.de/880/
 *
 * License: GPLv2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 *
 * 
 * Extend your .htaccess file with these lines:
 *
 *   <IfModule mod_rewrite.c-->
 *     RewriteEngine On
 *     RewriteBase /
 *
 *     RewriteCond %{REQUEST_FILENAME} !-f
 *     RewriteCond %{REQUEST_FILENAME} !-d
 *     RewriteRule ^(.+)\.(.+)\.(js|css)$ $1.$3 [L]
 *   
 */
 
/**
 * Removes the `ver` query string of the source and places it into
 * the filename. Doesn't change admin scripts/styles and sources
 * with more than the `ver` arg.
 *
 * @param  string $src The original source 
 * @return string
 */
function ds_filename_based_cache_busting( $src ) {
	// Don't touch admin scripts
	if ( is_admin() )
		return $src;
 
	return preg_replace(
		'/\.(js|css)\?ver=(.+)$/',
		'.$2.$1',
		$src
	);
}
add_filter( 'script_loader_src', 'ds_filename_based_cache_busting' );
add_filter( 'style_loader_src', 'ds_filename_based_cache_busting' );

Этот плагин очень упрощает развертывание этого метода. Не требуется код – кроме обновления файла .htaccess. Есть даже плагин для добавления в ваш .htaccess, если вам нужно! Но всегда будьте осторожны, потому что файл .htaccess похож на туннель на ваш сайт, и один неправильный жест может привести к простою сайта.

Примечание. Вы можете добавить файл Gist плагина в функцию function.php вашей темы, если это необходимо. Отдельный плагин является предпочтительным, для учета любых изменений темы.

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