Как создать настройку в календаре для отображения событий в WordPress

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

Почему стандартные решения не всегда подходят для календаря событий

Большинство плагинов календарей предлагают базовые возможности: вывод событий по дате, простую навигацию, цветовое выделение. Однако часто требуется более тонкая настройка — например, отображение только событий определённого типа, фильтрация по категории или тегу, настройка формата даты и стилей.

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

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

Для начала создадим собственный тип записи «События», чтобы хранить данные в удобном формате. Добавим следующий код в файл functions.php или в отдельный плагин:

function wpsource_register_event_post_type() {
    $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'),
        'show_in_rest'       => true,
    );
    register_post_type('wpsource_event', $args);
}
add_action('init', 'wpsource_register_event_post_type');

После этого в админке появится новый раздел «Календарь событий» для удобного добавления и редактирования событий.

Добавление пользовательских полей для даты и времени события

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

function wpsource_add_event_metabox() {
    add_meta_box(
        'wpsource_event_date',
        'Дата и время события',
        'wpsource_event_date_callback',
        'wpsource_event',
        'side',
        'default'
    );
}
add_action('add_meta_boxes', 'wpsource_add_event_metabox');

function wpsource_event_date_callback($post) {
    wp_nonce_field('wpsource_event_date_save', 'wpsource_event_date_nonce');
    $value = get_post_meta($post->ID, '_wpsource_event_date', true);
    echo '<label for="wpsource_event_date_field">Дата и время:</label>';
    echo '<input type="datetime-local" id="wpsource_event_date_field" name="wpsource_event_date_field" value="'.esc_attr($value).'" />';
}

function wpsource_save_event_date($post_id) {
    if (!isset($_POST['wpsource_event_date_nonce']) || !wp_verify_nonce($_POST['wpsource_event_date_nonce'], 'wpsource_event_date_save')) {
        return;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    if (isset($_POST['wpsource_event_date_field'])) {
        update_post_meta($post_id, '_wpsource_event_date', sanitize_text_field($_POST['wpsource_event_date_field']));
    }
}
add_action('save_post', 'wpsource_save_event_date');

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

Создание шорткода для вывода календаря с настройками фильтрации

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

function wpsource_events_calendar_shortcode($atts) {
    $atts = shortcode_atts(array(
        'category' => '',
        'future_only' => 'yes',
        'date_format' => 'd.m.Y H:i',
    ), $atts, 'wpsource_events_calendar');

    $meta_query = array();
    if ($atts['future_only'] === 'yes') {
        $meta_query[] = array(
            'key' => '_wpsource_event_date',
            'value' => current_time('Y-m-d H:i'),
            'compare' => '>=',
            'type' => 'DATETIME',
        );
    }

    $tax_query = array();
    if (!empty($atts['category'])) {
        $tax_query[] = array(
            'taxonomy' => 'category',
            'field' => 'slug',
            'terms' => explode(',', $atts['category']),
        );
    }

    $args = array(
        'post_type' => 'wpsource_event',
        'posts_per_page' => -1,
        'meta_key' => '_wpsource_event_date',
        'orderby' => 'meta_value',
        'order' => 'ASC',
        'meta_query' => $meta_query,
        'tax_query' => $tax_query,
    );

    $query = new WP_Query($args);
    if (!$query->have_posts()) {
        return '<p>Событий не найдено.</p>';
    }

    $output = '<div class="wpsource-events-calendar"><ul>';
    while ($query->have_posts()) {
        $query->the_post();
        $date = get_post_meta(get_the_ID(), '_wpsource_event_date', true);
        $formatted_date = date_i18n($atts['date_format'], strtotime($date));
        $output .= '<li><strong>'.esc_html($formatted_date).'</strong>: <a href="'.get_permalink().'">'.get_the_title().'</a></li>';
    }
    wp_reset_postdata();
    $output .= '</ul></div>';
    return $output;
}
add_shortcode('wpsource_events_calendar', 'wpsource_events_calendar_shortcode');

Пример использования на странице: [wpsource_events_calendar category="seminar,webinar" future_only="yes" date_format="d.m.Y H:i"]

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

Для улучшения UX добавим базовую стилизацию. В файле темы или плагина подключите CSS:

.wpsource-events-calendar ul {
    list-style-type: none;
    padding: 0;
}
.wpsource-events-calendar li {
    padding: 5px 0;
    border-bottom: 1px solid #ddd;
}
.wpsource-events-calendar li strong {
    color: #0073aa;
}

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

Дополнительные возможности: интеграция с плагинами WPShop

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

Таким образом, настраиваемый календарь событий в WordPress — несложная задача, решаемая при помощи кастомных типов записей, метаполей и шорткодов. Такой подход даёт полный контроль над выводом и фильтрацией, что важно для бизнес-сайтов и проектов с большим количеством мероприятий.