Динамические таблицы — один из удобных способов представить структурированные данные на сайте WordPress. В отличие от статических таблиц, динамическая таблица позволяет изменять содержимое на лету, фильтровать, сортировать или загружать данные из базы. В этой статье мы подробно рассмотрим, как создать собственный шорткод для динамической таблицы с использованием PHP и JavaScript, без привлечения громоздких плагинов, но сохраняя гибкость и удобство.
Почему стоит создавать свою динамическую таблицу в WordPress
Многие пользователи выбирают плагины вроде TablePress или wpDataTables для создания таблиц. Но иногда нужен более легкий, кастомный вариант, который можно адаптировать под свои задачи. При собственном решении вы получаете:
- Полный контроль над выводом и функционалом;
- Оптимизацию именно под ваши данные и дизайн;
- Минимум лишних скриптов и CSS, что ускоряет загрузку;
- Возможность интегрировать дополнительные функции, например, AJAX-загрузка или фильтрация.
Следующий пример поможет понять, как реализовать подобный функционал самостоятельно.
Создаем шорткод для динамической таблицы в WordPress
Шаг 1. Регистрация шорткода и вывод базовой таблицы
Начнем с создания простого шорткода, который выводит таблицу с фиксированными данными. Добавьте следующий код в functions.php вашей темы или в отдельный плагин:
function wptips_dynamic_table_shortcode() {
$data = [
['ID' => 1, 'Имя' => 'Иван', 'Возраст' => 28],
['ID' => 2, 'Имя' => 'Мария', 'Возраст' => 34],
['ID' => 3, 'Имя' => 'Пётр', 'Возраст' => 22],
];
$output = '<table border="1" cellpadding="5" cellspacing="0">';
$output .= '<thead><tr>';
foreach (array_keys($data[0]) as $header) {
$output .= '<th>' . esc_html($header) . '</th>';
}
$output .= '</tr></thead><tbody>';
foreach ($data as $row) {
$output .= '<tr>';
foreach ($row as $cell) {
$output .= '<td>' . esc_html($cell) . '</td>';
}
$output .= '</tr>';
}
$output .= '</tbody></table>';
return $output;
}
add_shortcode('wptips_table', 'wptips_dynamic_table_shortcode');Этот код создаст шорткод [wptips_table], который выведет простую таблицу на странице или в записи. Данные сейчас статичны, но мы скоро сделаем их динамическими.
Шаг 2. Подключаем сортировку и фильтрацию с помощью JavaScript
Чтобы таблица стала интерактивной, добавим скрипт на базе библиотеки DataTables. Это легкий и мощный инструмент для работы с таблицами. Для подключения добавьте в functions.php следующий код:
function wptips_enqueue_datatables() {
if (is_singular() && has_shortcode(get_post()->post_content, 'wptips_table')) {
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($){ $("table").DataTable(); });');
}
}
add_action('wp_enqueue_scripts', 'wptips_enqueue_datatables');Этот код подключит стили и скрипты DataTables только на тех страницах, где используется шорткод [wptips_table]. После этого таблица автоматически получит функционал сортировки, поиска и пагинации.
Как сделать данные таблицы динамическими из базы WordPress
Использование пользовательской таблицы или постов для данных
Часто нужно выводить данные из базы, например, из пользовательских типов записей (Custom Post Types) или своих таблиц. Допустим, у нас есть CPT «Сотрудники» с метаполями «Возраст» и «Должность».
Извлечем данные с помощью WP_Query и выведем их в таблицу:
function wptips_dynamic_table_shortcode() {
$args = [
'post_type' => 'sotrudniki',
'posts_per_page' => -1
];
$query = new WP_Query($args);
if (!$query->have_posts()) {
return '<p>Данные не найдены.</p>';
}
$output = '<table border="1" cellpadding="5" cellspacing="0">';
$output .= '<thead><tr><th>Имя</th><th>Возраст</th><th>Должность</th></tr></thead><tbody>';
while ($query->have_posts()) {
$query->the_post();
$vozrast = get_post_meta(get_the_ID(), 'vozrast', true);
$doljnost = get_post_meta(get_the_ID(), 'doljnost', true);
$output .= '<tr><td>' . esc_html(get_the_title()) . '</td>';
$output .= '<td>' . esc_html($vozrast) . '</td>';
$output .= '<td>' . esc_html($doljnost) . '</td></tr>';
}
wp_reset_postdata();
$output .= '</tbody></table>';
return $output;
}
add_shortcode('wptips_table', 'wptips_dynamic_table_shortcode');Таким образом вы можете быстро выводить актуальные данные из админки WordPress без дополнительных плагинов.
Как добавить AJAX-подгрузку данных в таблицу
Если данных много, полезно грузить их частями через AJAX, чтобы не нагружать страницу. Ниже пример реализации AJAX-подгрузки для нашей таблицы.
Шаг 1. Создаем AJAX-хендлер в functions.php
function wptips_ajax_get_table_data() {
check_ajax_referer('wptips_nonce', 'nonce');
$args = [
'post_type' => 'sotrudniki',
'posts_per_page' => 10,
'paged' => isset($_POST['page']) ? intval($_POST['page']) : 1,
];
$query = new WP_Query($args);
$data = [];
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$data[] = [
'name' => get_the_title(),
'age' => get_post_meta(get_the_ID(), 'vozrast', true),
'position' => get_post_meta(get_the_ID(), 'doljnost', true),
];
}
}
wp_reset_postdata();
wp_send_json_success($data);
}
add_action('wp_ajax_wptips_get_table_data', 'wptips_ajax_get_table_data');
add_action('wp_ajax_nopriv_wptips_get_table_data', 'wptips_ajax_get_table_data');Шаг 2. Подключаем JS для запроса данных и вывода таблицы
Создайте файл wptips-table.js в папке вашей темы или плагина и добавьте:
jQuery(document).ready(function($) {
function loadTableData(page = 1) {
$.ajax({
url: wptips_ajax_object.ajax_url,
method: 'POST',
data: {
action: 'wptips_get_table_data',
nonce: wptips_ajax_object.nonce,
page: page
},
success: function(response) {
if (response.success) {
let rows = '';
response.data.forEach(function(item) {
rows += `<tr><td>${item.name}</td><td>${item.age}</td><td>${item.position}</td></tr>`;
});
$('#wptips-table tbody').html(rows);
}
}
});
}
loadTableData();
});И зарегистрируйте скрипт и локализуйте параметры в functions.php:
function wptips_enqueue_ajax_scripts() {
wp_enqueue_script('wptips-table-js', get_template_directory_uri() . '/wptips-table.js', ['jquery'], null, true);
wp_localize_script('wptips-table-js', 'wptips_ajax_object', [
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wptips_nonce')
]);
}
add_action('wp_enqueue_scripts', 'wptips_enqueue_ajax_scripts');Шаг 3. Выводим HTML таблицы в шорткоде
function wptips_dynamic_table_shortcode() {
return '<table id="wptips-table" border="1" cellpadding="5" cellspacing="0"><thead><tr><th>Имя</th><th>Возраст</th><th>Должность</th></tr></thead><tbody></tbody></table>';
}
add_shortcode('wptips_table', 'wptips_dynamic_table_shortcode');Теперь таблица будет загружать и обновлять данные асинхронно, что улучшит производительность на больших объемах данных.
Заключение по созданию динамической таблицы в WordPress
Создание кастомной динамической таблицы с помощью шорткода — отличный способ показать данные профессионально и удобно. Вы получаете гибкость и контроль, избегая лишних плагинов. Важно продумывать структуру данных, безопасность (например, использовать check_ajax_referer) и оптимизацию загрузки. Используйте приведенные примеры как шаблон и расширяйте функционал под ваши задачи.