В некоторых проектах на WordPress возникает задача отображать Gutenberg блоки только в определённое время, например, для временных акций, событий или ограниченного по времени контента. В этой статье я подробно расскажу, как реализовать ограничение по времени для Gutenberg блоков, используя как готовые плагины, так и собственный код. Это поможет вам гибко управлять контентом и автоматизировать его показ.
Почему важно ограничивать показ Gutenberg блоков по времени
Ограничение показа блоков по времени помогает:
- Автоматизировать управление временным контентом (акции, новости, события).
- Избежать ручной работы по удалению или скрытию блоков.
- Повысить вовлечённость пользователей за счёт релевантного контента.
- Сделать сайт более динамичным и современным.
Реализовать это можно разными способами — от плагинов до кастомных решений с фильтрами WordPress и JavaScript.
Использование плагина WPBlock Visibility для временных ограничений
Одним из удобных решений для управления видимостью Gutenberg блоков является плагин WPBlock Visibility. Он позволяет настраивать условия отображения блоков по различным параметрам, включая дату и время.
После установки и активации плагина вы увидите в настройках каждого блока вкладку «Условия видимости», где можно задать временные рамки показа — с точностью до часов и минут.
Пример настройки: показать блок с 1 мая 2024 года по 10 мая 2024 года.
Плагин также поддерживает условия на основе роли пользователя, устройства и других параметров, что расширяет возможности персонализации контента.
Как создать собственный фильтр для ограничения времени показа Gutenberg блока
Если вы предпочитаете писать кастомный код, то можно реализовать логику ограничения отображения блока прямо в PHP. Рассмотрим пример, где блок будет показываться только в указанный период.
Добавление атрибутов даты в блок
Для начала в функции регистрации блока добавим два новых атрибута — startTime и endTime, которые будут хранить дату и время показа блока.
function wpblock_register_time_limited_block() {
register_block_type('wpblock/time-limited-block', array(
'attributes' => array(
'startTime' => array(
'type' => 'string',
'default' => ''
),
'endTime' => array(
'type' => 'string',
'default' => ''
),
// другие атрибуты
),
'render_callback' => 'wpblock_render_time_limited_block',
));
}
add_action('init', 'wpblock_register_time_limited_block');Рендеринг блока с проверкой времени
В колбэке рендеринга блока проверим текущую дату и время и скроем блок, если он не попадает в заданный интервал.
function wpblock_render_time_limited_block($attributes, $content) {
$start = strtotime($attributes['startTime']);
$end = strtotime($attributes['endTime']);
$now = current_time('timestamp');
if (($start && $now < $start) || ($end && $now > $end)) {
return '';// блок не показываем вне времени
}
return $content;
}Важно, что current_time('timestamp') возвращает время с учётом часового пояса WordPress, что делает проверку корректной.
Как добавить временные ограничения через JavaScript для фронтенда
Иногда нужно динамически скрывать блоки уже на клиенте, например, если время определяется пользователем или есть необходимость частого обновления без перезагрузки страницы.
Для этого можно добавить в блок JavaScript, который будет проверять время и скрывать блок, если он не должен отображаться.
document.addEventListener('DOMContentLoaded', function() {
const blocks = document.querySelectorAll('.wpblock-time-limited');
blocks.forEach(block => {
const start = new Date(block.dataset.startTime);
const end = new Date(block.dataset.endTime);
const now = new Date();
if ((start && now < start) || (end && now > end)) {
block.style.display = 'none';
}
});
});Для этого в разметке блока нужно добавить data-атрибуты data-start-time и data-end-time, чтобы JS мог их прочитать.
Как объединить PHP и JS для максимальной гибкости
Оптимальным будет использовать PHP для первичной фильтрации контента на сервере и JS для мелких корректировок на клиенте. Так вы снизите нагрузку и избежите отображения лишнего контента.
В PHP добавьте необходимые атрибуты в HTML блока, а JS уже динамично управляет видимостью, например, при смене часового пояса или времени пользователя.
Примеры полезных плагинов для управления видимостью и временем
- WPBlock Visibility — плагин для управления условиями показа блоков, включая временные.
- Content Visibility — позволяет скрывать блоки по ролям, датам и другим параметрам.
- Advanced Custom Fields (ACF) — с помощью ACF можно добавить поля даты к блокам и использовать их в условных функциях.
Для интеграции с WPBlock Visibility и другими плагинами можно создавать собственные расширения и фильтры, повышая гибкость и удобство управления.
Советы по тестированию и отладке временных ограничений
При разработке временных ограничений важно проверить:
- Корректность часового пояса в WordPress и PHP.
- Правильность формата даты и времени.
- Работу в разных браузерах и при смене времени на клиенте.
- Отсутствие конфликта с кэшированием, которое может показывать устаревший контент.
Для отладки используйте логи, var_dump и консоль браузера, а также временно выводите текущую дату и время рядом с блоком.
Выводы и рекомендации
Ограничение отображения Gutenberg блоков по времени — полезная и востребованная задача, которую можно решить с помощью готовых плагинов или написать собственные фильтры. Используйте PHP для базовой логики и JavaScript для динамики на клиенте. Не забывайте про тестирование и учитывайте влияние кэширования.
Если вы хотите быстро реализовать такую функциональность, рекомендую ознакомиться с плагином WPBlock Visibility — он идеально подходит для управления видимостью блоков по времени и другим условиям.