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

Автор: Людмила Журавлева | Опубликовано: 17.11.2025

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

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

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

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

Рассмотрим, как можно реализовать такие таблицы на практике.

Использование плагинов для создания динамических таблиц в WordPress

wpDataTables — мощный инструмент для таблиц и графиков

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

Основные особенности wpDataTables:

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

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

TablePress — бесплатное и простое решение

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

Преимущества TablePress:

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

Пример подключения DataTables для динамической сортировки в таблицах TablePress:

add_action('wp_enqueue_scripts', 'wplink_enqueue_datatables_scripts');
function wplink_enqueue_datatables_scripts() {
    if (is_page('your-table-page')) {
        wp_enqueue_script('datatables-js', 'https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js', array('jquery'), null, true);
        wp_enqueue_style('datatables-css', 'https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css');
        wp_add_inline_script('datatables-js', 'jQuery(document).ready(function($) { $("table.tablepress").DataTable(); });');
    }
}

Данный код подключит необходимые скрипты и активирует DataTables для таблиц TablePress на странице с ярлыком your-table-page.

Создание динамических таблиц с помощью пользовательского кода

Подключение данных из пользовательской таблицы базы данных

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

Допустим, у вас есть таблица wp_wplink_products с полями id, name, price и stock. Для вывода динамической таблицы создадим функцию:

function wplink_display_products_table() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'wplink_products';
    $results = $wpdb->get_results("SELECT * FROM {$table_name} ORDER BY name ASC");

    if (empty($results)) {
        return '<p>Товары не найдены.</p>';
    }

    $output = '<table class="wplink-products-table">';
    $output .= '<thead><tr><th>Название</th><th>Цена</th><th>Наличие</th></tr></thead>';
    $output .= '<tbody>';

    foreach ($results as $row) {
        $stock_status = $row->stock > 0 ? 'В наличии' : 'Нет в наличии';
        $output .= "<tr><td>" . esc_html($row->name) . "</td><td>" . number_format($row->price, 2, ',', ' ') . " руб.</td><td>" . $stock_status . "</td></tr>";
    }

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

add_shortcode('wplink_products_table', 'wplink_display_products_table');

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

Добавление сортировки и фильтрации с помощью JavaScript

Чтобы сделать таблицу интерактивной, подключим библиотеку DataTables, как в примере с TablePress:

add_action('wp_enqueue_scripts', 'wplink_enqueue_custom_datatables');
function wplink_enqueue_custom_datatables() {
    if (is_page('products')) {
        wp_enqueue_script('datatables-js', 'https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js', array('jquery'), null, true);
        wp_enqueue_style('datatables-css', 'https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css');
        wp_add_inline_script('datatables-js', 'jQuery(document).ready(function($) { $("table.wplink-products-table").DataTable({ "language": { "url": "//cdn.datatables.net/plug-ins/1.10.24/i18n/Russian.json" } }); });');
    }
}

Этот код активирует сортировку, фильтрацию и поиск по таблице продуктов, улучшая пользовательский опыт.

Оптимизация и безопасность динамических таблиц

Обработка входных данных и защита от SQL-инъекций

При работе с базой данных важно использовать подготовленные запросы и функции экранирования данных. В примерах выше мы использовали $wpdb->get_results с фиксированным запросом, что безопасно. Если нужно добавлять параметры, используйте $wpdb->prepare:

$sql = $wpdb->prepare("SELECT * FROM {$table_name} WHERE price < %d", $max_price);
$results = $wpdb->get_results($sql);

Это защитит от SQL-инъекций и повысит безопасность сайта.

Кэширование и производительность

При больших объёмах данных динамические таблицы могут замедлять загрузку страниц. Рекомендуется использовать кэширование результатов запросов, например, с помощью Transients API:

function wplink_get_cached_products() {
    $cached = get_transient('wplink_products_cache');
    if ($cached !== false) {
        return $cached;
    }
    global $wpdb;
    $table_name = $wpdb->prefix . 'wplink_products';
    $results = $wpdb->get_results("SELECT * FROM {$table_name} ORDER BY name ASC");
    set_transient('wplink_products_cache', $results, HOUR_IN_SECONDS);
    return $results;
}

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

Заключение

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

Важные моменты при реализации — безопасность запросов, производительность и удобство для пользователей. Используйте приведённые примеры кода и рекомендации, чтобы создавать профессиональные динамические таблицы на вашем сайте wplink.ru.