Как сделать динамический календарь событий в WordPress с AJAX и темой Hueman

Создание динамического календаря событий — популярная задача для сайтов на WordPress, особенно если вы хотите отображать события с возможностью фильтрации и подгрузки данных без перезагрузки страницы. В этой статье рассмотрим, как реализовать такой календарь с использованием AJAX, кастомного типа записей, метаполей и темы Hueman, которая отлично подходит для адаптивного дизайна и кастомизации.

Создание кастомного типа записей для событий в WordPress

Для начала нужно зарегистрировать собственный тип записей — hueman_event — для удобного управления событиями в админке WordPress. Добавим код в файл functions.php вашей дочерней темы Hueman или в отдельный плагин:

function hueman_register_event_post_type() {
    $labels = array(
        'name'               => 'События',
        'singular_name'      => 'Событие',
        'menu_name'          => 'События',
        'name_admin_bar'     => 'Событие',
        'add_new'            => 'Добавить новое',
        'add_new_item'       => 'Добавить новое событие',
        'edit_item'          => 'Редактировать событие',
        'new_item'           => 'Новое событие',
        'view_item'          => 'Просмотреть событие',
        'search_items'       => 'Поиск событий',
        'not_found'          => 'События не найдены',
        'not_found_in_trash' => 'События не найдены в корзине',
    );

    $args = array(
        'labels'             => $labels,
        'public'             => true,
        'has_archive'        => true,
        'rewrite'            => array('slug' => 'events'),
        'supports'           => array('title', 'editor', 'thumbnail'),
        'show_in_rest'       => true,
    );

    register_post_type('hueman_event', $args);
}
add_action('init', 'hueman_register_event_post_type');

Теперь в админке появится раздел «События», где можно добавлять события с заголовком, описанием и картинкой.

Добавление метаполей для даты события

Для календаря обязательно нужно хранить дату события. Для этого добавим метаполе hueman_event_date. Можно использовать плагин Advanced Custom Fields (ACF) или создать поле вручную, например, так:

function hueman_event_add_meta_boxes() {
    add_meta_box('hueman_event_date', 'Дата события', 'hueman_event_date_callback', 'hueman_event', 'side');
}
add_action('add_meta_boxes', 'hueman_event_add_meta_boxes');

function hueman_event_date_callback($post) {
    wp_nonce_field('hueman_save_event_date', 'hueman_event_date_nonce');
    $value = get_post_meta($post->ID, 'hueman_event_date', true);
    echo '<input type="date" name="hueman_event_date" value="' . esc_attr($value) . '" />';
}

function hueman_save_event_date($post_id) {
    if (!isset($_POST['hueman_event_date_nonce']) || !wp_verify_nonce($_POST['hueman_event_date_nonce'], 'hueman_save_event_date')) {
        return;
    }
    if (array_key_exists('hueman_event_date', $_POST)) {
        update_post_meta($post_id, 'hueman_event_date', sanitize_text_field($_POST['hueman_event_date']));
    }
}
add_action('save_post', 'hueman_save_event_date');

Теперь при добавлении события можно указать дату.

Вывод календаря на фронтенде с AJAX-подгрузкой событий

Чтобы календарь не перегружал страницу, сделаем динамическую подгрузку событий для выбранного месяца с помощью AJAX. Начнем с создания простого HTML-календаря с навигацией по месяцам:

function hueman_render_events_calendar() {
    $current_year = date('Y');
    $current_month = date('m');
    ?>
    <div id="hueman-events-calendar" data-year="<?php echo $current_year; ?>" data-month="<?php echo $current_month; ?>">
        <div class="calendar-header">
            <button id="hueman-prev-month"><< Пред</button>
            <span id="hueman-current-month"><?php echo date('F Y'); ?></span>
            <button id="hueman-next-month">След >></button>
        </div>
        <div id="hueman-calendar-events">Загрузка событий...</div>
    </div>
    <script>
    jQuery(document).ready(function($) {
        function huemanLoadEvents(year, month) {
            $('#hueman-calendar-events').html('Загрузка событий...');
            $.ajax({
                url: hueman_ajax_obj.ajax_url,
                type: 'POST',
                data: {
                    action: 'hueman_load_events',
                    year: year,
                    month: month
                },
                success: function(response) {
                    $('#hueman-calendar-events').html(response);
                    $('#hueman-current-month').text(new Date(year, month - 1).toLocaleString('ru-RU', { month: 'long', year: 'numeric' }));
                    $('#hueman-events-calendar').data('year', year).data('month', month);
                }
            });
        }

        huemanLoadEvents($('#hueman-events-calendar').data('year'), $('#hueman-events-calendar').data('month'));

        $('#hueman-prev-month').click(function() {
            var year = parseInt($('#hueman-events-calendar').data('year'));
            var month = parseInt($('#hueman-events-calendar').data('month')) - 1;
            if (month === 0) {
                month = 12;
                year--;
            }
            huemanLoadEvents(year, month);
        });

        $('#hueman-next-month').click(function() {
            var year = parseInt($('#hueman-events-calendar').data('year'));
            var month = parseInt($('#hueman-events-calendar').data('month')) + 1;
            if (month === 13) {
                month = 1;
                year++;
            }
            huemanLoadEvents(year, month);
        });
    });
    </script>
    <?php
}
add_shortcode('hueman_events_calendar', 'hueman_render_events_calendar');

