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

Автор: Нина Романова | Опубликовано: 18.12.2025

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

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

Статические таблицы — это просто HTML-код, вставленный в редактор. При изменении данных приходится каждый раз редактировать страницу, что неудобно и неэффективно. Динамическая таблица позволяет:

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

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

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

Начнем с простого примера, который выводит таблицу из массива данных. Код добавляется в functions.php вашей темы или в отдельный плагин.

function expertreview_dynamic_table_shortcode($atts) {
    $data = [
        ['id' => 1, 'name' => 'Иванов Иван', 'email' => 'ivanov@example.com'],
        ['id' => 2, 'name' => 'Петров Петр', 'email' => 'petrov@example.com'],
        ['id' => 3, 'name' => 'Сидоров Сидор', 'email' => 'sidorov@example.com'],
    ];

    $output = '<table border="1" cellpadding="5" cellspacing="0">';
    $output .= '<thead><tr><th>ID</th><th>Имя</th><th>Email</th></tr></thead>';
    $output .= '<tbody>';
    foreach ($data as $row) {
        $output .= '<tr>';
        $output .= '<td>' . esc_html($row['id']) . '</td>';
        $output .= '<td>' . esc_html($row['name']) . '</td>';
        $output .= '<td>' . esc_html($row['email']) . '</td>';
        $output .= '</tr>';
    }
    $output .= '</tbody></table>';

    return $output;
}
add_shortcode('expertreview_table', 'expertreview_dynamic_table_shortcode');

Теперь в любом месте сайта можно вставить шорткод [expertreview_table], и таблица отобразится автоматически.

Подключаем сортировку и фильтрацию с помощью JavaScript

Для улучшения удобства пользователя добавим возможность сортировки по столбцам. Самый простой способ — использовать библиотеку Simple-DataTables. Она легкая и не требует jQuery.

Подключим библиотеку и инициализируем таблицу:

function expertreview_enqueue_scripts() {
    wp_enqueue_script('simple-datatables', 'https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/simple-datatables.js', [], null, true);
}
add_action('wp_enqueue_scripts', 'expertreview_enqueue_scripts');

Изменим функцию шорткода так, чтобы таблице добавлялся уникальный ID, и подключим JS для инициализации:

function expertreview_dynamic_table_shortcode($atts) {
    $data = [
        ['id' => 1, 'name' => 'Иванов Иван', 'email' => 'ivanov@example.com'],
        ['id' => 2, 'name' => 'Петров Петр', 'email' => 'petrov@example.com'],
        ['id' => 3, 'name' => 'Сидоров Сидор', 'email' => 'sidorov@example.com'],
    ];

    $table_id = 'expertreview-table-' . rand(1000,9999);

    $output = '<table id="' . $table_id . '" border="1" cellpadding="5" cellspacing="0">';
    $output .= '<thead><tr><th>ID</th><th>Имя</th><th>Email</th></tr></thead>';
    $output .= '<tbody>';
    foreach ($data as $row) {
        $output .= '<tr>';
        $output .= '<td>' . esc_html($row['id']) . '</td>';
        $output .= '<td>' . esc_html($row['name']) . '</td>';
        $output .= '<td>' . esc_html($row['email']) . '</td>';
        $output .= '</tr>';
    }
    $output .= '</tbody></table>';

    $output .= '<script>
        document.addEventListener("DOMContentLoaded", function() {
            new simpleDatatables.DataTable("#' . $table_id . '");
        });
    </script>';

    return $output;
}

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

Загрузка данных из базы WordPress

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

function expertreview_dynamic_table_shortcode($atts) {
    $users = get_users();

    $table_id = 'expertreview-table-' . rand(1000,9999);

    $output = '<table id="' . $table_id . '" border="1" cellpadding="5" cellspacing="0">';
    $output .= '<thead><tr><th>ID</th><th>Имя пользователя</th><th>Email</th><th>Роль</th></tr></thead>';
    $output .= '<tbody>';

    foreach ($users as $user) {
        $roles = implode(', ', $user->roles);
        $output .= '<tr>';
        $output .= '<td>' . esc_html($user->ID) . '</td>';
        $output .= '<td>' . esc_html($user->user_login) . '</td>';
        $output .= '<td>' . esc_html($user->user_email) . '</td>';
        $output .= '<td>' . esc_html($roles) . '</td>';
        $output .= '</tr>';
    }

    $output .= '</tbody></table>';

    $output .= '<script>
        document.addEventListener("DOMContentLoaded", function() {
            new simpleDatatables.DataTable("#' . $table_id . '");
        });
    </script>';

    return $output;
}
add_shortcode('expertreview_table', 'expertreview_dynamic_table_shortcode');

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

Использование плагинов для упрощения задачи

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

TablePress — один из самых популярных плагинов для управления таблицами с удобным интерфейсом и поддержкой импорта CSV. Можно расширять функционал с помощью дополнительных аддонов.
WPDataTables — платный плагин с поддержкой больших данных, фильтров и редакторов.
Data Tables Generator by Supsystic — бесплатный и премиум плагин с визуальным редактором и возможностью интеграции с внешними источниками.

Для интеграции с собственным кодом или специфическими задачами шорткоды с кастомным PHP остаются лучшим решением.

Оптимизация и безопасность

При работе с динамическими таблицами важно:

Использовать esc_html() и другие функции экранирования для вывода данных, чтобы избежать XSS-уязвимостей.
Кэшировать результаты сложных запросов с помощью Transient API, если данные не меняются слишком часто.
Ограничивать доступ к таблицам с конфиденциальной информацией, используя проверки ролей пользователей.

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

Заключение

Создание динамической таблицы в WordPress с помощью шорткода — эффективный способ вывести данные в удобном виде с возможностью сортировки и поиска. Использование небольшого кода и легковесных библиотек позволяет добиться нужного результата без лишних плагинов. Для более сложных задач стоит рассмотреть специализированные плагины или разработку собственного решения.

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