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

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

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

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

Автоматически обновлять содержимое без ручного редактирования;
Выводить данные из базы данных, REST API и других источников;
Использовать фильтры, сортировку и пагинацию;
Улучшать пользовательский опыт за счет удобного отображения информации.

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

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

Для начала создадим базовый шорткод, который выведет HTML-таблицу с данными из массива. Добавьте следующий код в файл functions.php вашей темы или в отдельный плагин:

function wp_lessons_dynamic_table_shortcode($atts) {
    $data = [
        ['ID' => 1, 'Name' => 'Иван', 'Age' => 28],
        ['ID' => 2, 'Name' => 'Мария', 'Age' => 34],
        ['ID' => 3, 'Name' => 'Алексей', 'Age' => 23],
    ];

    $output = '<table border="1" cellpadding="5"><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('wp_lessons_table', 'wp_lessons_dynamic_table_shortcode');

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

Подключение данных из базы WordPress для динамической таблицы

Для реальных задач часто требуется выводить данные из базы — например, список последних пользователей, комментариев или кастомных записей. Рассмотрим пример вывода последних 5 опубликованных записей с названием и датой:

function wp_lessons_posts_table_shortcode($atts) {
    global $wpdb;
    $posts = $wpdb->get_results("SELECT ID, post_title, post_date FROM {$wpdb->prefix}posts WHERE post_status = 'publish' AND post_type = 'post' ORDER BY post_date DESC LIMIT 5", ARRAY_A);

    if (empty($posts)) {
        return '<p>Записи не найдены.</p>';
    }

    $output = '<table border="1" cellpadding="5"><thead><tr><th>ID</th><th>Название</th><th>Дата публикации</th></tr></thead><tbody>';

    foreach ($posts as $post) {
        $output .= '<tr>';
        $output .= '<td>' . esc_html($post['ID']) . '</td>';
        $output .= '<td><a href="' . esc_url(get_permalink($post['ID'])) . '">' . esc_html($post['post_title']) . '</a></td>';
        $output .= '<td>' . date('d.m.Y', strtotime($post['post_date'])) . '</td>';
        $output .= '</tr>';
    }

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

Добавьте шорткод [wp_lessons_posts_table] в редактор, чтобы вывести актуальные записи в виде таблицы с кликабельными заголовками и датами.

Добавление сортировки и фильтрации в динамические таблицы

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

Пример подключения DataTables к нашей таблице:

Добавьте в functions.php регистрацию и подключение скриптов и стилей DataTables:

function wp_lessons_enqueue_datatables() {
    wp_enqueue_style('wp-lessons-datatables-css', 'https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css');
    wp_enqueue_script('wp-lessons-datatables-js', 'https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js', array('jquery'), null, true);
    wp_add_inline_script('wp-lessons-datatables-js', "jQuery(document).ready(function($){ $('#wp-lessons-table').DataTable(); });");
}
add_action('wp_enqueue_scripts', 'wp_lessons_enqueue_datatables');

Измените функцию вывода таблицы, добавив ID для таблицы:

function wp_lessons_dynamic_table_shortcode($atts) {
    $data = [
        ['ID' => 1, 'Name' => 'Иван', 'Age' => 28],
        ['ID' => 2, 'Name' => 'Мария', 'Age' => 34],
        ['ID' => 3, 'Name' => 'Алексей', 'Age' => 23],
    ];

    $output = '<table id="wp-lessons-table" border="1" cellpadding="5"><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('wp_lessons_table', 'wp_lessons_dynamic_table_shortcode');

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

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

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

TablePress — удобный плагин с поддержкой импорта/экспорта, фильтров и сортировок;
WPDataTables — мощный инструмент для работы с большими данными, поддерживает работу с базой и внешними источниками;
Posts Table Pro — позволяет выводить записи в виде таблицы с фильтрами, пагинацией и сортировкой;
Clearfy Pro — оптимизационный плагин, который также помогает улучшить производительность таблиц и списков на сайте.

Для интеграции с WPShop можно использовать Clearfy Pro для оптимизации вывода таблиц и повышения скорости загрузки страниц.

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

При создании динамических таблиц учитывайте следующие рекомендации:

Всегда экранируйте выводимые данные с помощью esc_html() или аналогичных функций для безопасности;
Минимизируйте количество запросов к базе, чтобы не замедлять сайт;
Используйте AJAX-запросы для подгрузки больших объемов данных без перезагрузки страницы;
Добавляйте пагинацию и фильтры для удобства пользователей;
Тестируйте таблицы на мобильных устройствах и разных браузерах.

Также можно расширить функционал, добавив экспорт таблицы в CSV, Excel или PDF с помощью JavaScript-библиотек, например, SheetJS или jsPDF.