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

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

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

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

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

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

TablePress — простой и функциональный

TablePress — один из самых популярных плагинов для создания таблиц, поддерживает импорт/экспорт CSV, Excel и JSON. Но по умолчанию таблицы статичны. Для динамического наполнения можно использовать расширения или писать собственные функции на PHP.

WP Data Access

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

Posts Table Pro

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

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

Рассмотрим пример создания шорткода [hueman_dynamic_table], который выводит таблицу с последними 5 постами из категории «Новости» с заголовком, датой и ссылкой.

Регистрация шорткода

function hueman_dynamic_table_shortcode() {
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 5,
        'category_name' => 'novosti'
    );
    $query = new WP_Query($args);
    if (!$query->have_posts()) {
        return '<p>Новостей не найдено.</p>';
    }
    $output = '<table border="1" cellpadding="10" cellspacing="0">';
    $output .= '<thead><tr><th>Заголовок</th><th>Дата</th><th>Ссылка</th></tr></thead>';
    $output .= '<tbody>';
    while ($query->have_posts()) {
        $query->the_post();
        $output .= '<tr>';
        $output .= '<td>' . get_the_title() . '</td>';
        $output .= '<td>' . get_the_date('d.m.Y') . '</td>';
        $output .= '<td><a href="' . get_permalink() . '">Читать</a></td>';
        $output .= '</tr>';
    }
    wp_reset_postdata();
    $output .= '</tbody></table>';
    return $output;
}
add_shortcode('hueman_dynamic_table', 'hueman_dynamic_table_shortcode');

Этот код необходимо добавить в файл functions.php вашей темы или создать отдельный плагин. После этого можно вставлять шорткод [hueman_dynamic_table] в любые записи и страницы.

Объяснение кода

Мы формируем WP_Query с параметрами для выборки последних 5 постов из категории «Новости». Если посты есть, создаём HTML-таблицу с заголовками столбцов и строками с данными. В конце сбрасываем глобальную переменную запроса с помощью wp_reset_postdata().

Добавляем фильтры и сортировку через JavaScript

Для удобства пользователей можно добавить поиск и сортировку по столбцам таблицы. Один из простых способов — использовать библиотеку DataTables.

Подключите в footer.php или через wp_enqueue_script стили и скрипты DataTables:

function hueman_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', array('jquery'), null, true);
    wp_add_inline_script('datatables-js', "jQuery(document).ready(function($){ $('#hueman-table').DataTable(); });");
}
add_action('wp_enqueue_scripts', 'hueman_enqueue_datatables');

И измените в шорткоде вывод таблицы, добавив id:

$output = '<table id="hueman-table" border="1" cellpadding="10" cellspacing="0">';

Теперь таблица будет интерактивной: пользователи смогут фильтровать, сортировать и листать записи.

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

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

Пример: предположим, что у постов есть кастомное поле hueman_event_date с датой события. Добавим этот столбец:

while ($query->have_posts()) {
    $query->the_post();
    $event_date = get_post_meta(get_the_ID(), 'hueman_event_date', true);
    $output .= '<tr>';
    $output .= '<td>' . get_the_title() . '</td>';
    $output .= '<td>' . ($event_date ? date('d.m.Y', strtotime($event_date)) : '—') . '</td>';
    $output .= '<td><a href="' . get_permalink() . '">Подробнее</a></td>';
    $output .= '</tr>';
}

Не забудьте добавить соответствующий заголовок столбца в <thead>.

Оптимизация и безопасность

При работе с динамическими таблицами важно помнить про безопасность вывода. Всегда используйте функции экранирования, например esc_html() для текста и esc_url() для ссылок.

Пример безопасного вывода заголовка и ссылки:

$output .= '<td>' . esc_html(get_the_title()) . '</td>';
$output .= '<td><a href="' . esc_url(get_permalink()) . '">Читать</a></td>';

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

Заключение

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

Попробуйте использовать предложенный пример кода и адаптировать его под задачи вашего сайта на hueman.ru — это даст гибкость и контроль над контентом без привлечения сторонних плагинов.