В этой статье разберёмся, как создавать динамические таблицы в WordPress с помощью шорткодов. Динамические таблицы полезны для вывода данных, которые могут изменяться в зависимости от параметров, например, списка товаров, расписания, статистики и прочего. Мы рассмотрим, как написать собственный шорткод для создания такой таблицы, а также обзор популярных плагинов, которые помогут упростить задачу.
Почему динамические таблицы важны в WordPress
Таблицы — удобный способ структурировать информацию на сайте. Но статичные таблицы быстро устаревают и требуют постоянного обновления вручную через редактор. Если данные часто меняются или зависят от внешних источников, лучше использовать динамические таблицы, которые генерируются автоматически.
Динамические таблицы помогут:
- Автоматически обновлять данные без ручного редактирования;
- Выводить данные из базы данных или API;
- Добавлять фильтры и сортировку для удобства пользователей;
- Интегрироваться с пользовательскими типами записей и кастомными полями.
Для реализации динамических таблиц в WordPress мы будем использовать шорткоды, так как они просты в использовании и легко вставляются в записи и страницы.
Создание собственного шорткода для динамической таблицы
Рассмотрим пример создания шорткода [wpbusiness_table], который будет выводить таблицу с данными из пользовательского массива. В реальных задачах данные можно брать из базы данных, настроек или API.
Шаг 1. Регистрация шорткода
Добавим следующий код в файл functions.php вашей темы или в собственный плагин:
function wpbusiness_generate_dynamic_table($atts) {
// Атрибуты шорткода с значениями по умолчанию
$atts = shortcode_atts(array(
'rows' => 5,
'columns' => 3
), $atts, 'wpbusiness_table');
$rows = intval($atts['rows']);
$columns = intval($atts['columns']);
// Генерируем заголовки столбцов
$table = '<table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; width: 100%;">';
$table .= '<thead><tr>';
for ($c = 1; $c <= $columns; $c++) {
$table .= '<th>Столбец ' . $c . '</th>';
}
$table .= '</tr></thead>';
// Генерируем тело таблицы
$table .= '<tbody>';
for ($r = 1; $r <= $rows; $r++) {
$table .= '<tr>';
for ($c = 1; $c <= $columns; $c++) {
$table .= '<td>Ячейка ' . $r . '.' . $c . '</td>';
}
$table .= '</tr>';
}
$table .= '</tbody></table>';
return $table;
}
add_shortcode('wpbusiness_table', 'wpbusiness_generate_dynamic_table');Теперь вы можете вставлять шорткод [wpbusiness_table rows="4" columns="3"] на любую страницу или запись, чтобы вывести таблицу с 4 строками и 3 столбцами.
Шаг 2. Расширение: вывод данных из пользовательских полей
Предположим, у вас есть кастомный тип записей product с пользовательскими полями price и stock. Мы хотим вывести таблицу со списком продуктов и их ценами. Код шорткода:
function wpbusiness_products_table($atts) {
$args = array(
'post_type' => 'product',
'posts_per_page' => -1
);
$query = new WP_Query($args);
if (!$query->have_posts()) {
return '<p>Продукты не найдены.</p>';
}
$table = '<table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; width: 100%;">';
$table .= '<thead><tr><th>Название</th><th>Цена</th><th>В наличии</th></tr></thead>';
$table .= '<tbody>';
while ($query->have_posts()) {
$query->the_post();
$price = get_post_meta(get_the_ID(), 'price', true);
$stock = get_post_meta(get_the_ID(), 'stock', true);
$table .= '<tr>';
$table .= '<td>' . get_the_title() . '</td>';
$table .= '<td>' . esc_html($price) . '</td>';
$table .= '<td>' . (intval($stock) > 0 ? 'Да' : 'Нет') . '</td>';
$table .= '</tr>';
}
wp_reset_postdata();
$table .= '</tbody></table>';
return $table;
}
add_shortcode('wpbusiness_products', 'wpbusiness_products_table');Используйте шорткод [wpbusiness_products] для вывода актуальной таблицы продуктов с ценами и наличием.
Обзор плагинов для динамических таблиц в WordPress
Если вы не хотите писать код, существует несколько популярных плагинов, которые позволяют создавать динамические таблицы с расширенными возможностями:
TablePress
Очень популярный плагин для создания таблиц с удобным визуальным редактором. Поддерживает импорт/экспорт CSV, сортировку, фильтрацию и пагинацию. Для динамических данных можно использовать PHP-фильтры и интеграции с другими плагинами.
wpDataTables
Премиум-плагин с мощным функционалом для создания интерактивных таблиц и графиков. Поддерживает работу с базами данных, Google Sheets, Excel, а также API. Позволяет создавать фильтры, сортировку и редактирование данных на фронтенде.
Posts Table Pro
Идеален для вывода таблиц с записями WordPress, кастомными типами записей и полями. Автоматически генерирует таблицу с фильтрами и поиском по вашим материалам.
Советы по оптимизации динамических таблиц
Динамические таблицы могут создавать нагрузку на сервер, особенно при большом объёме данных. Чтобы избежать тормозов и ошибок, следуйте рекомендациям:
- Используйте пагинацию или ленивую загрузку для больших таблиц;
- Кэшируйте результаты запросов к базе или API с помощью Transients API или плагинов кеширования;
- Минимизируйте количество запросов к базе внутри цикла вывода;
- Оптимизируйте стили таблиц, чтобы ускорить рендеринг;
- Проверяйте и фильтруйте пользовательский ввод для шорткодов, чтобы избежать ошибок и уязвимостей.
Как добавить стили к таблицам для улучшения визуала
По умолчанию HTML-таблицы выглядят просто и не всегда красиво на сайте. Добавим базовые стили, которые сделают таблицы аккуратнее и удобнее для чтения. Вставьте CSS в файл стилей темы или через кастомайзер:
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
font-family: Arial, sans-serif;
}
table th, table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
table th {
background-color: #f4f4f4;
}
table tr:nth-child(even) {
background-color: #fafafa;
}
table tr:hover {
background-color: #f1f1f1;
}
Эти стили сделают ваши таблицы более приятными для глаз и улучшат восприятие информации.