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

Автор: Георгий Громов | Опубликовано: 26.12.2025

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

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

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

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

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

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

Пример базового шорткода

function wpinfo_dynamic_table_shortcode() {
    $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('wpinfo_dynamic_table', 'wpinfo_dynamic_table_shortcode');

Этот код можно добавить в functions.php вашей темы или в отдельный плагин. После этого на любой странице или записи WordPress можно вставить [wpinfo_dynamic_table] и получить таблицу с тремя строками.

Как выводить данные из пользовательских типов записей (CPT)

Рассмотрим, как подгружать динамические данные из собственных типов записей. Допустим, у вас есть CPT product с метаполями price и description. Нужно вывести таблицу с этими данными.

function wpinfo_products_table_shortcode() {
    $args = [
        'post_type' => 'product',
        'posts_per_page' => 10,
        'post_status' => 'publish',
    ];
    $query = new WP_Query($args);

    if(!$query->have_posts()) {
        return '<p>Продукты не найдены.</p>';
    }

    $output = '<table border="1" cellpadding="5" cellspacing="0"><thead><tr><th>Название</th><th>Цена</th><th>Описание</th></tr></thead><tbody>';

    while($query->have_posts()) {
        $query->the_post();
        $price = get_post_meta(get_the_ID(), 'price', true);
        $description = get_post_meta(get_the_ID(), 'description', true);

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

    $output .= '</tbody></table>';
    return $output;
}
add_shortcode('wpinfo_products_table', 'wpinfo_products_table_shortcode');

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

Добавление сортировки и пагинации к таблице

Для улучшения UX полезно добавить сортировку по колонкам и пагинацию. Это можно сделать с помощью JavaScript-библиотеки DataTables, которая легко интегрируется в WordPress.

Интеграция DataTables

Сначала подключим необходимые скрипты и стили в functions.php:

function wpinfo_enqueue_datatables_assets() {
    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', ['jquery'], null, true);
}
add_action('wp_enqueue_scripts', 'wpinfo_enqueue_datatables_assets');

Далее модифицируем шорткод, чтобы вывести таблицу с классом для DataTables и добавить инициализацию:

function wpinfo_products_table_with_datatables_shortcode() {
    // Аналогично предыдущему примеру, получаем посты
    $args = [
        'post_type' => 'product',
        'posts_per_page' => -1,
        'post_status' => 'publish',
    ];
    $query = new WP_Query($args);

    if(!$query->have_posts()) {
        return '<p>Продукты не найдены.</p>';
    }

    $output = '<table id="wpinfo-products-table" class="display" style="width:100%"><thead><tr><th>Название</th><th>Цена</th><th>Описание</th></tr></thead><tbody>';

    while($query->have_posts()) {
        $query->the_post();
        $price = get_post_meta(get_the_ID(), 'price', true);
        $description = get_post_meta(get_the_ID(), 'description', true);

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

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

    // Скрипт инициализации
    $output .= '<script>jQuery(document).ready(function($){ $("#wpinfo-products-table").DataTable(); });</script>';

    return $output;
}
add_shortcode('wpinfo_products_table_dt', 'wpinfo_products_table_with_datatables_shortcode');

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

Использование плагина Clearfy Pro для оптимизации таблиц

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

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

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

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

Пример кэширования с Transients API

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

    // здесь код генерации таблицы (например, из предыдущих примеров)
    $output = wpinfo_products_table_shortcode();

    set_transient($cache_key, $output, HOUR_IN_SECONDS); // кэш на 1 час

    return $output;
}
add_shortcode('wpinfo_products_table_cached', 'wpinfo_get_cached_products_table');

Такой подход уменьшит нагрузку на сервер при частых просмотрах.

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