Как изменить календарь в Gutenberg блоках WordPress

Календарь — один из стандартных блоков WordPress, который позволяет отображать архив публикаций по датам. Однако стандартный календарь Gutenberg далеко не всегда подходит под индивидуальные задачи сайта. В этой статье мы рассмотрим, как изменить календарь в Gutenberg блоках WordPress, добавим кастомные стили, новые функции и даже создадим собственный блок с расширенным календарём.

Почему стоит изменять стандартный календарь Gutenberg

Стандартный календарь WordPress выводит даты публикаций без возможности гибкой настройки. Его дизайн и функционал фиксированы, что не всегда удобно для сайтов с особенным дизайном или специфическими требованиями. Например, вы хотите:

• Отобразить события с пользовательскими метками, а не просто даты постов.
• Добавить всплывающие подсказки с описанием событий при наведении.
• Изменить стили календаря под цветовую схему сайта.
• Интегрировать календарь с кастомными типами записей.

Чтобы решить эти задачи, можно изменить стандартный блок или создать собственный блок календаря на базе Gutenberg API.

Изменение стилей стандартного календаря через CSS

Самый простой способ изменить внешний вид календаря — добавить кастомные CSS-правила в тему или плагин. Для начала нужно определить класс календаря в HTML. Обычно это .wp-block-calendar.

Например, чтобы изменить фон, цвет текста и добавить выделение текущей даты, можно добавить следующий CSS в файл стилей темы или через кастомайзер:

.wp-block-calendar table {width: 100%; border-collapse: collapse; background-color: #f9f9f9;}
.wp-block-calendar th, .wp-block-calendar td {padding: 8px; border: 1px solid #ddd; text-align: center;}
.wp-block-calendar .has-text-color a {color: #0073aa; text-decoration: none;}
.wp-block-calendar .current-date {background-color: #0073aa; color: #fff; border-radius: 50%;}

Если вы хотите изменить именно текущую дату, можно добавить JavaScript для динамического присвоения класса current-date.

Пример скрипта для подсветки текущей даты

Добавьте следующий код в файл functions.php вашей темы для подключения скрипта:

function wpinfo_enqueue_calendar_script() {
    wp_enqueue_script('wpinfo-calendar', get_template_directory_uri() . '/js/calendar.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'wpinfo_enqueue_calendar_script');

Создайте файл js/calendar.js с таким содержимым:

document.addEventListener('DOMContentLoaded', function() {
    const today = new Date();
    const day = today.getDate();
    const calendar = document.querySelector('.wp-block-calendar');
    if (!calendar) return;
    const cells = calendar.querySelectorAll('td');
    cells.forEach(cell => {
        if (cell.textContent == day) {
            cell.classList.add('current-date');
        }
    });
});

Создание кастомного блока календаря с расширенным функционалом

Если нужно больше, чем стили и простая подсветка, имеет смысл создать собственный блок календаря с помощью Gutenberg API и React. Рассмотрим пример создания блока, который выводит события из кастомного типа записей event с датой и описанием.

Регистрация кастомного типа записей "event"

Для начала зарегистрируем тип записей событий в functions.php:

function wpinfo_register_event_post_type() {
    register_post_type('event', array(
        'labels' => array('name' => 'События'),
        'public' => true,
        'has_archive' => true,
        'supports' => array('title', 'editor', 'custom-fields'),
    ));
}
add_action('init', 'wpinfo_register_event_post_type');

Пример простого кастомного блока календаря

Для создания блока используем @wordpress/create-block или вручную добавим файлы с JavaScript. Ниже пример основного файла блока src/index.js:

import { registerBlockType } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
import { ServerSideRender } from '@wordpress/components';

registerBlockType('wpinfo/custom-calendar', {
    title: 'Кастомный календарь событий',
    icon: 'calendar',
    category: 'widgets',
    edit() {
        return (
            <ServerSideRender
                block="wpinfo/custom-calendar"
            />
        );
    },
    save() {
        return null; // динамический блок
    },
});

PHP-рендеринг блока с выборкой событий

Добавим в functions.php рендер-функцию для блока, которая выберет события и выведет календарь:

function wpinfo_render_custom_calendar( $attributes ) {
    $today = current_time('Y-m-d');
    $args = array(
        'post_type' => 'event',
        'posts_per_page' => -1,
        'meta_key' => 'event_date',
        'orderby' => 'meta_value',
        'order' => 'ASC',
        'meta_query' => array(
            array(
                'key' => 'event_date',
                'value' => $today,
                'compare' => '>=',
                'type' => 'DATE',
            ),
        ),
    );
    $events = get_posts($args);

    if (empty($events)) {
        return '<p>Событий на ближайшее время нет.</p>';
    }

    $output = '<table class="wpinfo-custom-calendar"><thead><tr><th>Дата</th><th>Название</th></tr></thead><tbody>';

    foreach ($events as $event) {
        $date = get_post_meta($event->ID, 'event_date', true);
        $title = esc_html($event->post_title);
        $permalink = get_permalink($event->ID);
        $output .= "<tr><td>{$date}</td><td><a href='{$permalink}'>{$title}</a></td></tr>";
    }

    $output .= '</tbody></table>';
    return $output;
}

register_block_type('wpinfo/custom-calendar', array(
    'render_callback' => 'wpinfo_render_custom_calendar',
));

Использование плагина Clearfy Pro для улучшения производительности календаря

Если ваш сайт использует стандартный календарь или кастомный блок, важно, чтобы он не замедлял загрузку страниц. Плагин Clearfy Pro поможет оптимизировать запросы, очистить базу от лишних данных и ускорить работу сайта.

Clearfy Pro позволяет отключать ненужные модули WordPress, в том числе связанные с архивами, что уменьшит нагрузку при работе с календарём. Рекомендуется использовать Clearfy Pro в комплексе с кешированием и оптимизацией базы данных.

Выводы и рекомендации

Изменение календаря в Gutenberg блоках может быть простым или сложным, в зависимости от задачи. Если нужно лишь скорректировать стиль — достаточно CSS и небольшого JS. Для расширенного функционала лучше создавать собственный динамический блок с выводом событий из кастомного типа записей. Не забывайте оптимизировать сайт с помощью плагинов, например, Clearfy Pro для повышения скорости.

Таким образом, вы сможете сделать календарь полностью под ваши задачи, улучшить UX и повысить функциональность сайта на WordPress.