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

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

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

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

• Автоматически обновлять содержимое без редактирования страницы
• Подключать данные из базы или API
• Управлять форматированием и стилизацией через код
• Использовать шорткоды для гибкости размещения таблиц

Все это повышает удобство поддержки сайта и улучшает пользовательский опыт.

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

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

function wpbook_dynamic_table_shortcode() {
    $data = [
        ['ID' => 1, 'Название' => 'Товар А', 'Цена' => '1000 ₽'],
        ['ID' => 2, 'Название' => 'Товар Б', 'Цена' => '1500 ₽'],
        ['ID' => 3, 'Название' => 'Товар В', 'Цена' => '2000 ₽'],
    ];

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

    $output .= '<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('wpbook_dynamic_table', 'wpbook_dynamic_table_shortcode');

Этот код создаст шорткод [wpbook_dynamic_table], который выведет простую таблицу. Данные жестко заданы в массиве, но дальше мы покажем, как расширить функционал.

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

Предположим, нужно вывести список пользователей сайта в таблице. Для этого используем функцию get_users() и сформируем таблицу с именами и email.

function wpbook_user_list_table_shortcode() {
    $users = get_users(['orderby' => 'ID', 'order' => 'ASC']);

    if (empty($users)) {
        return '<p>Пользователи не найдены.</p>';
    }

    $output = '<table border="1" cellpadding="5" cellspacing="0">';
    $output .= '<thead><tr><th>ID</th><th>Имя пользователя</th><th>Email</th></tr></thead>';
    $output .= '<tbody>';

    foreach ($users as $user) {
        $output .= '<tr>';
        $output .= '<td>' . esc_html($user->ID) . '</td>';
        $output .= '<td>' . esc_html($user->user_login) . '</td>';
        $output .= '<td>' . esc_html($user->user_email) . '</td>';
        $output .= '</tr>';
    }

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

    return $output;
}
add_shortcode('wpbook_user_list', 'wpbook_user_list_table_shortcode');

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

Добавляем стилизацию таблицы через CSS

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

function wpbook_dynamic_table_with_style_shortcode() {
    // Данные
    $data = [
        ['ID' => 1, 'Название' => 'Товар А', 'Цена' => '1000 ₽'],
        ['ID' => 2, 'Название' => 'Товар Б', 'Цена' => '1500 ₽'],
        ['ID' => 3, 'Название' => 'Товар В', 'Цена' => '2000 ₽'],
    ];

    // Стили
    $style = '<style>
        .wpbook-table {border-collapse: collapse; width: 100%;}
        .wpbook-table th, .wpbook-table td {border: 1px solid #ddd; padding: 8px;}
        .wpbook-table th {background-color: #f4f4f4; text-align: left;}
        .wpbook-table tr:nth-child(even) {background-color: #f9f9f9;}
        .wpbook-table tr:hover {background-color: #f1f1f1;}
    </style>';

    $output = $style;
    $output .= '<table class="wpbook-table">';
    $output .= '<thead><tr>';
    foreach (array_keys($data[0]) as $header) {
        $output .= '<th>' . esc_html($header) . '</th>';
    }
    $output .= '</tr></thead>';

    $output .= '<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('wpbook_dynamic_table_style', 'wpbook_dynamic_table_with_style_shortcode');

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

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

Если нужна мощная работа с таблицами — сортировка, фильтры, импорт/экспорт — стоит обратить внимание на плагин TablePress. Он позволяет создавать таблицы через админку и выводить их через шорткоды.

Пример использования TablePress в шаблоне или плагине wpbook:

function wpbook_show_tablepress_table($atts) {
    $atts = shortcode_atts(['id' => 1], $atts);
    if (!function_exists('tablepress_get_table')) {
        return '<p>Плагин TablePress не активен.</p>';
    }
    $table = tablepress_get_table($atts['id'], true);
    if (empty($table)) {
        return '<p>Таблица не найдена.</p>';
    }
    return TablePress::$controller->render_table($atts['id'], true);
}
add_shortcode('wpbook_tablepress', 'wpbook_show_tablepress_table');

Используйте шорткод [wpbook_tablepress id=5], чтобы вывести таблицу с ID 5 из TablePress в любом месте сайта.

Как улучшить динамические таблицы — AJAX и фильтрация

Для больших объемов данных полезно внедрить AJAX-подгрузку и фильтрацию по параметрам. Это позволит пользователям быстрее находить нужное и не перегружать страницу.

Общий алгоритм:

• Создаем шорткод с базовой разметкой и полями фильтрации
• Подключаем скрипты JavaScript, которые отправляют AJAX-запросы к серверу
• На стороне PHP реализуем обработчик AJAX, возвращающий обновленную таблицу
• Обновляем DOM без перезагрузки страницы

Пример простого AJAX-обработчика и подключения скриптов выходит за рамки одной статьи, но суть понятна — используйте wp_ajax_wpbook_filter_table и wp_localize_script для передачи данных в JS.

Выводы и рекомендации

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

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