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

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

Почему динамическая таблица лучше статической

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

Динамическая таблица позволяет:

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

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

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

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

function wpdevelop_generate_dynamic_table($atts) {
    // Атрибуты шорткода с дефолтными значениями
    $atts = shortcode_atts(array(
        'rows' => 5,
        'cols' => 3
    ), $atts, 'wpdevelop_table');

    $rows = intval($atts['rows']);
    $cols = intval($atts['cols']);

    // Генерируем массив данных для примера
    $data = array();
    for ($i = 1; $i <= $rows; $i++) {
        $row = array();
        for ($j = 1; $j <= $cols; $j++) {
            $row[] = "Ячейка {$i}-{$j}";
        }
        $data[] = $row;
    }

    // Формируем HTML таблицу
    $html = '<table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; width: 100%;">';
    // Заголовок таблицы
    $html .= '<thead><tr>';
    for ($h = 1; $h <= $cols; $h++) {
        $html .= "<th>Заголовок {$h}</th>";
    }
    $html .= '</tr></thead>';

    // Тело таблицы
    $html .= '<tbody>';
    foreach ($data as $row) {
        $html .= '<tr>';
        foreach ($row as $cell) {
            $html .= "<td>{$cell}</td>";
        }
        $html .= '</tr>';
    }
    $html .= '</tbody></table>';

    return $html;
}
add_shortcode('wpdevelop_table', 'wpdevelop_generate_dynamic_table');

Вставив этот код в файл functions.php активной темы или в свой плагин, вы сможете использовать шорткод [wpdevelop_table rows="4" cols="3"] для вывода таблицы с 4 строками и 3 столбцами.

Настройка и расширение функционала таблицы

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

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

function wpdevelop_generate_table_from_db() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'my_custom_data';

    $results = $wpdb->get_results("SELECT col1, col2, col3 FROM {$table_name} LIMIT 10", ARRAY_A);

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

    $html = '<table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; width: 100%;">';
    $html .= '<thead><tr><th>Колонка 1</th><th>Колонка 2</th><th>Колонка 3</th></tr></thead>';
    $html .= '<tbody>';
    foreach ($results as $row) {
        $html .= '<tr>';
        $html .= '<td>' . esc_html($row['col1']) . '</td>';
        $html .= '<td>' . esc_html($row['col2']) . '</td>';
        $html .= '<td>' . esc_html($row['col3']) . '</td>';
        $html .= '</tr>';
    }
    $html .= '</tbody></table>';

    return $html;
}
add_shortcode('wpdevelop_table_db', 'wpdevelop_generate_table_from_db');

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

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

Если хочется более мощных возможностей без программирования, можно использовать плагины, например:

• ABC Pagination — поможет организовать разбивку таблицы на страницы и удобную навигацию;
• WPRemark — если таблица содержит отзывы или пользовательские данные с возможностью комментирования;
• Плагин TablePress — один из самых популярных для удобного управления таблицами в админке.

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

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

Чтобы повысить удобство работы с динамическими таблицами, можно добавить сортировку и фильтрацию на стороне клиента. Для этого подходят библиотеки вроде DataTables.

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

function wpdevelop_enqueue_datatables() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('datatables-js', 'https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js', array('jquery'), '1.13.4', true);
    wp_enqueue_style('datatables-css', 'https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css');
}
add_action('wp_enqueue_scripts', 'wpdevelop_enqueue_datatables');

function wpdevelop_add_datatables_script() {
    if (is_singular() && has_shortcode(get_post()->post_content, 'wpdevelop_table')) {
        ?>
        <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('table').DataTable();
        });
        </script>
        <?php
    }
}
add_action('wp_footer', 'wpdevelop_add_datatables_script');

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

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

Обязательно проверяйте безопасность вывода данных, особенно если таблица подгружает контент из пользовательских источников или базы данных, используйте функции esc_html(), esc_attr().

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

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

Итоговые рекомендации

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

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