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

Автор: Тимур Васильев | Опубликовано: 25.11.2025

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

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

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

Автоматически подтягивать и отображать актуальные данные из базы данных WordPress.
Фильтровать, сортировать и пагинировать записи без лишних усилий.
Интегрироваться с кастомными типами записей и метаданными.

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

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

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

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

Для установки:

Перейдите в Плагины > Добавить новый, найдите TablePress, установите и активируйте.
Создайте новую таблицу, заполните или импортируйте данные.
Вставьте шорткод [table id=1 /] в нужную страницу или запись.

Если нужны динамические данные, можно подключить TablePress Extension: https://tablepress.org/extensions/, например, для импорта данных из CSV по URL.

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

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

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

function wpedu_get_dynamic_table_products() {
    $args = array(
        'post_type' => 'product',
        'posts_per_page' => 10,
        'orderby' => 'date',
        'order' => 'DESC'
    );
    $query = new WP_Query($args);
    
    if(!$query->have_posts()) {
        return '<p>Товары не найдены.</p>';
    }
    
    $output = '<table border="1" cellpadding="5" cellspacing="0">';
    $output .= '<thead><tr><th>Название</th><th>Цена</th><th>Ссылка</th></tr></thead>';
    $output .= '<tbody>';
    
    while($query->have_posts()) {
        $query->the_post();
        $price = get_post_meta(get_the_ID(), '_product_price', true);
        $output .= '<tr>';
        $output .= '<td>' . get_the_title() . '</td>';
        $output .= '<td>' . esc_html($price) . '</td>';
        $output .= '<td><a href="' . get_permalink() . '">Посмотреть</a></td>';
        $output .= '</tr>';
    }
    
    wp_reset_postdata();
    
    $output .= '</tbody></table>';
    return $output;
}

function wpedu_register_dynamic_table_shortcode() {
    add_shortcode('wpedu_products_table', 'wpedu_get_dynamic_table_products');
}
add_action('init', 'wpedu_register_dynamic_table_shortcode');

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

Объяснение кода

Мы создаём WP_Query для типа записи product, получаем последние 10 записей. Для каждой записи выводим название, цену (мета-поле _product_price) и ссылку на страницу товара. Вся таблица формируется в HTML и возвращается функцией.

Добавление фильтров и сортировки в динамическую таблицу

Чтобы сделать таблицу более удобной для пользователей, стоит добавить возможность фильтровать и сортировать данные. Для этого можно использовать JavaScript-библиотеки, например, DataTables или List.js.

Пример интеграции DataTables:

Подключите CSS и JS DataTables в header.php или через wp_enqueue_scripts:

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

Измените вывод таблицы, чтобы добавить id для инициализации DataTables:

function wpedu_get_dynamic_table_products() {
    $args = array(
        'post_type' => 'product',
        'posts_per_page' => 10,
        'orderby' => 'date',
        'order' => 'DESC'
    );
    $query = new WP_Query($args);
    
    if(!$query->have_posts()) {
        return '<p>Товары не найдены.</p>';
    }
    
    $output = '<table id="wpedu-products-table" border="1" cellpadding="5" cellspacing="0">';
    $output .= '<thead><tr><th>Название</th><th>Цена</th><th>Ссылка</th></tr></thead>';
    $output .= '<tbody>';
    
    while($query->have_posts()) {
        $query->the_post();
        $price = get_post_meta(get_the_ID(), '_product_price', true);
        $output .= '<tr>';
        $output .= '<td>' . get_the_title() . '</td>';
        $output .= '<td>' . esc_html($price) . '</td>';
        $output .= '<td><a href="' . get_permalink() . '">Посмотреть</a></td>';
        $output .= '</tr>';
    }
    
    wp_reset_postdata();
    
    $output .= '</tbody></table>';
    return $output;
}

Теперь таблица автоматически получит функционал сортировки, поиска и пагинации от DataTables.

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

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

Использовать пагинацию на уровне WP_Query (параметр paged) и AJAX-загрузку данных.
Кэшировать результаты запросов с помощью Transients API.
Минимизировать количество дополнительных запросов (например, мета-полей).

Пример кэширования:

function wpedu_get_dynamic_table_products() {
    $cache_key = 'wpedu_products_table_cache';
    $output = get_transient($cache_key);
    if($output !== false) {
        return $output;
    }

    // Запрос и генерация таблицы (как в предыдущем примере)
    // ...

    set_transient($cache_key, $output, HOUR_IN_SECONDS);
    return $output;
}

Таким образом, таблица будет обновляться не чаще одного раза в час, что значительно снижает нагрузку.

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

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

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

⭐⭐⭐⭐⭐