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

Автор: Елена Полякова | Опубликовано: 14.02.2026

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

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

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

Автоматическое обновление содержимого без ручного редактирования.
Интеграция с базой данных или внешними API.
Возможность фильтрации, сортировки и пагинации.
Улучшение UX за счёт интерактивности.

Рассмотрим создание такого решения с нуля.

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

Регистрация шорткода в functions.php

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

function wpmoney_render_dynamic_table() {
    $data = [
        ['ID' => 1, 'Название' => 'Товар 1', 'Цена' => '1000 руб.'],
        ['ID' => 2, 'Название' => 'Товар 2', 'Цена' => '1500 руб.'],
        ['ID' => 3, 'Название' => 'Товар 3', 'Цена' => '2000 руб.'],
    ];

    $output = '<table border="1" cellpadding="5" cellspacing="0"><thead><tr>';
    // Заголовки таблицы
    foreach (array_keys($data[0]) as $header) {
        $output .= '<th>' . esc_html($header) . '</th>';
    }
    $output .= '</tr></thead><tbody>';

    // Данные таблицы
    foreach ($data as $row) {
        $output .= '<tr>';
        foreach ($row as $cell) {
            $output .= '<td>' . esc_html($cell) . '</td>';
        }
        $output .= '</tr>';
    }

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

    return $output;
}
add_shortcode('wpmoney_table', 'wpmoney_render_dynamic_table');

Этот шорткод выводит простую таблицу с тремя столбцами: ID, Название и Цена. Чтобы использовать, вставьте в редактор поста или страницы [wpmoney_table].

Обработка данных из базы WordPress

В реальных проектах данные обычно берутся из базы. Пример получения данных из пользовательской таблицы wp_postmeta или кастомного типа записей:

function wpmoney_render_products_table() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'products'; // предположим, есть таблица с товарами

    $results = $wpdb->get_results("SELECT id, title, price FROM {$table_name} WHERE price > 0", ARRAY_A);

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

    $output = '<table border="1" cellpadding="5" cellspacing="0"><thead><tr>';
    foreach (array_keys($results[0]) as $header) {
        $output .= '<th>' . esc_html($header) . '</th>';
    }
    $output .= '</tr></thead><tbody>';

    foreach ($results as $row) {
        $output .= '<tr>';
        foreach ($row as $cell) {
            $output .= '<td>' . esc_html($cell) . '</td>';
        }
        $output .= '</tr>';
    }

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

    return $output;
}
add_shortcode('wpmoney_products', 'wpmoney_render_products_table');

Такой шорткод [wpmoney_products] выведет таблицу с товарами из базы.

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

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

Подключение DataTables в тему

Добавьте в functions.php код для подключения скриптов и стилей:

function wpmoney_enqueue_datatables() {
    wp_enqueue_style('datatables-css', 'https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css', [], null);
    wp_enqueue_script('datatables-js', 'https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js', ['jquery'], null, true);

    wp_add_inline_script('datatables-js', "
        jQuery(document).ready(function($) {
            $('.wpmoney-data-table').DataTable({
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/ru.json'
                }
            });
        });
    ");
}
add_action('wp_enqueue_scripts', 'wpmoney_enqueue_datatables');

Изменяем шорткод для интеграции с DataTables

Отредактируем функцию вывода таблицы, добавив класс:

function wpmoney_render_dynamic_table() {
    $data = [
        ['ID' => 1, 'Название' => 'Товар 1', 'Цена' => '1000 руб.'],
        ['ID' => 2, 'Название' => 'Товар 2', 'Цена' => '1500 руб.'],
        ['ID' => 3, 'Название' => 'Товар 3', 'Цена' => '2000 руб.'],
    ];

    $output = '<table class="wpmoney-data-table" border="1" cellpadding="5" cellspacing="0"><thead><tr>';
    foreach (array_keys($data[0]) as $header) {
        $output .= '<th>' . esc_html($header) . '</th>';
    }
    $output .= '</tr></thead><tbody>';

    foreach ($data as $row) {
        $output .= '<tr>';
        foreach ($row as $cell) {
            $output .= '<td>' . esc_html($cell) . '</td>';
        }
        $output .= '</tr>';
    }

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

    return $output;
}
add_shortcode('wpmoney_table', 'wpmoney_render_dynamic_table');

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

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

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

TablePress — один из самых популярных и простых плагинов для управления таблицами. Поддерживает импорт/экспорт, формулы, расширения для сортировки и фильтра.
WP Table Builder — визуальный конструктор таблиц с drag-and-drop, подходит для создания таблиц сравнения и каталогов.
Data Tables Generator by Supsystic — мощный плагин с поддержкой больших таблиц, фильтров и пагинации.

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

Советы по безопасности и производительности

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

Всегда используйте функции WordPress для экранирования вывода, например esc_html(), чтобы избежать XSS-уязвимостей.
Оптимизируйте SQL-запросы, добавляйте индексы в базу, чтобы не нагружать сервер.
Рассмотрите кеширование результата шорткода, если данные меняются нечасто.
Используйте AJAX для подгрузки больших объёмов данных без перезагрузки страницы.

Например, кеширование можно реализовать так:

function wpmoney_render_dynamic_table_cached() {
    $cache_key = 'wpmoney_dynamic_table_cache';
    $cached = get_transient($cache_key);
    if ($cached !== false) {
        return $cached;
    }

    // Генерация таблицы
    $output = wpmoney_render_dynamic_table();

    set_transient($cache_key, $output, HOUR_IN_SECONDS);
    return $output;
}
add_shortcode('wpmoney_table_cached', 'wpmoney_render_dynamic_table_cached');

Заключение

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

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