В этой статье мы подробно разберем, как создать динамические таблицы в WordPress с помощью шорткодов, PHP и JavaScript. Динамические таблицы — это отличный способ удобно отображать структурированные данные на страницах сайта, при этом позволяя пользователю фильтровать, сортировать и обновлять данные без перезагрузки страницы.
Зачем нужны динамические таблицы в WordPress
Таблицы используются для отображения данных в удобном виде. Но статичные таблицы неудобны, если данные часто обновляются или их много. Динамические таблицы позволяют:
- Фильтровать данные по столбцам;
- Сортировать строки по возрастанию и убыванию;
- Обновлять содержимое через AJAX без перезагрузки страницы;
- Интегрироваться с базой данных WordPress или внешними источниками.
Реализация таких таблиц с нуля может показаться сложной, но использование шорткодов и подключение библиотек JavaScript значительно упрощает задачу.
Создание шорткода для таблицы с динамическими данными
Начнем с написания простого шорткода [wpreboot_dynamic_table], который выводит HTML-таблицу с данными из массива. Позже мы добавим динамические функции.
function wpreboot_dynamic_table_shortcode() {
$data = [
['ID' => 1, 'Имя' => 'Иван', 'Возраст' => 28],
['ID' => 2, 'Имя' => 'Мария', 'Возраст' => 34],
['ID' => 3, 'Имя' => 'Петр', 'Возраст' => 22],
];
ob_start();
echo '<table id="wpreboot-table" border="1" cellpadding="5" cellspacing="0">';
echo '<thead><tr>';
foreach (array_keys($data[0]) as $header) {
echo '<th>' . esc_html($header) . '</th>';
}
echo '</tr></thead>';
echo '<tbody>';
foreach ($data as $row) {
echo '<tr>';
foreach ($row as $cell) {
echo '<td>' . esc_html($cell) . '</td>';
}
echo '</tr>';
}
echo '</tbody></table>';
return ob_get_clean();
}
add_shortcode('wpreboot_dynamic_table', 'wpreboot_dynamic_table_shortcode');Этот код нужно добавить в файл functions.php вашей темы или в кастомный плагин. После этого на странице можно вставить шорткод [wpreboot_dynamic_table], и таблица отобразится.
Добавление сортировки и фильтрации с помощью DataTables.js
Чтобы сделать таблицу интерактивной, подключим популярную библиотеку DataTables.js. Она добавляет сортировку, поиск и пагинацию.
Для подключения библиотеки и инициализации таблицы используем wp_enqueue_scripts и wp_footer:
function wpreboot_enqueue_datatables() {
wp_enqueue_style('datatables-css', 'https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css');
wp_enqueue_script('jquery');
wp_enqueue_script('datatables-js', 'https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js', ['jquery'], null, true);
wp_add_inline_script('datatables-js', "
jQuery(document).ready(function($) {
$('#wpreboot-table').DataTable({
language: {
url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/ru.json'
}
});
});
");
}
add_action('wp_enqueue_scripts', 'wpreboot_enqueue_datatables');Теперь таблица, созданная шорткодом, будет автоматически иметь поиск, сортировку и пагинацию. Это простое решение подойдет для небольших и средних объемов данных.
Вывод данных из пользовательского типа записей в таблицу
Часто требуется вывести в таблицу данные из базы WordPress, например, из кастомного типа записей. Рассмотрим пример с типом записей "product" с метаполями "price" и "stock".
function wpreboot_dynamic_table_products_shortcode() {
$args = [
'post_type' => 'product',
'posts_per_page' => 50,
'post_status' => 'publish',
];
$query = new WP_Query($args);
if (!$query->have_posts()) {
return '<p>Товары не найдены.</p>';
}
ob_start();
echo '<table id="wpreboot-table" class="display">';
echo '<thead><tr><th>Название</th><th>Цена</th><th>Наличие</th></tr></thead>';
echo '<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);
echo '<tr>';
echo '<td>' . esc_html(get_the_title()) . '</td>';
echo '<td>' . esc_html($price) . '</td>';
echo '<td>' . esc_html($stock) . '</td>';
echo '</tr>';
}
echo '</tbody></table>';
wp_reset_postdata();
return ob_get_clean();
}
add_shortcode('wpreboot_products_table', 'wpreboot_dynamic_table_products_shortcode');Используйте шорткод [wpreboot_products_table] для вывода актуальной таблицы товаров с сортировкой и поиском.
Подключение плагина ABC Pagination для улучшения навигации таблиц
Если данные очень большие и нужно более гибкое управление пагинацией, можно использовать плагин ABC Pagination. Он позволяет создавать кастомную пагинацию для любых списков и таблиц.
Интеграция с нашей таблицей потребует создания кастомных WP_Query с параметрами пагинации, которые ABC Pagination помогает формировать и отображать.
Практические советы по оптимизации динамических таблиц
При работе с большими объемами данных динамические таблицы могут замедлять сайт. Вот несколько рекомендаций:
- Используйте серверную обработку (server-side processing) в DataTables для загрузки данных частями.
- Кешируйте результаты запросов с помощью Transients API.
- Оптимизируйте запросы WP_Query — выбирайте только нужные поля.
- Минимизируйте количество подключаемых скриптов и стилей.
При необходимости можно написать свой ajax-обработчик для загрузки данных по частям. Ниже пример ajax-обработчика для таблицы:
add_action('wp_ajax_wpreboot_get_table_data', 'wpreboot_get_table_data_callback');
add_action('wp_ajax_nopriv_wpreboot_get_table_data', 'wpreboot_get_table_data_callback');
function wpreboot_get_table_data_callback() {
// Проверка nonce и прав доступа
if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'wpreboot_nonce')) {
wp_send_json_error('Неверный nonce');
wp_die();
}
// Пример получения данных из базы
global $wpdb;
$results = $wpdb->get_results("SELECT ID, post_title FROM {$wpdb->posts} WHERE post_type = 'product' AND post_status = 'publish'", ARRAY_A);
wp_send_json_success($results);
wp_die();
}В JS вы можете вызвать этот ajax и обновлять таблицу без перезагрузки.
Вывод
Динамические таблицы в WordPress — мощный инструмент, который можно реализовать самостоятельно с помощью шорткодов, PHP и JS, либо с помощью готовых плагинов. Используйте DataTables.js для быстрого старта, а при необходимости кастомизируйте под свои задачи с ajax и серверной обработкой.
Для удобства и расширенных возможностей рекомендуем попробовать плагин ABC Pagination, который отлично дополняет функционал динамических таблиц.
