Работа с таблицами в WordPress часто вызывает сложности, особенно когда нужно отображать динамические данные, которые обновляются автоматически. В этой статье мы подробно разберём, как создать динамическую таблицу в WordPress с помощью шорткода, а также рассмотрим полезные плагины и примеры кода для решения этой задачи.
Почему динамическая таблица лучше статической
Статические таблицы обычно создаются вручную в редакторе или через HTML, что неудобно при частом обновлении данных. Динамические таблицы позволяют автоматически подгружать информацию из базы данных, CSV-файлов или внешних API, экономя время и минимизируя ошибки.
Например, если вы ведёте сайт с расписанием, ценами или списком продуктов, динамическая таблица будет обновляться сама, без необходимости каждый раз заходить в редактор и менять содержимое.
Кроме того, динамические таблицы легче стилизовать и интегрировать с другими элементами сайта через шорткоды.
Плагины для создания динамических таблиц в WordPress
1. TablePress
TablePress — один из самых популярных бесплатных плагинов для создания таблиц. Несмотря на то, что по умолчанию он создаёт статические таблицы, его можно расширить с помощью JavaScript и PHP для динамического обновления.
Особенности:
- Импорт/экспорт таблиц в формате CSV, Excel, JSON.
- Поддержка пагинации, сортировки и фильтрации.
- Возможность добавлять шорткод для отображения таблицы в любом месте сайта.
Чтобы сделать таблицу динамической, можно использовать API плагина для загрузки данных через AJAX.
2. WP Table Builder
WP Table Builder — визуальный конструктор таблиц с поддержкой drag-and-drop. Подходит для создания адаптивных таблиц с возможностью интеграции динамических данных через дополнительный код.
3. Ninja Tables
Ninja Tables предлагает расширенные возможности для работы с динамическими таблицами, включая интеграцию с внешними источниками данных и поддержку пользовательских фильтров.
Создание собственного шорткода для динамической таблицы
Если вы хотите контролировать процесс создания таблицы полностью, лучше написать свой шорткод. Ниже приведён пример реализации динамической таблицы с данными из базы данных WordPress.
Регистрация шорткода
Добавьте следующий код в файл functions.php вашей темы или в отдельный плагин:
function wpfinder_dynamic_table_shortcode($atts) {
global $wpdb;
$table_name = $wpdb->prefix . 'wpfinder_products'; // создайте таблицу в БД с нужными данными
// Получаем данные из таблицы
$results = $wpdb->get_results("SELECT id, name, price, stock FROM {$table_name} ORDER BY name ASC");
if(empty($results)) {
return '<p>Данные не найдены.</p>';
}
$output = '<table border="1" cellpadding="5" cellspacing="0" style="width:100%; border-collapse: collapse;">';
$output .= '<thead><tr><th>ID</th><th>Название</th><th>Цена</th><th>Наличие</th></tr></thead>';
$output .= '<tbody>';
foreach($results as $row) {
$stock_status = $row->stock > 0 ? 'В наличии' : 'Нет в наличии';
$output .= "<tr><td>{$row->id}</td><td>{$row->name}</td><td>{$row->price} ₽</td><td>{$stock_status}</td></tr>";
}
$output .= '</tbody></table>';
return $output;
}
add_shortcode('wpfinder_table', 'wpfinder_dynamic_table_shortcode');Этот шорткод выводит таблицу товаров из пользовательской таблицы базы данных. Чтобы всё работало, нужно предварительно создать таблицу wp_wpfinder_products с нужными колонками.
Создание таблицы в базе данных (пример)
Добавьте следующий код для создания таблицы при активации плагина или вручную через MySQL:
CREATE TABLE IF NOT EXISTS wp_wpfinder_products (
id INT(11) NOT NULL AUTO_INCREMENT,
name VARCHAR(255) NOT NULL,
price DECIMAL(10,2) NOT NULL,
stock INT(11) NOT NULL DEFAULT 0,
PRIMARY KEY(id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;Для добавления данных используйте стандартные SQL-запросы или админку phpMyAdmin.
Добавление AJAX-подгрузки для улучшения динамики
Чтобы не перегружать страницу и подгружать данные по мере необходимости, можно реализовать AJAX-запросы на стороне клиента и сервера.
JavaScript для AJAX-запроса
Добавьте скрипт в тему или плагин:
jQuery(document).ready(function($) {
function wpfinderLoadTable() {
$.ajax({
url: wpfinder_ajax_object.ajax_url,
method: 'POST',
data: {
action: 'wpfinder_load_table_data'
},
success: function(response) {
$('#wpfinder-table-container').html(response);
}
});
}
wpfinderLoadTable();
});Обработка AJAX-запроса в PHP
function wpfinder_load_table_data_callback() {
echo wpfinder_dynamic_table_shortcode([]);
wp_die();
}
add_action('wp_ajax_wpfinder_load_table_data', 'wpfinder_load_table_data_callback');
add_action('wp_ajax_nopriv_wpfinder_load_table_data', 'wpfinder_load_table_data_callback');Вставьте в нужном месте страницы контейнер для таблицы:
<div id="wpfinder-table-container"></div>Оптимизация и безопасность
При работе с базой данных важно использовать безопасные запросы и фильтровать данные. В нашем примере мы используем $wpdb->get_results с динамическим именем таблицы, но если добавляете пользовательский ввод — применяйте подготовленные выражения.
Также рекомендуется кэшировать результат запроса, чтобы не нагружать базу при каждом обновлении страницы.
Для кэширования можно использовать Transients API WordPress:
function wpfinder_dynamic_table_shortcode($atts) {
global $wpdb;
$cache_key = 'wpfinder_dynamic_table_cache';
$output = get_transient($cache_key);
if(false === $output) {
$table_name = $wpdb->prefix . 'wpfinder_products';
$results = $wpdb->get_results("SELECT id, name, price, stock FROM {$table_name} ORDER BY name ASC");
if(empty($results)) {
return '<p>Данные не найдены.</p>';
}
$output = '<table border="1" cellpadding="5" cellspacing="0" style="width:100%; border-collapse: collapse;">';
$output .= '<thead><tr><th>ID</th><th>Название</th><th>Цена</th><th>Наличие</th></tr></thead>';
$output .= '<tbody>';
foreach($results as $row) {
$stock_status = $row->stock > 0 ? 'В наличии' : 'Нет в наличии';
$output .= "<tr><td>{$row->id}</td><td>{$row->name}</td><td>{$row->price} ₽</td><td>{$stock_status}</td></tr>";
}
$output .= '</tbody></table>';
set_transient($cache_key, $output, HOUR_IN_SECONDS);
}
return $output;
}Выводы по созданию динамической таблицы
Создание динамической таблицы на WordPress — задача, решаемая разными способами: от использования мощных плагинов до написания собственного шорткода с обращением к базе данных. Важно продумать структуру данных, безопасность и производительность. Используйте AJAX для улучшения UX и кэширование для снижения нагрузки.
Такой подход позволит вам гибко управлять контентом, быстро обновлять информацию и улучшить взаимодействие пользователей с сайтом.