Динамические таблицы в WordPress — это отличный способ представить данные, которые могут изменяться в зависимости от пользовательского ввода или других факторов, без необходимости обновлять страницу вручную. В этой статье мы подробно рассмотрим, как реализовать динамические таблицы с помощью встроенных средств WordPress и минимального количества кода, без использования сторонних плагинов.
Почему стоит создавать динамические таблицы без плагинов
Многие пользователи сразу обращаются к плагинам для создания таблиц, таких как TablePress или wpDataTables. Они удобны, но имеют свои минусы: избыточный функционал, нагрузка на сайт, возможные конфликты и обновления. Создание собственной динамической таблицы даёт полный контроль над функционалом и оптимизацией.
Кроме того, это повышает безопасность и снижает вероятность конфликтов с другими плагинами. Особенно полезно, если нужна таблица с уникальной логикой, например, с динамической фильтрацией, сортировкой или подгрузкой данных из базы.
Основные методы создания динамических таблиц в WordPress
Для реализации динамической таблицы без плагинов нам понадобятся:
- Собственный шорткод для вставки таблицы в контент;
- AJAX для обновления данных без перезагрузки страницы;
- PHP-функции для выборки и обработки данных;
- JavaScript для обработки событий и обновления DOM.
Рассмотрим создание простой таблицы с фильтром по категории записей, где данные подгружаются динамически.
Создание шорткода для отображения таблицы
Сначала добавим шорткод, который выведет HTML-контейнер и фильтр:
function wptem_dinamic_table_shortcode() {
ob_start();
?>
<div id="wptem-table-filter">
<select id="wptem-category-select">
<option value="all">Все категории</option>
<?php
$categories = get_categories();
foreach ($categories as $category) {
echo '<option value="' . esc_attr($category->slug) . '">' . esc_html($category->name) . '</option>';
}
?>
</select>
</div>
<table id="wptem-dynamic-table" border="1" cellpadding="5" cellspacing="0">
<thead>
<tr><th>Название</th><th>Дата</th><th>Категория</th></tr>
</thead>
<tbody>
<!-- Данные будут подгружаться сюда -->
</tbody>
</table>
<script>
document.addEventListener('DOMContentLoaded', function() {
const select = document.getElementById('wptem-category-select');
const tbody = document.querySelector('#wptem-dynamic-table tbody');
function wptemFetchPosts(category) {
const data = new FormData();
data.append('action', 'wptem_load_posts');
data.append('category', category);
fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
method: 'POST',
credentials: 'same-origin',
body: data
})
.then(response => response.json())
.then(data => {
tbody.innerHTML = '';
if (data.length) {
data.forEach(post => {
const tr = document.createElement('tr');
tr.innerHTML = `<td>${post.title}</td><td>${post.date}</td><td>${post.category}</td>`;
tbody.appendChild(tr);
});
} else {
tbody.innerHTML = '<tr><td colspan="3">Нет данных</td></tr>';
}
})
.catch(error => {
tbody.innerHTML = '<tr><td colspan="3">Ошибка загрузки данных</td></tr>';
console.error(error);
});
}
select.addEventListener('change', function() {
wptemFetchPosts(this.value);
});
// Загрузка при первой загрузке страницы
wptemFetchPosts('all');
});
</script>
<?php
return ob_get_clean();
}
add_shortcode('wptem_dynamic_table', 'wptem_dinamic_table_shortcode');Этот код создаёт селект с категориями и пустую таблицу. При изменении селекта срабатывает AJAX-запрос, который подгружает записи.
Обработка AJAX-запроса и выборка данных
Далее нужно зарегистрировать обработчик AJAX в functions.php или в собственном плагине:
function wptem_load_posts_ajax() {
$category = sanitize_text_field($_POST['category'] ?? 'all');
$args = [
'post_type' => 'post',
'posts_per_page' => 20,
];
if ($category !== 'all') {
$args['category_name'] = $category;
}
$query = new WP_Query($args);
$result = [];
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$cats = get_the_category();
$cat_name = !empty($cats) ? $cats[0]->name : '';
$result[] = [
'title' => get_the_title(),
'date' => get_the_date('Y-m-d'),
'category' => $cat_name,
];
}
wp_reset_postdata();
}
wp_send_json($result);
}
add_action('wp_ajax_wptem_load_posts', 'wptem_load_posts_ajax');
add_action('wp_ajax_nopriv_wptem_load_posts', 'wptem_load_posts_ajax');Эта функция получает параметр категории, выполняет WP_Query и возвращает JSON с данными для таблицы.
Дополнительные возможности динамической таблицы
Добавление сортировки по колонкам
Для улучшения таблицы можно реализовать сортировку без перезагрузки. Для этого в JavaScript нужно добавить обработчики на заголовки и отправлять параметры сортировки в AJAX-запрос:
- Добавьте в шапку таблицы кнопки или ссылки для сортировки.
- Передавайте параметры
orderbyиorderв AJAX. - В PHP-функции используйте аргументы WP_Query
orderbyиorder.
Пример JavaScript для сортировки:
document.querySelectorAll('#wptem-dynamic-table thead th').forEach(th => {
th.style.cursor = 'pointer';
th.addEventListener('click', () => {
const orderby = th.getAttribute('data-orderby');
let order = th.getAttribute('data-order') || 'asc';
order = order === 'asc' ? 'desc' : 'asc';
th.setAttribute('data-order', order);
wptemFetchPosts(select.value, orderby, order);
});
});И в PHP добавьте поддержку этих параметров:
$orderby = sanitize_text_field($_POST['orderby'] ?? 'date');
$order = sanitize_text_field($_POST['order'] ?? 'DESC');
$args['orderby'] = $orderby;
$args['order'] = $order;Форматирование и стилизация таблицы
Чтобы таблица выглядела аккуратно и была удобной, добавьте CSS-стили либо в тему, либо через wp_add_inline_style:
#wptem-dynamic-table {
width: 100%;
border-collapse: collapse;
}
#wptem-dynamic-table th, #wptem-dynamic-table td {
padding: 8px 12px;
border: 1px solid #ddd;
}
#wptem-dynamic-table th {
background-color: #f0f0f0;
user-select: none;
}Это сделает таблицу читаемой и приятной для пользователя.
Использование плагина Clearfy Pro для улучшения производительности AJAX-таблиц
Если на сайте много AJAX-запросов и динамического контента, полезно оптимизировать работу через Clearfy Pro. Он помогает снизить нагрузку, управлять кешированием и отключать ненужные скрипты на страницах с таблицами.
Итоги и рекомендации
Создание динамических таблиц в WordPress без плагинов — это задача, которую реально выполнить с помощью шорткодов, AJAX и WP_Query. Такой подход гибкий, лёгкий и не перегружает сайт. С помощью представленных примеров вы можете реализовать таблицы с фильтрами, сортировкой и подгрузкой данных.
Для расширения функционала можно добавить пагинацию, интеграцию с REST API, или использовать готовые решения из WPShop.