Как создать интерактивный график работы в WordPress с помощью PHP и JavaScript

Автор: Дарья Данилова | Опубликовано: 28.03.2026

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

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

Статический график — это просто таблица или текст, который сложно адаптировать под разные устройства и пользовательские запросы. Интерактивный график позволяет:

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

Для реализации нам понадобится базовое знание PHP, JavaScript и WordPress API.

Подготовка данных для графика

Для начала нужно определиться, где хранить данные о графике. Варианты:

Использовать пользовательские поля (метаполя) для страниц или записей
Создать отдельный пользовательский тип записи «График работы»
Хранить данные в отдельной таблице базы данных

Для простоты возьмём первый вариант — метаполя. Например, для каждой записи с графиком создадим массив с днями и временем работы.

Пример структуры метаполя для графика

array(
  'monday'    => '09:00-18:00',
  'tuesday'   => '09:00-18:00',
  'wednesday' => '09:00-18:00',
  'thursday'  => '09:00-18:00',
  'friday'    => '09:00-17:00',
  'saturday'  => 'выходной',
  'sunday'    => 'выходной'
)

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

Вывод графика на страницу с помощью шорткода

Создадим функцию для wpkit_render_work_schedule(), которая будет выводить интерактивный график. Добавим шорткод [wpkit_work_schedule], который можно вставлять в посты и страницы.

function wpkit_render_work_schedule() {
  $post_id = get_the_ID();
  $schedule = get_post_meta($post_id, '_wpkit_work_schedule', true);

  if (empty($schedule) || !is_array($schedule)) {
    return '<p>График работы не установлен.</p>';
  }

  $days = array(
    'monday'    => 'Понедельник',
    'tuesday'   => 'Вторник',
    'wednesday' => 'Среда',
    'thursday'  => 'Четверг',
    'friday'    => 'Пятница',
    'saturday'  => 'Суббота',
    'sunday'    => 'Воскресенье',
  );

  $output = '<table class="wpkit-work-schedule"><thead><tr><th>День</th><th>Время работы</th></tr></thead><tbody>';
  foreach ($days as $key => $label) {
    $time = isset($schedule[$key]) ? esc_html($schedule[$key]) : '—';
    $output .= "<tr data-day=\"$key\"><td>$label</td><td>$time</td></tr>";
  }
  $output .= '</tbody></table>';

  // Подключаем скрипт для интерактивности
  wp_enqueue_script('wpkit-work-schedule', get_template_directory_uri() . '/js/wpkit-work-schedule.js', array('jquery'), '1.0', true);

  return $output;
}
add_shortcode('wpkit_work_schedule', 'wpkit_render_work_schedule');

Этот код выводит таблицу с днями недели и временем работы. Для интерактивности создадим отдельный JS-файл.

Добавление интерактивности с JavaScript

В файле wpkit-work-schedule.js реализуем подсветку текущего дня недели и возможность кликать на строки для показа всплывающей подсказки с дополнительной информацией.

jQuery(document).ready(function($) {
  function wpkitHighlightCurrentDay() {
    var daysMap = {
      1: 'monday',
      2: 'tuesday',
      3: 'wednesday',
      4: 'thursday',
      5: 'friday',
      6: 'saturday',
      0: 'sunday'
    };
    var today = new Date().getDay();
    var todayKey = daysMap[today];

    $('.wpkit-work-schedule tbody tr').each(function() {
      if ($(this).data('day') === todayKey) {
        $(this).addClass('wpkit-today');
      }
    });
  }

  wpkitHighlightCurrentDay();

  $('.wpkit-work-schedule tbody tr').on('click', function() {
    var day = $(this).data('day');
    var time = $(this).find('td:last').text();
    alert('График на ' + day + ': ' + time);
  });
});

Добавим стили для выделения текущего дня в CSS темы или кастомном CSS:

.wpkit-work-schedule {
  border-collapse: collapse;
  width: 100%;
  max-width: 400px;
}

.wpkit-work-schedule th, .wpkit-work-schedule td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.wpkit-work-schedule tr.wpkit-today {
  background-color: #e0f7fa;
  font-weight: bold;
  cursor: pointer;
}

Расширение функционала: фильтрация и обновление графика через AJAX

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

Для этого:

Добавьте селектор выбора филиала
Создайте обработчик AJAX в WordPress, который вернёт график для выбранного филиала
Подключите JS, который будет отправлять AJAX-запрос при смене селектора и обновлять таблицу

Пример AJAX-обработчика в functions.php:

add_action('wp_ajax_wpkit_get_schedule', 'wpkit_ajax_get_schedule');
add_action('wp_ajax_nopriv_wpkit_get_schedule', 'wpkit_ajax_get_schedule');

function wpkit_ajax_get_schedule() {
  $branch = sanitize_text_field($_POST['branch']);
  // Здесь логика получения расписания по филиалу
  // Для примера вернём статичный массив
  $schedule = array(
    'monday' => '10:00-19:00',
    'tuesday' => '10:00-19:00',
    'wednesday' => '10:00-19:00',
    'thursday' => '10:00-19:00',
    'friday' => '10:00-18:00',
    'saturday' => 'выходной',
    'sunday' => 'выходной',
  );

  wp_send_json_success($schedule);
}

И пример JS для отправки запроса и обновления таблицы:

jQuery(document).ready(function($) {
  $('#branch-select').on('change', function() {
    var branch = $(this).val();
    $.post(
      wpkit_ajax_object.ajax_url,
      {
        action: 'wpkit_get_schedule',
        branch: branch
      },
      function(response) {
        if(response.success) {
          var schedule = response.data;
          var rows = '';
          var daysMap = {
            'monday': 'Понедельник',
            'tuesday': 'Вторник',
            'wednesday': 'Среда',
            'thursday': 'Четверг',
            'friday': 'Пятница',
            'saturday': 'Суббота',
            'sunday': 'Воскресенье'
          };
          $.each(daysMap, function(key, label) {
            var time = schedule[key] || '—';
            rows += '<tr data-day="'+key+'"><td>'+label+'</td><td>'+time+'</td></tr>';
          });
          $('.wpkit-work-schedule tbody').html(rows);
        }
      }
    );
  });
});

Не забудьте локализовать скрипт в PHP для передачи ajax_url:

wp_enqueue_script('wpkit-work-schedule', get_template_directory_uri() . '/js/wpkit-work-schedule.js', array('jquery'), '1.0', true);
wp_localize_script('wpkit-work-schedule', 'wpkit_ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));

Готовые плагины для работы с расписаниями в WordPress

Если вы хотите готовое решение без программирования, обратите внимание на плагины:

OmniVideo — для интеграции видеоконтента, включая расписания онлайн-мероприятий
Expert Review — позволяет добавлять отзывы и рейтинги, можно адаптировать под расписания

Однако для точной настройки графика лучше использовать кастомный код, описанный выше.

Создание интерактивного графика работы в WordPress