Як оновлювати кешований вміст в WordPress

03/12/2019 Оновлено: 05.12.2019

Використання кешування в браузері сприяє поліпшенню швидкості завантаження вашого сайту для постійних відвідувачів. Однак, коли у вас на сайті новий контент, через кешування користувачам буде показаний застарілий контент.

Кращий спосіб уникнути цієї проблеми – реалізувати так зване «управління версіями» для вмісту сайту на WordPress. В результаті користувачі завжди будуть бачити останню версію, навіть якщо їх браузери закешували контент вашого сайту. В сьогоднішній статті ми детально поговоримо про кешування в браузері, управління версіями, а також розглянемо способи їх реалізації в WordPress.

Що таке управління версіями

Кешування в браузері – це процес, при якому браузер зберігає файли з вашого сайту на пристроях відвідувачів, що дозволяє браузеру не завантажувати ці файли при повторному відвідуванні. Це просте рішення, яке допомагає значно скоротити час завантаження сайту.

При використанні кешування в браузері, зазвичай встановлюються дати закінчення терміну «життя» для потрібного вмісту. Наприклад, для цих цілей використовується файл .htaccess, в якому зазначаються певні періоди зберігання файлів певних типів. Після закінчення цього періоду, браузери користувачів перевірятимуть наявність нових версій цих файлів.

Проблема полягає в тому, що вам потрібно оновлювати файли на вашому сервері, і робити це потрібно до закінчення терміну дії кешованих версій. Наприклад, якщо ви змінили логотип свого сайту, користувачі можуть не побачити нову версію логотипу, поки не закінчиться термін кеша вашого сайту на їх комп’ютерах.

Управління версіями, також відоме як «очищення кеша», вирішує цю проблему шляхом автоматичного примусового оновлення кеша в разі зміни файлу. Це простий обхідний шлях, який дозволяє реалізувати кешування в браузері з великим терміном життя, і не турбуватися про відображення застарілого контенту. Однак для налаштування цього шляху потрібна деяка робота, що спрямовує нас до наступного розділу.

Керування версіями як спосіб оновлення кешованого вмісту в WordPress

Зараз ми розглянемо процес встановлення версій файлів різних типів, що буде примусово очищати кеш браузера у користувачів. Майте на увазі, що ці способи можуть призводити до конфліктів, якщо ви використовуєте в системі плагін кешування!

Спосіб №1. Оновлення версії дочірньої теми

Якщо ви використовуєте дочірню тему (а ви повинні використовувати!), ви можете змусити WordPress завантажити нову версію таблиці стилів style.css за допомогою файлу functions.php. Для цього використовується функція wp_enqueue_style. Кодекс WordPress пропонує використовувати наступний формат:

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Цей фрагмент коду робить свою справу. Проте, він не включає функцію очищення кешу. Код нижче дозволяє вам включити номер версії дочірньої теми, що допоможе при очищенні кеша:

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
  $parent_style = 'parent-style';
  wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( $parent_style ),
    wp_get_theme()->get('Version')
  );
}

Цей код витягує номер версії з файлу style.css вашої дочірньої теми. Зазвичай файл стилів теми style.css містить в самому верху приблизно такий фрагмент:

/*
 Theme Name:   Theme Name
 Theme URI:    Theme URI
 Description:  Theme Description
 Author:       John Doe
 Author URI:   Author URI
 Template:     twentyfifteen
 Version:      1.0.0
 Text Domain:  twenty-fifteen
*/

Код з файлу функцій «підтягує» версію теми з рядка Version в файлі style.css. Все, що вам потрібно зробити, це оновити номер в рядку версії і це змусить WordPress завантажити останню версію файлу стилів.

Спосіб №2. Перейменування статичних файлів для примусового оновлення кешу

Попередній метод піклується про оновлення вашої дочірньої теми. Однак, браузер зберігає в кеші й багато інших файлів. Наприклад, раніше ми писали про спосіб налаштування кешування в браузері. Ми використовували фрагмент коду, за допомогою якого робили налаштування для кешування картинок, файлів CSS, HTML і JavaScript:

<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresByType image/jpg "access 1 month"
 ExpiresByType image/jpeg "access 1 month"
 ExpiresByType image/gif "access 1 month"
 ExpiresByType image/png "access 1 month"
 ExpiresByType text/css "access 1 week"
 ExpiresByType text/html "access 1 month"
 ExpiresByType text/x-javascript "access 1 week"
 ExpiresDefault "access 1 month"
</IfModule>

Ми можемо використовувати файл .htaccess також і для реалізації нового набору правил. Використовуйте наступний код і додайте його перед тегом </IfModule> попереднього фрагмента коду:

<IfModule mod_rewrite.c>
…………..
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg|jpeg|gif)$ $1.$3 [L]
………..
</IfModule>

Цей код говорить WordPress, щоб система перевіряла в файлах перерахованих форматів, наявність номерів в їх іменах, наприклад:

child-theme/style.102.css

У цьому прикладі ми внесли зміни в файл style.css та змінили його ім’я, щоб оновити кеш файлу. 102 в імені файлу є номер версії style.css. WordPress розпізнає його як файл style.css вашої теми, але зміни, які ми внесли в .htaccess, дозволяють вказати, що це нова версія.

Після додавання цього коду в файл .htaccess ви зможете встановити версії для всіх типів файлів, які ви включили. Наприклад, якщо ви хочете завантажити нову версію логотипу свого сайту, вам просто потрібно перейменувати файл, наприклад, в logo.102.png.

Заключні думки

Впровадження кешування в браузері – відмінний спосіб забезпечити відвідувачам вашого сайту швидкий час завантаження. Однак це також може призвести до ситуацій, коли ви оновлюєте свій контент, але користувачі не бачать змін.

Найпростіший спосіб вирішити цю проблему – використовувати управління версіями для вмісту кеша, який використовує браузер користувача. Сьогодні ми розглянули 2 способи, які дозволяють цього досягти: