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

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

Создаем пользовательский тип записей «События»

Для начала создадим Custom Post Type (CPT) для хранения событий. Это позволит отделить события от обычных записей и гибко работать с ними.

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

function wpkpi_register_events_cpt() {
    $labels = array(
        'name' => 'События',
        'singular_name' => 'Событие',
        'menu_name' => 'События',
        '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'),
        'menu_icon' => 'dashicons-calendar-alt',
    );
    register_post_type('wpkpi_event', $args);
}
add_action('init', 'wpkpi_register_events_cpt');

Этот код создаст новый раздел в админке WordPress для событий.

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

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

function wpkpi_add_event_date_meta_box() {
    add_meta_box(
        'wpkpi_event_date',
        'Дата события',
        'wpkpi_event_date_meta_box_callback',
        'wpkpi_event',
        'side'
    );
}
add_action('add_meta_boxes', 'wpkpi_add_event_date_meta_box');

function wpkpi_event_date_meta_box_callback($post) {
    wp_nonce_field('wpkpi_save_event_date', 'wpkpi_event_date_nonce');
    $value = get_post_meta($post->ID, '_wpkpi_event_date', true);
    echo '<input type="date" id="wpkpi_event_date" name="wpkpi_event_date" value="' . esc_attr($value) . '" />';
}

function wpkpi_save_event_date_meta_box_data($post_id) {
    if (!isset($_POST['wpkpi_event_date_nonce'])) return;
    if (!wp_verify_nonce($_POST['wpkpi_event_date_nonce'], 'wpkpi_save_event_date')) return;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    if (isset($_POST['wpkpi_event_date'])) {
        $date = sanitize_text_field($_POST['wpkpi_event_date']);
        update_post_meta($post_id, '_wpkpi_event_date', $date);
    }
}
add_action('save_post', 'wpkpi_save_event_date_meta_box_data');

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

Выводим календарь на фронтенде с динамическим отображением событий

Для отображения календаря создадим шорткод [wpkpi_event_calendar], который выведет календарь с событиями, сгруппированными по месяцам. Используем AJAX для переключения месяцев без перезагрузки страницы.

Добавьте следующий код:

function wpkpi_event_calendar_shortcode() {
    wp_enqueue_script('wpkpi-event-calendar', get_stylesheet_directory_uri() . '/js/wpkpi-event-calendar.js', array('jquery'), null, true);
    wp_localize_script('wpkpi-event-calendar', 'wpkpiEventCalendar', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpkpi_event_calendar_nonce'),
    ));

    ob_start();
    echo '<div id="wpkpi-event-calendar"></div>';
    return ob_get_clean();
}
add_shortcode('wpkpi_event_calendar', 'wpkpi_event_calendar_shortcode');

function wpkpi_ajax_get_events() {
    check_ajax_referer('wpkpi_event_calendar_nonce', 'nonce');

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

    $args = array(
        'post_type' => 'wpkpi_event',
        'meta_key' => '_wpkpi_event_date',
        'orderby' => 'meta_value',
        'order' => 'ASC',
        'meta_query' => array(
            array(
                'key' => '_wpkpi_event_date',
                'value' => array("$year-$month-01", "$year-$month-31"),
                'compare' => 'BETWEEN',
                'type' => 'DATE',
            ),
        ),
    );
    $query = new WP_Query($args);

    $events = array();
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $date = get_post_meta(get_the_ID(), '_wpkpi_event_date', true);
            $events[] = array(
                'title' => get_the_title(),
                'date' => $date,
                'link' => get_permalink(),
            );
        }
    }
    wp_reset_postdata();

    wp_send_json_success(array(
        'year' => $year,
        'month' => $month,
        'events' => $events,
    ));
}
add_action('wp_ajax_wpkpi_get_events', 'wpkpi_ajax_get_events');
add_action('wp_ajax_nopriv_wpkpi_get_events', 'wpkpi_ajax_get_events');

Создайте файл wpkpi-event-calendar.js в папке /js/ вашей темы с таким содержимым:

jQuery(document).ready(function($) {
    function renderEvents(data) {
        let html = '<h3>События за ' + data.month + '/' + data.year + '</h3>';
        if (data.events.length === 0) {
            html += '<p>Событий нет</p>';
        } else {
            html += '<ul>';
            data.events.forEach(function(event) {
                html += '<li><a href="' + event.link + '">' + event.date + ': ' + event.title + '</a></li>';
            });
            html += '</ul>';
        }
        $('#wpkpi-event-calendar').html(html + renderControls(data.year, data.month));
    }

    function renderControls(year, month) {
        return '<button id="prev-month">< Назад</button> ' +
               '<button id="next-month">Вперед ></button>';
    }

    function loadEvents(year, month) {
        $.post(wpkpiEventCalendar.ajax_url, {
            action: 'wpkpi_get_events',
            nonce: wpkpiEventCalendar.nonce,
            year: year,
            month: month
        }, function(response) {
            if (response.success) {
                renderEvents(response.data);
            }
        });
    }

    let currentYear = new Date().getFullYear();
    let currentMonth = new Date().getMonth() + 1;
    loadEvents(currentYear, currentMonth);

    $(document).on('click', '#prev-month', function() {
        currentMonth--;
        if (currentMonth < 1) {
            currentMonth = 12;
            currentYear--;
        }
        loadEvents(currentYear, currentMonth);
    });

    $(document).on('click', '#next-month', function() {
        currentMonth++;
        if (currentMonth > 12) {
            currentMonth = 1;
            currentYear++;
        }
        loadEvents(currentYear, currentMonth);
    });
});

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

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

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

Добавление фильтров по категориям событий

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

Добавим таксономию:

function wpkpi_register_event_taxonomy() {
    register_taxonomy('wpkpi_event_category', 'wpkpi_event', array(
        'labels' => array('name' => 'Категории событий'),
        'hierarchical' => true,
        'show_ui' => true,
        'show_admin_column' => true,
        'rewrite' => array('slug' => 'event-category'),
    ));
}
add_action('init', 'wpkpi_register_event_taxonomy');

После этого в AJAX-запросах можно передавать выбранную категорию и фильтровать события.

Интеграция с плагином WP GPT для автоматической генерации описаний событий

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

Заключение

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