Для маркетинговых сайтов на WordPress важна точная организация и управление событиями, кампаниями и публикациями. Один из удобных инструментов — динамический маркетинговый календарь, который автоматически отображает предстоящие акции, публикации и важные даты. В этой статье рассмотрим, как создать такой календарь с помощью кастомных типов записей, метаполей и AJAX, чтобы упростить управление маркетингом и повысить вовлеченность пользователей.
Почему нужен динамический маркетинговый календарь
Статичный календарь требует постоянного ручного обновления, что неудобно и часто приводит к ошибкам. Динамический календарь в WordPress позволяет:
- Автоматически показывать актуальные события и акции.
- Предоставлять пользователям удобный интерфейс для просмотра будущих активностей.
- Обеспечивать маркетологам быстрый доступ к планированию контента.
Такой календарь интегрируется с административной панелью и выводит данные на сайт в удобном формате.
Создание кастомного типа записи для событий
Для начала создадим кастомный тип записи wpmarketing_event, который будет хранить маркетинговые события. Добавим функцию в файл functions.php вашей темы или в плагин:
function wpmarketing_register_event_post_type() { $labels = array( 'name' => 'Маркетинговые события', 'singular_name' => 'Событие', 'add_new' => 'Добавить событие', 'add_new_item' => 'Добавить новое событие', 'edit_item' => 'Редактировать событие', 'new_item' => 'Новое событие', 'view_item' => 'Просмотреть событие', 'search_items' => 'Поиск событий', 'not_found' => 'События не найдены', 'not_found_in_trash' => 'В корзине событий не найдено', 'menu_name' => 'Маркетинговый календарь' ); $args = array( 'labels' => $labels, 'public' => true, 'has_archive' => true, 'menu_icon' => 'dashicons-calendar-alt', 'supports' => array('title', 'editor', 'custom-fields'), 'show_in_rest' => true, ); register_post_type('wpmarketing_event', $args);}add_action('init', 'wpmarketing_register_event_post_type');Теперь в админке появится новый раздел "Маркетинговый календарь" для управления событиями.
Добавление метаполей для даты и времени
Чтобы хранить дату и время события, используйте метаполя. Рекомендуется подключить плагин Clearfy Pro для удобного создания метаполей или сделать вручную:
function wpmarketing_add_event_metabox() { add_meta_box('wpmarketing_event_date', 'Дата и время события', 'wpmarketing_event_date_callback', 'wpmarketing_event', 'side', 'default');}function wpmarketing_event_date_callback($post) { $value = get_post_meta($post->ID, '_wpmarketing_event_datetime', true); echo '<input type="datetime-local" name="wpmarketing_event_datetime" value="' . esc_attr($value) . '" style="width:100%" />';}add_action('add_meta_boxes', 'wpmarketing_add_event_metabox');function wpmarketing_save_event_date($post_id) { if (array_key_exists('wpmarketing_event_datetime', $_POST)) { update_post_meta($post_id, '_wpmarketing_event_datetime', sanitize_text_field($_POST['wpmarketing_event_datetime'])); }}add_action('save_post', 'wpmarketing_save_event_date');Теперь при создании события можно задать точную дату и время.
Вывод событий в виде календаря на сайте
Чтобы выводить календарь, можно использовать JavaScript-библиотеку FullCalendar, которая отлично интегрируется с WordPress и поддерживает динамическую загрузку событий через AJAX.
Подключение FullCalendar и создание шорткода
Добавим скрипты и стили, а также шорткод для вывода календаря:
function wpmarketing_enqueue_fullcalendar() { wp_enqueue_style('fullcalendar-css', 'https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css'); wp_enqueue_script('fullcalendar-js', 'https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js', array('jquery'), null, true); wp_enqueue_script('wpmarketing-calendar', get_template_directory_uri() . '/js/wpmarketing-calendar.js', array('fullcalendar-js'), null, true); wp_localize_script('wpmarketing-calendar', 'wpmarketing_ajax_obj', array( 'ajax_url' => admin_url('admin-ajax.php'), ));}add_action('wp_enqueue_scripts', 'wpmarketing_enqueue_fullcalendar');function wpmarketing_calendar_shortcode() { return '<div id="wpmarketing-calendar"></div>';}add_shortcode('wpmarketing_calendar', 'wpmarketing_calendar_shortcode');Создайте файл js/wpmarketing-calendar.js в теме со следующим содержимым:
document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('wpmarketing-calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'dayGridMonth', events: function(fetchInfo, successCallback, failureCallback) { jQuery.ajax({ url: wpmarketing_ajax_obj.ajax_url, dataType: 'json', data: { action: 'wpmarketing_get_events', start: fetchInfo.startStr, end: fetchInfo.endStr }, success: function(response) { successCallback(response); }, error: function() { failureCallback(); } }); } }); calendar.render();});Обработка AJAX-запроса для загрузки событий
Добавим обработчик в functions.php, который вернет события в JSON формате:
function wpmarketing_get_events() { $start = sanitize_text_field($_GET['start']); $end = sanitize_text_field($_GET['end']); $args = array( 'post_type' => 'wpmarketing_event', 'posts_per_page' => -1, 'meta_query' => array( array( 'key' => '_wpmarketing_event_datetime', 'value' => array($start, $end), 'compare' => 'BETWEEN', 'type' => 'DATETIME' ) ), 'orderby' => 'meta_value', 'order' => 'ASC' ); $query = new WP_Query($args); $events = array(); while ($query->have_posts()) { $query->the_post(); $datetime = get_post_meta(get_the_ID(), '_wpmarketing_event_datetime', true); $events[] = array( 'title' => get_the_title(), 'start' => $datetime, 'url' => get_permalink() ); } wp_reset_postdata(); wp_send_json($events);}add_action('wp_ajax_wpmarketing_get_events', 'wpmarketing_get_events');add_action('wp_ajax_nopriv_wpmarketing_get_events', 'wpmarketing_get_events');Дополнительные возможности и интеграция с плагинами
Для расширения функционала можно добавить категории событий, фильтры по типам кампаний или интегрировать календарь с плагином WPRemark для отзывов о маркетинговых активностях.
Также полезно автоматизировать уведомления о предстоящих событиях с помощью My Popup, чтобы повышать конверсию и вовлеченность.
Оптимизация производительности
При большом количестве событий стоит кэшировать результаты AJAX-запросов или использовать пагинацию, чтобы не перегружать сервер. Для этого можно применить Clearfy Pro и его инструменты оптимизации.
Расширение функционала через REST API
Если вы хотите создавать мобильные приложения или интегрировать маркетинговый календарь с внешними сервисами, можно добавить поддержку REST API для кастомного типа записей. Для этого достаточно указать 'show_in_rest' => true при регистрации типа записи, что мы уже сделали, и затем обращаться к маршрутам WordPress REST API.