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

Автор: Вадим Ершов | Опубликовано: 27.02.2026

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

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

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

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

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

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

Плагин TablePress с расширениями

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

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

Интуитивно понятный редактор таблиц.
Поддержка импорта из CSV, Excel и Google Sheets.
Возможность добавлять пользовательские JS и CSS.
Расширения для динамического обновления и взаимодействия с API.

Для установки TablePress перейдите в админку WordPress → Плагины → Добавить новый, найдите TablePress и активируйте.

Плагин WPDataTables

WPDataTables — премиум-плагин, который отлично подходит для создания сложных динамических таблиц с фильтрами, поиском и интеграцией с внешними источниками данных (MySQL, JSON, CSV).

Основные возможности:

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

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

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

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

Пример: вывод последних 10 записей из кастомного типа постов в таблице

Допустим, у вас есть кастомный тип записей product с метаполями price и stock. Создадим шорткод [wpupgrade_dynamic_table], который выведет таблицу с этими данными.

function wpupgrade_get_dynamic_table() {
    $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" style="border-collapse:collapse; width:100%;">';
    $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(), 'price', true);
        $stock = get_post_meta(get_the_ID(), 'stock', true);

        $stock_text = $stock > 0 ? 'В наличии' : 'Нет в наличии';

        $output .= '<tr>';
        $output .= '<td>' . get_the_title() . '</td>';
        $output .= '<td>' . esc_html($price) . '</td>';
        $output .= '<td>' . $stock_text . '</td>';
        $output .= '</tr>';
    }

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

    wp_reset_postdata();

    return $output;
}
add_shortcode('wpupgrade_dynamic_table', 'wpupgrade_get_dynamic_table');

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

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

Чтобы улучшить удобство, можно добавить простую сортировку по столбцам с помощью JS-библиотеки sorttable. Для этого:

Добавьте класс sortable в тег <table> внутри функции шорткода:

$output = '<table class="sortable" border="1" cellpadding="5" cellspacing="0" style="border-collapse:collapse; width:100%;">';

Подключите скрипт sorttable в footer.php или через wp_enqueue_scripts:

function wpupgrade_enqueue_sorttable() {
    wp_enqueue_script('sorttable', 'https://www.kryogenix.org/code/browser/sorttable/sorttable.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'wpupgrade_enqueue_sorttable');

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

Вывод данных из внешнего API в динамическую таблицу

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

Пример: таблица с курсами валют из API

function wpupgrade_currency_table() {
    $response = wp_remote_get('https://api.exchangerate-api.com/v4/latest/USD');

    if (is_wp_error($response)) {
        return '<p>Ошибка получения данных.</p>';
    }

    $data = json_decode(wp_remote_retrieve_body($response), true);
    if (empty($data['rates'])) {
        return '<p>Данные не найдены.</p>';
    }

    $output = '<table border="1" cellpadding="5" cellspacing="0" style="border-collapse:collapse; width:100%;">';
    $output .= '<thead><tr><th>Валюта</th><th>Курс к USD</th></tr></thead>';
    $output .= '<tbody>';

    foreach ($data['rates'] as $currency => $rate) {
        $output .= '<tr><td>' . esc_html($currency) . '</td><td>' . esc_html($rate) . '</td></tr>';
    }

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

    return $output;
}
add_shortcode('wpupgrade_currency_table', 'wpupgrade_currency_table');

Используйте шорткод [wpupgrade_currency_table] для вывода таблицы с актуальными курсами валют.

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

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

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

Заключение

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

Если вы хотите расширить функционал сайта, обратите внимание на плагины из WPShop.ru, которые помогут улучшить управление контентом и взаимодействие с пользователем.