Как создать динамическую таблицу в WordPress с помощью шорткода

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

Почему нужна динамическая таблица в WordPress

Статические таблицы в WordPress создаются вручную через HTML или визуальные редакторы. Однако с ростом данных такой подход неудобен и неэффективен. Динамическая таблица позволяет:

Автоматически подгружать данные из базы данных или массива;
Выполнять сортировку по столбцам прямо на странице без перезагрузки;
Реализовать фильтрацию данных по различным критериям;
Добавлять пагинацию для удобного просмотра большого объёма данных;
Обеспечить адаптивность и удобство использования на мобильных устройствах.

В следующем разделе мы рассмотрим, как можно реализовать такую таблицу через шорткод.

Создание шорткода для динамической таблицы — пошаговое руководство

Для примера создадим простой плагин или добавим код в файл functions.php вашей темы. Мы реализуем шорткод [wpstart_dynamic_table], который выведет таблицу с возможностью сортировки и пагинации с помощью библиотеки DataTables.

Шаг 1. Подключение скриптов DataTables

Для удобства используем популярный jQuery-плагин DataTables. Сначала зарегистрируем и подключим стили и скрипты в WordPress. Добавьте следующий код в functions.php:

function wpstart_enqueue_datatables_assets() {
    wp_enqueue_style('wpstart-datatables-css', 'https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css', [], null);
    wp_enqueue_script('jquery');
    wp_enqueue_script('wpstart-datatables-js', 'https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js', ['jquery'], null, true);
    wp_enqueue_script('wpstart-datatables-init', get_template_directory_uri() . '/js/wpstart-datatables-init.js', ['wpstart-datatables-js'], null, true);
}
add_action('wp_enqueue_scripts', 'wpstart_enqueue_datatables_assets');

Здесь мы подключаем CSS и JS DataTables, а также собственный скрипт wpstart-datatables-init.js, который инициализирует таблицу. Создайте файл wpstart-datatables-init.js в папке js вашей темы со следующим содержимым:

jQuery(document).ready(function($) {
    $('#wpstart-table').DataTable({
        "paging": true,
        "searching": true,
        "ordering": true,
        "info": true
    });
});

Шаг 2. Создание шорткода и вывода таблицы

Теперь создадим шорткод, который выведет HTML-таблицу с уникальным ID wpstart-table. Вот пример кода для functions.php:

function wpstart_dynamic_table_shortcode() {
    // Пример данных — в реальном проекте можно брать из базы или API
    $data = [
        ['ID' => 1, 'Имя' => 'Иван', 'Email' => 'ivan@example.com', 'Возраст' => 30],
        ['ID' => 2, 'Имя' => 'Мария', 'Email' => 'maria@example.com', 'Возраст' => 25],
        ['ID' => 3, 'Имя' => 'Петр', 'Email' => 'petr@example.com', 'Возраст' => 35],
        ['ID' => 4, 'Имя' => 'Анна', 'Email' => 'anna@example.com', 'Возраст' => 28],
    ];

    ob_start();
    ?>
    <table id="wpstart-table" class="display" style="width:100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Имя</th>
                <th>Email</th>
                <th>Возраст</th>
            </tr>
        </thead>
        <tbody>
        <?php foreach ($data as $row): ?>
            <tr>
                <td><?php echo esc_html($row['ID']); ?></td>
                <td><?php echo esc_html($row['Имя']); ?></td>
                <td><?php echo esc_html($row['Email']); ?></td>
                <td><?php echo esc_html($row['Возраст']); ?></td>
            </tr>
        <?php endforeach; ?>
        </tbody>
    </table>
    <?php
    return ob_get_clean();
}
add_shortcode('wpstart_dynamic_table', 'wpstart_dynamic_table_shortcode');

Теперь, добавив в запись или на страницу шорткод [wpstart_dynamic_table], вы получите интерактивную таблицу с сортировкой, поиском и пагинацией.

Расширение функционала таблицы — загрузка данных через AJAX

Если данных много или вы хотите загружать их динамически, оптимальнее использовать AJAX-запросы к серверу. DataTables поддерживает серверную обработку — это позволяет выводить данные по страницам с сервера, экономя ресурсы.

Реализация AJAX-загрузки на стороне WordPress

Пример реализации AJAX-загрузки данных:

Создайте AJAX-обработчик в WordPress.
Настройте DataTables на использование AJAX.

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

function wpstart_ajax_get_table_data() {
    // Проверка прав и nonce при необходимости

    // Пример данных — в реальных условиях берите из базы с учетом $_POST['start'], $_POST['length'] и др.
    $data = [
        ['ID' => 1, 'Имя' => 'Иван', 'Email' => 'ivan@example.com', 'Возраст' => 30],
        ['ID' => 2, 'Имя' => 'Мария', 'Email' => 'maria@example.com', 'Возраст' => 25],
        ['ID' => 3, 'Имя' => 'Петр', 'Email' => 'petr@example.com', 'Возраст' => 35],
        ['ID' => 4, 'Имя' => 'Анна', 'Email' => 'anna@example.com', 'Возраст' => 28],
    ];

    $response = [
        'draw' => intval($_POST['draw']),
        'recordsTotal' => count($data),
        'recordsFiltered' => count($data),
        'data' => []
    ];

    foreach ($data as $row) {
        $response['data'][] = array_values($row);
    }

    wp_send_json($response);
}
add_action('wp_ajax_wpstart_get_table_data', 'wpstart_ajax_get_table_data');
add_action('wp_ajax_nopriv_wpstart_get_table_data', 'wpstart_ajax_get_table_data');

Измените инициализацию DataTables в wpstart-datatables-init.js:

jQuery(document).ready(function($) {
    $('#wpstart-table').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": wpstart_ajax_object.ajax_url,
            "type": "POST",
            "data": { action: 'wpstart_get_table_data' }
        },
        "columns": [
            { "data": 0 },
            { "data": 1 },
            { "data": 2 },
            { "data": 3 }
        ]
    });
});

И не забудьте локализовать скрипт, чтобы передать AJAX URL:

function wpstart_localize_scripts() {
    wp_localize_script('wpstart-datatables-init', 'wpstart_ajax_object', [
        'ajax_url' => admin_url('admin-ajax.php')
    ]);
}
add_action('wp_enqueue_scripts', 'wpstart_localize_scripts');

Советы по оптимизации и безопасности при работе с таблицами

При выводе данных из базы всегда фильтруйте и экранируйте пользовательский ввод, чтобы избежать SQL-инъекций и XSS-уязвимостей.

Используйте wpdb->prepare() для безопасных запросов и функции esc_html() или esc_attr() при выводе данных.

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

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