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

Автор: Дарья Новикова | Опубликовано: 25.02.2026

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

Почему стоит создавать таблицы без плагинов

Плагины для таблиц, такие как TablePress или wpDataTables, предоставляют удобные интерфейсы, но имеют свои недостатки:

Перегрузка сайта: Многие плагины добавляют лишний JavaScript и CSS, что замедляет загрузку страниц.
Ограниченная кастомизация: Для тонкой настройки внешнего вида и поведения таблиц иногда требуется писать дополнительный CSS или даже JS.
Зависимость от стороннего кода: Обновления и совместимость плагина могут вызвать проблемы.

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

Основы создания HTML-таблицы с динамическими данными

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

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

function wpbest_dynamic_table_shortcode() {
    $data = [
        ['Название', 'Цена', 'Наличие'],
        ['Товар 1', '1000 ₽', 'В наличии'],
        ['Товар 2', '1500 ₽', 'Под заказ'],
        ['Товар 3', '500 ₽', 'Нет в наличии'],
    ];
    $html = '<table border="1" cellpadding="5" cellspacing="0">';
    foreach ($data as $index => $row) {
        $tag = $index === 0 ? 'th' : 'td';
        $html .= '<tr>';
        foreach ($row as $cell) {
            $html .= "<{$tag}>" . esc_html($cell) . "</{$tag}>";
        }
        $html .= '</tr>';
    }
    $html .= '</table>';
    return $html;
}
add_shortcode('wpbest_table', 'wpbest_dynamic_table_shortcode');

Теперь в редакторе можно вставить [wpbest_table], и вы увидите таблицу с тремя товарами.

Подключение данных из базы данных WordPress

Часто данные для таблиц хранятся в пользовательских типах записей или в отдельных таблицах базы данных. Рассмотрим, как динамически выводить записи из кастомного типа post 'product'.

function wpbest_table_from_cpt_shortcode() {
    $args = [
        'post_type' => 'product',
        'posts_per_page' => -1,
        'post_status' => 'publish',
    ];
    $query = new WP_Query($args);
    if (!$query->have_posts()) {
        return '<p>Товары не найдены.</p>';
    }
    $html = '<table border="1" cellpadding="5" cellspacing="0">';
    $html .= '<tr><th>Название</th><th>Цена</th><th>Наличие</th></tr>';
    while ($query->have_posts()) {
        $query->the_post();
        $price = get_post_meta(get_the_ID(), 'price', true);
        $stock = get_post_meta(get_the_ID(), 'stock_status', true);
        $html .= '<tr>';
        $html .= '<td>' . esc_html(get_the_title()) . '</td>';
        $html .= '<td>' . esc_html($price) . '</td>';
        $html .= '<td>' . esc_html($stock) . '</td>';
        $html .= '</tr>';
    }
    wp_reset_postdata();
    $html .= '</table>';
    return $html;
}
add_shortcode('wpbest_product_table', 'wpbest_table_from_cpt_shortcode');

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

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

Чтобы таблица была удобной, полезно добавить возможность сортировки по столбцам без перезагрузки страницы. Сделать это можно с помощью JavaScript.

Вставим в футер темы скрипт для сортировки:

function wpbest_enqueue_sort_script() {
    wp_enqueue_script('wpbest-table-sort', 'https://cdn.jsdelivr.net/gh/fiduswriter/Simple-DataTables@latest/dist/simple-datatables.js', [], null, true);
    wp_enqueue_style('wpbest-table-sort-style', 'https://cdn.jsdelivr.net/gh/fiduswriter/Simple-DataTables@latest/dist/style.css');
    wp_add_inline_script('wpbest-table-sort', 'document.addEventListener("DOMContentLoaded", function() {
        var tables = document.querySelectorAll("table");
        tables.forEach(function(table) {
            new simpleDatatables.DataTable(table);
        });
    });');
}
add_action('wp_enqueue_scripts', 'wpbest_enqueue_sort_script');

Этот код подключит библиотеку Simple-DataTables и применит сортировку ко всем таблицам на сайте.

Вывод таблиц через Gutenberg блоки с динамическими данными

Для современных сайтов удобно создавать собственные блоки редактора Gutenberg для таблиц с динамическим содержимым. Но это уже более сложная задача, требующая знания JavaScript и React. Вкратце:

Регистрируем блок с помощью registerBlockType.
В редакторе выводим форму для выбора параметров таблицы.
На фронтенде рендерим таблицу с помощью PHP или JS.

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

Советы по стилям и адаптивности таблиц в WordPress

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

table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
}
@media (max-width: 600px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }
    tr {
        margin-bottom: 15px;
    }
    th {
        display: none;
    }
    td {
        position: relative;
        padding-left: 50%;
        text-align: left;
    }
    td::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 45%;
        padding-left: 15px;
        white-space: nowrap;
        font-weight: bold;
    }
    td:nth-of-type(1)::before { content: "Название"; }
    td:nth-of-type(2)::before { content: "Цена"; }
    td:nth-of-type(3)::before { content: "Наличие"; }
}

Этот CSS преобразует таблицу в удобный список на мобильных устройствах.

Использование Clearfy Pro для оптимизации таблиц и стилей

Если вы используете Clearfy Pro, он поможет отключить ненужные скрипты и стили, которые могут влиять на загрузку страниц с таблицами, а также оптимизировать CSS, что повысит производительность сайта.

Итог

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