В этом коде создается блок календаря с кнопками для переключения месяцев и областью для вывода событий. Также создается AJAX-запрос, который будет подгружать события для выбранного месяца.

Обработка AJAX-запроса и вывод событий

Теперь создадим серверный обработчик AJAX, который вернет список событий за нужный месяц:

function hueman_ajax_load_events() {
    $year = isset($_POST['year']) ? intval($_POST['year']) : date('Y');
    $month = isset($_POST['month']) ? intval($_POST['month']) : date('m');

    $start_date = sprintf('%04d-%02d-01', $year, $month);
    $end_date = date('Y-m-d', strtotime($start_date . ' +1 month -1 day'));

    $query = new WP_Query(array(
        'post_type'      => 'hueman_event',
        'posts_per_page' => -1,
        'meta_query'     => array(
            array(
                'key'     => 'hueman_event_date',
                'value'   => array($start_date, $end_date),
                'compare' => 'BETWEEN',
                'type'    => 'DATE',
            ),
        ),
        'orderby'        => 'meta_value',
        'order'          => 'ASC',
    ));

    if ($query->have_posts()) {
        echo '<ul class="hueman-events-list">';
        while ($query->have_posts()) {
            $query->the_post();
            $date = get_post_meta(get_the_ID(), 'hueman_event_date', true);
            echo '<li><strong>' . esc_html($date) . ':</strong> <a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
        }
        echo '</ul>';
    } else {
        echo '<p>Событий не найдено на этот месяц.</p>';
    }
    wp_reset_postdata();
    wp_die();
}
add_action('wp_ajax_hueman_load_events', 'hueman_ajax_load_events');
add_action('wp_ajax_nopriv_hueman_load_events', 'hueman_ajax_load_events');

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

Подключение AJAX-скрипта и локализация

Чтобы AJAX-запросы работали, нужно подключить jQuery и локализовать параметры ajax_url в шаблоне. Добавьте код в functions.php:

function hueman_enqueue_scripts() {
    wp_enqueue_script('jquery');
    wp_localize_script('jquery', 'hueman_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
    ));
}
add_action('wp_enqueue_scripts', 'hueman_enqueue_scripts');

Скрипт jQuery уже встроен в WordPress, мы только локализуем объект с адресом для AJAX.

Стилизация и интеграция с темой Hueman

Для аккуратного отображения календаря добавим базовые стили. В файле стилей дочерней темы или через кастомный CSS вставьте:

#hueman-events-calendar {
    max-width: 400px;
    margin: 20px auto;
    border: 1px solid #ddd;
    padding: 15px;
    background: #fff;
    border-radius: 5px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.calendar-header button {
    background: #0073aa;
    color: #fff;
    border: none;
    padding: 7px 12px;
    cursor: pointer;
    border-radius: 3px;
}

.calendar-header button:hover {
    background: #005177;
}

.hueman-events-list {
    list-style: none;
    padding-left: 0;
}

.hueman-events-list li {
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}

.hueman-events-list li:last-child {
    border-bottom: none;
}

Эти стили хорошо впишутся в минималистичный и адаптивный дизайн темы Hueman.

Итог: использование шорткода и расширение функционала

Вставьте в любую страницу или запись шорткод [hueman_events_calendar] — и у вас появится динамический календарь с навигацией по месяцам и подгрузкой событий через AJAX.

Дальше вы можете расширить функционал, например, добавив категории событий, фильтры, интеграцию с Google Calendar или уведомления. Для удобной работы с SEO и оптимизацией можно использовать плагин Clearfy Pro, который поможет оптимизировать загрузку и работу сайта.

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