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

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

Почему важна автообновляемая фильтровка в отчетах WordPress

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

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

Ниже я покажу пример реализации с использованием собственного WPData-стиля функций и интеграции с REST API.

Создаем REST API endpoint для выборки данных с фильтрами

Первым шагом создадим REST API endpoint, который будет принимать параметры фильтров и возвращать данные в формате JSON. Это позволит фронтенду динамически подгружать информацию.

Пример кода для functions.php или отдельного плагина:

function wpdata_register_report_endpoint() {
    register_rest_route('wpdata/v1', '/report/', array(
        'methods' => 'GET',
        'callback' => 'wpdata_get_filtered_report',
        'permission_callback' => function () {
            return current_user_can('read');
        },
    ));
}
add_action('rest_api_init', 'wpdata_register_report_endpoint');

function wpdata_get_filtered_report(WP_REST_Request $request) {
    global $wpdb;
    $filters = $request->get_params();

    // Пример фильтра: дата с и по
    $date_from = isset($filters['date_from']) ? sanitize_text_field($filters['date_from']) : '';
    $date_to = isset($filters['date_to']) ? sanitize_text_field($filters['date_to']) : '';

    $where = [];
    $query_params = [];

    if ($date_from) {
        $where[] = 'date >= %s';
        $query_params[] = $date_from;
    }
    if ($date_to) {
        $where[] = 'date <= %s';
        $query_params[] = $date_to;
    }

    $where_sql = '';
    if ($where) {
        $where_sql = 'WHERE ' . implode(' AND ', $where);
    }

    $sql = $wpdb->prepare("SELECT id, name, value, date FROM {$wpdb->prefix}custom_data_table {$where_sql} ORDER BY date DESC", $query_params);
    $results = $wpdb->get_results($sql);

    return rest_ensure_response($results);
}

В этом коде:

• Регистрируется endpoint /wp-json/wpdata/v1/report/ с методами GET.
• Принимаются параметры фильтра (например, date_from, date_to).
• Формируется безопасный SQL запрос с фильтрами.
• Возвращаются результат в JSON.

Создаем фронтенд с AJAX-запросами и динамической таблицей

Теперь создадим JavaScript-код для отправки параметров фильтра и обновления таблицы с отчетом без перезагрузки страницы.

Пример скрипта, который можно подключить в админке или на фронтенде:

jQuery(document).ready(function($) {
    function wpdata_load_report() {
        var date_from = $('#wpdata-filter-date-from').val();
        var date_to = $('#wpdata-filter-date-to').val();

        $.ajax({
            url: wpdata_ajax_object.api_url + 'wpdata/v1/report/',
            method: 'GET',
            data: {
                date_from: date_from,
                date_to: date_to
            },
            beforeSend: function(xhr) {
                xhr.setRequestHeader('X-WP-Nonce', wpdata_ajax_object.nonce);
            },
            success: function(data) {
                var tbody = $('#wpdata-report-table tbody');
                tbody.empty();
                if(data.length === 0) {
                    tbody.append('<tr><td colspan="4">Данные не найдены</td></tr>');
                    return;
                }
                data.forEach(function(item) {
                    tbody.append('<tr><td>' + item.id + '</td><td>' + item.name + '</td><td>' + item.value + '</td><td>' + item.date + '</td></tr>');
                });
            },
            error: function() {
                alert('Ошибка загрузки данных');
            }
        });
    }

    $('#wpdata-filter-date-from, #wpdata-filter-date-to').on('change', wpdata_load_report);

    // Загрузка при старте
    wpdata_load_report();
});

Для корректной работы нужно локализовать скрипт в PHP, передав URL REST API и nonce для безопасности:

function wpdata_enqueue_scripts() {
    wp_enqueue_script('wpdata-report', get_template_directory_uri() . '/js/wpdata-report.js', array('jquery'), null, true);
    wp_localize_script('wpdata-report', 'wpdata_ajax_object', array(
        'api_url' => esc_url_raw(rest_url()),
        'nonce' => wp_create_nonce('wp_rest')
    ));
}
add_action('wp_enqueue_scripts', 'wpdata_enqueue_scripts');

HTML-разметка для фильтров и таблицы отчета

Вот простой пример разметки, которую можно вставить в нужное место темы или плагина:

<label for="wpdata-filter-date-from">Дата с:</label>
<input type="date" id="wpdata-filter-date-from">

<label for="wpdata-filter-date-to">Дата по:</label>
<input type="date" id="wpdata-filter-date-to">

<table id="wpdata-report-table" border="1">
  <thead>
    <tr>
      <th>ID</th>
      <th>Название</th>
      <th>Значение</th>
      <th>Дата</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

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

Оптимизация и расширение отчета с WPData и Clearfy Pro

Если вы используете плагин WPData, можно значительно облегчить создание подобных отчетов, воспользовавшись его функционалом импорта, фильтрации и кеширования. WPData умеет работать с REST API, что упрощает построение кастомных отчетов.

Плагин Clearfy Pro поможет оптимизировать скорость и безопасность сайта, что важно при работе с отчетами и динамическими данными.

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

Подведение итогов и советы по реализации

Создание автообновляемого отчета с подробной фильтровкой — задача, требующая внимательного подхода к безопасности, производительности и удобству пользователя. Использование REST API и AJAX позволит сделать интерфейс отзывчивым, а грамотное построение SQL-запросов — сохранить производительность.

Обязательно проверяйте входные данные на безопасность, используйте подготовленные запросы и не возвращайте лишних данных. Для больших объемов данных продумывайте пагинацию и индексацию.

Надеюсь, этот подробный пример поможет вам создать собственные динамические отчеты в WordPress с высокой скоростью и удобством.