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

Автор: Юлия Семенова | Опубликовано: 10.12.2025

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

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

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

Автоматически подтягивать данные из базы данных или массивов;
Обновлять содержимое без правок в редакторе;
Легко форматировать и сортировать данные;
Интегрироваться с другими функциональностями WordPress и плагинами.

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

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

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

Шаг 1. Регистрация шорткода в functions.php

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

    $output = '<table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; width: 100%;">';
    $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('wpmentor_dynamic_table', 'wpmentor_dynamic_table_shortcode');

Этот код создаёт шорткод, который выводит таблицу с тремя строками и тремя столбцами. Можно вставить шорткод [wpmentor_dynamic_table] в любом месте сайта, и таблица отобразится автоматически.

Расширение функционала: вывод данных из базы данных WordPress

Часто данные для таблиц хранятся в пользовательских таблицах базы данных или в метаданных. Рассмотрим пример вывода списка пользователей с их электронной почтой и ролью.

Шаг 2. Получаем пользователей и формируем таблицу

function wpmentor_users_table_shortcode() {
    $users = get_users();

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

    $output = '<table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; width: 100%;">';
    $output .= '<thead><tr><th>ID</th><th>Имя пользователя</th><th>Email</th><th>Роль</th></tr></thead>';
    $output .= '<tbody>';
    foreach ($users as $user) {
        $roles = implode(', ', $user->roles);
        $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 .= '<td>' . esc_html($roles) . '</td>';
        $output .= '</tr>';
    }
    $output .= '</tbody></table>';

    return $output;
}
add_shortcode('wpmentor_users_table', 'wpmentor_users_table_shortcode');

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

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

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

Подключение DataTables и интеграция с шорткодом

Добавим загрузку скриптов и стилей DataTables в функции темы или плагина:

function wpmentor_enqueue_datatables() {
    wp_enqueue_style('datatables-css', 'https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css');
    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($) { $("#wpmentor-table").DataTable(); });');
}
add_action('wp_enqueue_scripts', 'wpmentor_enqueue_datatables');

Теперь заменим в шорткоде id таблицы на wpmentor-table:

$output = '<table id="wpmentor-table" border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; width: 100%;">';

После этого таблица приобретёт интерактивные возможности сортировки, поиска и пагинации без дополнительного кода.

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

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

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

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

Подводим итоги

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

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