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

Автор: Екатерина Лебедева | Опубликовано: 26.02.2026

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

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

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

Фильтровать данные по столбцам;
Сортировать строки по возрастанию и убыванию;
Обновлять содержимое через AJAX без перезагрузки страницы;
Интегрироваться с базой данных WordPress или внешними источниками.

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

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

Начнем с написания простого шорткода [wpreboot_dynamic_table], который выводит HTML-таблицу с данными из массива. Позже мы добавим динамические функции.

function wpreboot_dynamic_table_shortcode() {
    $data = [
        ['ID' => 1, 'Имя' => 'Иван', 'Возраст' => 28],
        ['ID' => 2, 'Имя' => 'Мария', 'Возраст' => 34],
        ['ID' => 3, 'Имя' => 'Петр', 'Возраст' => 22],
    ];

    ob_start();
    echo '<table id="wpreboot-table" border="1" cellpadding="5" cellspacing="0">';
    echo '<thead><tr>';
    foreach (array_keys($data[0]) as $header) {
        echo '<th>' . esc_html($header) . '</th>';
    }
    echo '</tr></thead>';
    echo '<tbody>';
    foreach ($data as $row) {
        echo '<tr>';
        foreach ($row as $cell) {
            echo '<td>' . esc_html($cell) . '</td>';
        }
        echo '</tr>';
    }
    echo '</tbody></table>';

    return ob_get_clean();
}
add_shortcode('wpreboot_dynamic_table', 'wpreboot_dynamic_table_shortcode');

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

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

Чтобы сделать таблицу интерактивной, подключим популярную библиотеку DataTables.js. Она добавляет сортировку, поиск и пагинацию.

Для подключения библиотеки и инициализации таблицы используем wp_enqueue_scripts и wp_footer:

function wpreboot_enqueue_datatables() {
    wp_enqueue_style('datatables-css', 'https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css');
    wp_enqueue_script('jquery');
    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($) {
            $('#wpreboot-table').DataTable({
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/ru.json'
                }
            });
        });
    ");
}
add_action('wp_enqueue_scripts', 'wpreboot_enqueue_datatables');

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

Вывод данных из пользовательского типа записей в таблицу

Часто требуется вывести в таблицу данные из базы WordPress, например, из кастомного типа записей. Рассмотрим пример с типом записей "product" с метаполями "price" и "stock".

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

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

    ob_start();
    echo '<table id="wpreboot-table" class="display">';
    echo '<thead><tr><th>Название</th><th>Цена</th><th>Наличие</th></tr></thead>';
    echo '<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);
        echo '<tr>';
        echo '<td>' . esc_html(get_the_title()) . '</td>';
        echo '<td>' . esc_html($price) . '</td>';
        echo '<td>' . esc_html($stock) . '</td>';
        echo '</tr>';
    }
    echo '</tbody></table>';
    wp_reset_postdata();

    return ob_get_clean();
}
add_shortcode('wpreboot_products_table', 'wpreboot_dynamic_table_products_shortcode');

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

Подключение плагина ABC Pagination для улучшения навигации таблиц

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

Интеграция с нашей таблицей потребует создания кастомных WP_Query с параметрами пагинации, которые ABC Pagination помогает формировать и отображать.

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

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

Используйте серверную обработку (server-side processing) в DataTables для загрузки данных частями.
Кешируйте результаты запросов с помощью Transients API.
Оптимизируйте запросы WP_Query — выбирайте только нужные поля.
Минимизируйте количество подключаемых скриптов и стилей.

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

add_action('wp_ajax_wpreboot_get_table_data', 'wpreboot_get_table_data_callback');
add_action('wp_ajax_nopriv_wpreboot_get_table_data', 'wpreboot_get_table_data_callback');

function wpreboot_get_table_data_callback() {
    // Проверка nonce и прав доступа
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'wpreboot_nonce')) {
        wp_send_json_error('Неверный nonce');
        wp_die();
    }

    // Пример получения данных из базы
    global $wpdb;
    $results = $wpdb->get_results("SELECT ID, post_title FROM {$wpdb->posts} WHERE post_type = 'product' AND post_status = 'publish'", ARRAY_A);

    wp_send_json_success($results);
    wp_die();
}

В JS вы можете вызвать этот ajax и обновлять таблицу без перезагрузки.

Вывод

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

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