Как использовать динамические таблицы в WordPress: практические примеры и плагины

Автор: Ярослав Жуков | Опубликовано: 08.04.2026

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

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

Таблицы часто используются для представления большого объема информации: расписания, прайс-листы, каталоги товаров, статистика и многое другое. Статические таблицы неудобны, так как пользователям приходится листать все данные вручную. Динамические таблицы позволяют:

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

Все это улучшает UX и повышает вовлеченность посетителей сайта.

Лучшие плагины для создания динамических таблиц в WordPress

TablePress

TablePress — один из самых популярных и бесплатных плагинов для создания и управления таблицами. Он поддерживает импорт из Excel и CSV, удобный редактор, а также расширения для динамических функций.

Для добавления динамических возможностей, таких как сортировка и поиск, нужно активировать опцию "JavaScript DataTables" в настройках плагина.

Пример использования shortcode:

[table id=1 /]

Где 1 — ID вашей таблицы.

WPDataTables

WPDataTables — более продвинутый плагин с поддержкой динамического импорта из баз данных, Excel, CSV, Google Sheets и даже MySQL запросов. Он позволяет строить интерактивные таблицы с фильтрами и сортировкой без написания кода.

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

Posts Table Pro

Если нужно вывести таблицу с записями WordPress, например, список товаров, постов или пользователей, Posts Table Pro — отличный выбор. Он автоматически подтягивает данные из пользовательских полей и таксономий, поддерживает AJAX-поиск и фильтрацию.

Создание динамической таблицы с кастомным кодом в WordPress

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

Подключение DataTables в теме или плагине

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

function wpurok_enqueue_datatables() {
    wp_enqueue_style('datatables-css', 'https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css');
    wp_enqueue_script('jquery');
    wp_enqueue_script('datatables-js', 'https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js', array('jquery'), null, true);
    wp_add_inline_script('datatables-js', 'jQuery(document).ready(function($) { $("#wpurok-table").DataTable(); });');
}
add_action('wp_enqueue_scripts', 'wpurok_enqueue_datatables');

Этот код подключает необходимые ресурсы и инициализирует DataTables для таблицы с ID wpurok-table.

Вывод таблицы с данными из базы WordPress

Далее создадим shortcode для вывода динамической таблицы на основе данных из пользовательского типа записи product (предположим, что у вас есть такой тип записи). Код для functions.php или плагина:

function wpurok_dynamic_table_shortcode() {
    global $wpdb;
    $results = $wpdb->get_results("SELECT ID, post_title, post_date FROM {$wpdb->prefix}posts WHERE post_type = 'product' AND post_status = 'publish' ORDER BY post_date DESC");
    if (empty($results)) {
        return '<p>Нет данных для отображения.</p>';
    }
    $output = '<table id="wpurok-table" class="display" style="width:100%">';
    $output .= '<thead><tr><th>ID</th><th>Название продукта</th><th>Дата публикации</th></tr></thead>';
    $output .= '<tbody>';
    foreach ($results as $row) {
        $output .= '<tr>';
        $output .= '<td>' . esc_html($row->ID) . '</td>';
        $output .= '<td>' . esc_html($row->post_title) . '</td>';
        $output .= '<td>' . esc_html(date('d.m.Y', strtotime($row->post_date))) . '</td>';
        $output .= '</tr>';
    }
    $output .= '</tbody></table>';
    return $output;
}
add_shortcode('wpurok_dynamic_table', 'wpurok_dynamic_table_shortcode');

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

Фильтрация и расширенные возможности таблиц

DataTables поддерживает множество расширений, которые можно интегрировать в WordPress, например:

Фильтрация по дате, диапазону чисел или категориям;
Экспорт таблиц в PDF, Excel, CSV;
Редактирование ячеек на лету;
Группировка строк и столбцов.

Для подключения дополнительных функций потребуется добавить соответствующие скрипты и настроить инициализацию DataTables. Например, для экспорта добавьте:

wp_enqueue_script('datatables-buttons', 'https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js', array('datatables-js'), null, true);
wp_enqueue_script('jszip', 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js', array(), null, true);
wp_enqueue_script('pdfmake', 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js', array(), null, true);
wp_enqueue_script('vfs_fonts', 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js', array(), null, true);
wp_enqueue_script('buttons-html5', 'https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js', array('datatables-js'), null, true);

wp_add_inline_script('datatables-js', 'jQuery(document).ready(function($) {
  $("#wpurok-table").DataTable({
    dom: "Bfrtip",
    buttons: ["copyHtml5", "excelHtml5", "csvHtml5", "pdfHtml5"]
  });
});');

Плагины WPShop для улучшения работы с таблицами и данными

Если вы используете WPShop, обратите внимание на следующие продукты для расширения функционала таблиц и контента:

WPGPT — для динамического создания и обновления контента на основе AI;
WPCommunity — создание внутренней социальной сети с поддержкой таблиц пользователей;
Expert Review — автоматизация отзывов, которые можно выводить в виде таблиц с рейтингами.

Использование этих плагинов в связке с динамическими таблицами позволит существенно улучшить функционал вашего сайта.

Заключение по работе с динамическими таблицами в WordPress

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

Не забывайте о производительности: для больших объемов данных лучше использовать AJAX-загрузку и серверную обработку, чтобы не нагружать браузер пользователя.

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

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