Динамические таблицы в WordPress — это отличный способ представить структурированные данные, которые могут меняться в зависимости от условий или параметров пользователя. В этом материале мы рассмотрим, как создать собственный шорткод для генерации таблиц, а также как расширить функциональность с помощью фильтров и параметров.
Что такое динамические таблицы и зачем они нужны в WordPress
Таблицы часто используются для отображения цен, расписаний, сравнений товаров и других данных. Статичные таблицы неудобны, если данные часто меняются или должны зависеть от параметров, которые вводит посетитель.
Динамические таблицы позволяют автоматически обновлять содержимое без ручного редактирования контента страницы. Это особенно полезно для сайтов на WordPress, где данные могут поступать из базы данных, внешних API или вычисляться на лету.
Создание таких таблиц через шорткод — универсальное решение, которое даст гибкость и простоту использования, даже если вы не хотите постоянно залезать в код.
Создание базового шорткода для таблицы в WordPress
Для начала создадим простой шорткод, который выводит таблицу с данными из массива. Добавьте следующий код в файл functions.php вашей темы или в собственный плагин:
function wplancer_generate_table_shortcode($atts) {
// Атрибуты шорткода с умолчаниями
$atts = shortcode_atts(array(
'columns' => 'Имя,Возраст,Город',
'data' => 'Иван,30,Москва;Мария,25,Санкт-Петербург;Пётр,28,Новосибирск'
), $atts, 'wplancer_table');
$columns = explode(',', $atts['columns']);
$rows = explode(';', $atts['data']);
$output = '<table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; width: 100%;">';
$output .= '<thead><tr>';
foreach ($columns as $column) {
$output .= '<th>' . esc_html(trim($column)) . '</th>';
}
$output .= '</tr></thead><tbody>';
foreach ($rows as $row) {
$cells = explode(',', $row);
$output .= '<tr>';
foreach ($cells as $cell) {
$output .= '<td>' . esc_html(trim($cell)) . '</td>';
}
$output .= '</tr>';
}
$output .= '</tbody></table>';
return $output;
}
add_shortcode('wplancer_table', 'wplancer_generate_table_shortcode');Теперь вы можете вставлять в редактор блоков или классический редактор шорткод с таблицей:
[wplancer_table columns="Продукт,Цена,Наличие" data="Кофе,150,В наличии;Чай,100,Нет в наличии;Молоко,80,В наличии"]Такой шорткод генерирует HTML-таблицу с указанными колонками и строками. Это простой, но мощный инструмент для вывода табличных данных.
Добавление поддержки параметров и фильтров для расширения функционала
Чтобы таблица стала более динамичной, добавим возможность фильтровать строки по определённому критерию, например, показывать только товары в наличии.
Расширим код функции:
function wplancer_generate_table_shortcode($atts) {
$atts = shortcode_atts(array(
'columns' => 'Продукт,Цена,Наличие',
'data' => 'Кофе,150,В наличии;Чай,100,Нет в наличии;Молоко,80,В наличии',
'filter' => '' // фильтр по значению в колонке Наличие
), $atts, 'wplancer_table');
$columns = explode(',', $atts['columns']);
$rows = explode(';', $atts['data']);
$output = '<table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; width: 100%;">';
$output .= '<thead><tr>';
foreach ($columns as $column) {
$output .= '<th>' . esc_html(trim($column)) . '</th>';
}
$output .= '</tr></thead><tbody>';
foreach ($rows as $row) {
$cells = explode(',', $row);
// Если фильтр установлен, проверяем совпадение с нужной колонкой
if ($atts['filter'] !== '') {
$statusIndex = array_search('Наличие', $columns);
if ($statusIndex === false || trim($cells[$statusIndex]) !== $atts['filter']) {
continue; // пропускаем строку
}
}
$output .= '<tr>';
foreach ($cells as $cell) {
$output .= '<td>' . esc_html(trim($cell)) . '</td>';
}
$output .= '</tr>';
}
$output .= '</tbody></table>';
return $output;
}Теперь вы можете применять фильтр в шорткоде, например, показывать только товары в наличии:
[wplancer_table filter="В наличии"]Интеграция с плагином Clearfy Pro для оптимизации таблиц и SEO
Для улучшения производительности и SEO отображения таблиц рекомендуем использовать плагин Clearfy Pro. Он позволяет оптимизировать HTML-код, отключать неиспользуемые скрипты и стили, а также улучшать микроразметку.
Настройка Clearfy Pro поможет сделать ваши таблицы более легкими для индексации поисковиками и быстрее загружаемыми, что позитивно скажется на позиции сайта.
Автоматизация генерации таблиц с использованием данных из пользовательских полей
Часто данные для таблиц хранятся в пользовательских полях (Custom Fields) или в мета-данных постов. Рассмотрим, как можно автоматически формировать таблицу с такими данными.
Например, у вас есть кастомный тип записи «Товары», где в мета-полях хранится цена и наличие. Создадим шорткод, который соберёт и выведет таблицу по всем товарам:
function wplancer_products_table_shortcode() {
$args = array(
'post_type' => 'product',
'posts_per_page' => -1
);
$query = new WP_Query($args);
if (! $query->have_posts()) {
return '<p>Товары не найдены.</p>';
}
$output = '<table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; width: 100%;">';
$output .= '<thead><tr><th>Название</th><th>Цена</th><th>Наличие</th></tr></thead><tbody>';
while ($query->have_posts()) {
$query->the_post();
$price = get_post_meta(get_the_ID(), 'price', true);
$availability = get_post_meta(get_the_ID(), 'availability', true);
$output .= '<tr>';
$output .= '<td>' . esc_html(get_the_title()) . '</td>';
$output .= '<td>' . esc_html($price) . '</td>';
$output .= '<td>' . esc_html($availability) . '</td>';
$output .= '</tr>';
}
wp_reset_postdata();
$output .= '</tbody></table>';
return $output;
}
add_shortcode('wplancer_products_table', 'wplancer_products_table_shortcode');Теперь достаточно добавить [wplancer_products_table] в нужную страницу или запись, и таблица с актуальными данными появится автоматически.
Рекомендации по стилям и адаптивности таблиц
Таблицы по умолчанию плохо смотрятся на мобильных устройствах, поэтому важно обеспечить их адаптивность. Один из простых способов — добавить CSS, который позволит прокручивать таблицу по горизонтали:
table {
width: 100%;
border-collapse: collapse;
}
table th, table td {
padding: 8px;
border: 1px solid #ddd;
text-align: left;
}
.table-wrapper {
overflow-x: auto;
}В HTML оберните таблицу в контейнер с классом table-wrapper:
<div class="table-wrapper">
<table>...</table>
</div>Такой подход позволит посетителям комфортно просматривать таблицы на любых устройствах.
Заключение по созданию динамических таблиц в WordPress
Создание динамических таблиц с помощью шорткодов — это мощный и гибкий инструмент, который можно адаптировать под множество задач. Использование параметров и фильтров делает таблицы интерактивными, а интеграция с мета-данными и кастомными типами записей позволяет автоматизировать процесс обновления данных.
Не забывайте про оптимизацию и адаптивность, чтобы ваши таблицы были удобными и для пользователей, и для поисковых систем. Для более продвинутых возможностей можно использовать плагины, например, Clearfy Pro, который поможет улучшить производительность и SEO.