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

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

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

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

Основные причины, по которым иногда лучше обойтись без плагинов:

Легковесность и производительность: сторонние плагины могут добавлять лишний код, замедлять сайт.
Контроль над кодом: вы сами управляете логикой, что упрощает оптимизацию и отладку.
Безопасность: меньше зависимостей — меньше потенциальных уязвимостей.
Гибкость кастомизации: проще адаптировать под свои нужды и интегрировать с темой.

Создание таблицы с динамическими данными из пользовательских метаполей (custom fields)

Рассмотрим пример, когда данные для таблицы берутся из метаполей постов определённого типа. Это часто встречается, если вы делаете каталог товаров, сотрудников или иной список.

Шаг 1. Получаем данные из базы

Для начала нужно получить посты и вывести их метаданные. Предположим, у нас есть кастомный тип записей wp_shablon_product с метаполями price, color и stock.

function wp_shablon_get_products_data() {
    $args = [
        'post_type' => 'wp_shablon_product',
        'posts_per_page' => -1,
        'post_status' => 'publish',
    ];
    $query = new WP_Query($args);
    $products = [];
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $products[] = [
                'title' => get_the_title(),
                'price' => get_post_meta(get_the_ID(), 'price', true),
                'color' => get_post_meta(get_the_ID(), 'color', true),
                'stock' => get_post_meta(get_the_ID(), 'stock', true),
            ];
        }
        wp_reset_postdata();
    }
    return $products;
}

Этот код собирает все товары и их параметры в массив.

Шаг 2. Выводим таблицу с сортировкой на JavaScript

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

function wp_shablon_render_products_table() {
    $products = wp_shablon_get_products_data();
    if (empty($products)) {
        return '<p>Товары не найдены.</p>';
    }
    $html = '<table id="wp-shablon-table" border="1" cellpadding="5" cellspacing="0">';
    $html .= '<thead><tr>';
    $html .= '<th data-type="string">Название</th>';
    $html .= '<th data-type="number">Цена</th>';
    $html .= '<th data-type="string">Цвет</th>';
    $html .= '<th data-type="number">Наличие</th>';
    $html .= '</tr></thead>';
    $html .= '<tbody>';
    foreach ($products as $product) {
        $html .= '<tr>';
        $html .= '<td>' . esc_html($product['title']) . '</td>';
        $html .= '<td>' . esc_html($product['price']) . '</td>';
        $html .= '<td>' . esc_html($product['color']) . '</td>';
        $html .= '<td>' . esc_html($product['stock']) . '</td>';
        $html .= '</tr>';
    }
    $html .= '</tbody></table>';

    $html .= '<script>
    document.addEventListener("DOMContentLoaded", function() {
        const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
        const comparer = (idx, type) => (a, b) => {
            let v1 = getCellValue(a, idx);
            let v2 = getCellValue(b, idx);
            if(type === 'number') {
                v1 = parseFloat(v1) || 0;
                v2 = parseFloat(v2) || 0;
            }
            return v1 < v2 ? -1 : v1 > v2 ? 1 : 0;
        };
        document.querySelectorAll('#wp-shablon-table th').forEach(th => th.addEventListener('click', (() => {
            const table = th.closest('table');
            const tbody = table.querySelector('tbody');
            Array.from(tbody.querySelectorAll('tr'))
                .sort(comparer(Array.from(th.parentNode.children).indexOf(th), th.getAttribute('data-type')))
                .forEach(tr => tbody.appendChild(tr));
        })));
    });
    </script>';

    return $html;
}

Вы можете вывести таблицу в любом месте с помощью шорткода:

function wp_shablon_register_table_shortcode() {
    add_shortcode('wp_shablon_products_table', 'wp_shablon_render_products_table');
}
add_action('init', 'wp_shablon_register_table_shortcode');

Теперь в редакторе используйте [wp_shablon_products_table] — и динамическая sortable таблица появится на странице.

Добавление фильтрации данных в таблице

Для удобства пользователей полезно добавить фильтры по цвету или наличию. Это можно реализовать через JavaScript.

Пример простого фильтра по цвету

Добавим выпадающий список с цветами, который при выборе будет показывать только соответствующие строки таблицы:

function wp_shablon_render_filterable_table() {
    $products = wp_shablon_get_products_data();
    if (empty($products)) {
        return '<p>Товары не найдены.</p>';
    }
    // Собираем уникальные цвета
    $colors = array_unique(array_map(function($p) { return $p['color']; }, $products));

    $html = '<label for="color-filter">Фильтр по цвету:</label>';
    $html .= '<select id="color-filter">';
    $html .= '<option value="">Все</option>';
    foreach ($colors as $color) {
        $html .= '<option value="' . esc_attr($color) . '">' . esc_html($color) . '</option>';
    }
    $html .= '</select>';

    $html .= wp_shablon_render_products_table();

    $html .= '<script>
    document.getElementById("color-filter").addEventListener("change", function() {
        const filter = this.value.toLowerCase();
        const rows = document.querySelectorAll('#wp-shablon-table tbody tr');
        rows.forEach(row => {
            const colorCell = row.children[2].innerText.toLowerCase();
            if(filter === "" || colorCell === filter) {
                row.style.display = "";
            } else {
                row.style.display = "none";
            }
        });
    });
    </script>';

    return $html;
}

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

Оптимизация и масштабирование

При большом количестве данных динамическая таблица на стороне клиента может тормозить. В таких случаях стоит рассмотреть:

Пагинацию на сервере: подгружать постранично данные с помощью AJAX.
Кеширование: сохранять итоговый HTML таблицы в transient или объектном кеше.
Использование WP_Query с параметрами: для фильтрации и сортировки на сервере.

Для AJAX-запросов можно реализовать обработчик в functions.php и подключать его через wp_localize_script(), чтобы не перегружать страницу.

Альтернативы и плагины

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

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