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

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

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

Статичные таблицы, созданные через классический редактор или блоки, хорошо подходят для простых данных. Но если вы хотите:

• регулярно обновлять данные без правки каждой ячейки;
• делать сортировку и фильтрацию по столбцам;
• подключать данные из базы данных или внешних источников;
• автоматически форматировать таблицы;

тогда динамические таблицы — оптимальное решение.

Использование собственного shortcode для вывода таблиц позволяет интегрировать данные из разных источников и предоставляет гибкость в отображении.

Создание простого shortcode для таблицы в WordPress

Начнем с базового примера, как создать shortcode, который выводит таблицу с данными, заданными прямо в коде. Код нужно добавить в файл functions.php вашей темы или в плагин для кастомных функций.

function wpto_dynamic_table_shortcode() {
    $data = [
        ['Имя', 'Возраст', 'Город'],
        ['Алексей', 28, 'Москва'],
        ['Мария', 34, 'Санкт-Петербург'],
        ['Иван', 22, 'Новосибирск'],
    ];

    $html = '<table border="1" cellpadding="5" cellspacing="0">';
    foreach ($data as $rowIndex => $row) {
        $html .= '<tr>';
        foreach ($row as $cell) {
            if ($rowIndex === 0) {
                $html .= '<th>' . esc_html($cell) . '</th>';
            } else {
                $html .= '<td>' . esc_html($cell) . '</td>';
            }
        }
        $html .= '</tr>';
    }
    $html .= '</table>';

    return $html;
}
add_shortcode('wpto_table', 'wpto_dynamic_table_shortcode');

Вызовите shortcode [wpto_table] в любом посте или странице, чтобы увидеть таблицу.

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

Добавление параметров в shortcode для гибкости

Чтобы таблица могла принимать данные из атрибутов shortcode, например, список записей или пользовательские данные, расширим функцию:

function wpto_dynamic_table_shortcode($atts) {
    $atts = shortcode_atts([
        'ids' => '', // список ID постов через запятую
    ], $atts, 'wpto_table');

    $ids = array_filter(array_map('intval', explode(',', $atts['ids'])));
    if (empty($ids)) {
        return '<p>Нет данных для отображения</p>';
    }

    $posts = get_posts(['post__in' => $ids, 'orderby' => 'post__in']);
    if (empty($posts)) {
        return '<p>Посты не найдены</p>';
    }

    $html = '<table border="1" cellpadding="5" cellspacing="0">';
    $html .= '<tr><th>Название</th><th>Дата</th></tr>';

    foreach ($posts as $post) {
        $html .= '<tr>';
        $html .= '<td>' . esc_html($post->post_title) . '</td>';
        $html .= '<td>' . esc_html(get_the_date('', $post)) . '</td>';
        $html .= '</tr>';
    }

    $html .= '</table>';
    return $html;
}
add_shortcode('wpto_table', 'wpto_dynamic_table_shortcode');

Теперь, если вы хотите вывести таблицу с конкретными постами, достаточно написать, например, [wpto_table ids="12,15,30"].

Использование плагинов для расширения функционала таблиц

Если нужны более сложные таблицы с сортировкой, фильтрацией и пагинацией, рекомендую обратить внимание на следующие плагины:

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

Например, для TablePress можно вывести таблицу так:

[table id=1 /]

А для динамического добавления данных используйте API плагина или создайте интеграцию в functions.php.

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

TablePress хранит таблицы в базе данных. Можно программно обновить содержимое таблицы, например:

function wpto_update_tablepress_table() {
    if (!class_exists('TablePress_Controller_Table')) {
        return;
    }

    $table_id = 1; // ID таблицы
    $table = TablePress::$model_table->load($table_id);

    $table['data'] = [
        ['Имя', 'Возраст', 'Город'],
        ['Ольга', '29', 'Казань'],
        ['Дмитрий', '31', 'Екатеринбург'],
    ];

    TablePress::$model_table->save($table);
}
add_action('init', 'wpto_update_tablepress_table');

Этот код обновит таблицу с ID 1 при загрузке сайта. Используйте с осторожностью и по необходимости.

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

Очень часто нужно выводить таблицы не из статичных данных, а из кастомных таблиц в базе данных или метаданных. В этом случае shortcode должен обращаться к базе напрямую.

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

function wpto_orders_table_shortcode() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'orders';

    $results = $wpdb->get_results("SELECT order_id, customer_name, total_price, order_date FROM $table_name ORDER BY order_date DESC");

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

    $html = '<table border="1" cellpadding="5" cellspacing="0">';
    $html .= '<tr><th>ID заказа</th><th>Клиент</th><th>Сумма</th><th>Дата</th></tr>';

    foreach ($results as $row) {
        $html .= '<tr>';
        $html .= '<td>' . esc_html($row->order_id) . '</td>';
        $html .= '<td>' . esc_html($row->customer_name) . '</td>';
        $html .= '<td>' . esc_html(number_format($row->total_price, 2)) . '</td>';
        $html .= '<td>' . esc_html(date('d.m.Y', strtotime($row->order_date))) . '</td>';
        $html .= '</tr>';
    }

    $html .= '</table>';

    return $html;
}
add_shortcode('wpto_orders', 'wpto_orders_table_shortcode');

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

Оптимизация и безопасность при работе с динамическими таблицами

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

• Обязательно используйте esc_html() и другие функции экранирования при выводе данных.
• При обращении к базе данных используйте подготовленные запросы или методы WPDB.
• Не выводите необработанные данные от пользователей без проверки.

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

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

    $output = wpto_dynamic_table_shortcode();
    set_transient($cache_key, $output, HOUR_IN_SECONDS);

    return $output;
}
add_shortcode('wpto_table_cached', 'wpto_dynamic_table_shortcode_cached');

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

Заключение по созданию динамических таблиц в WordPress

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

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