Динамические таблицы — удобный инструмент для отображения данных в WordPress с возможностью обновления содержимого без перезагрузки страницы. В этой статье мы разберём, как создать собственный шорткод для вывода таблицы и организовать её динамическое обновление через AJAX, что особенно полезно для каталогов, списков продуктов или статистики.
Почему динамические таблицы важны в WordPress
Статические таблицы, созданные через HTML или даже встроенные редакторы, ограничены: для обновления данных приходится редактировать контент и обновлять страницу. Динамические таблицы решают эту проблему, позволяя подгружать актуальные данные из базы или внешних источников по запросу пользователя.
Это повышает юзабилити и снижает нагрузку на сервер, так как обновляется только часть страницы.
Для реализации динамических таблиц в WordPress идеально подходят шорткоды в связке с AJAX-запросами, которые обрабатываются в PHP и возвращают данные в формате JSON или HTML.
Создание шорткода для вывода таблицы в WPBono
Начнём с создания шорткода [wpbono_dynamic_table], который будет выводить базовую HTML-таблицу и подключать необходимые скрипты для AJAX-запросов.
function wpbono_dynamic_table_shortcode() {
ob_start();
?>
<table id="wpbono-dynamic-table" border="1" cellpadding="5" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Название</th>
<th>Дата</th>
</tr>
</thead>
<tbody>
<tr><td colspan="3">Загрузка данных...</td></tr>
</tbody>
</table>
<button id="wpbono-refresh-btn">Обновить таблицу</button>
<script>
document.addEventListener('DOMContentLoaded', function() {
const btn = document.getElementById('wpbono-refresh-btn');
const tbody = document.querySelector('#wpbono-dynamic-table tbody');
function wpbonoFetchData() {
fetch(wpbono_ajax_object.ajax_url, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
body: 'action=wpbono_get_table_data'
})
.then(response => response.json())
.then(data => {
if(data.success) {
tbody.innerHTML = '';
data.data.forEach(row => {
const tr = document.createElement('tr');
tr.innerHTML = `<td>${row.id}</td><td>${row.title}</td><td>${row.date}</td>`;
tbody.appendChild(tr);
});
} else {
tbody.innerHTML = `<tr><td colspan='3'>Ошибка загрузки данных</td></tr>`;
}
})
.catch(() => {
tbody.innerHTML = `<tr><td colspan='3'>Ошибка соединения</td></tr>`;
});
}
btn.addEventListener('click', wpbonoFetchData);
wpbonoFetchData();
});
</script>
<?php
return ob_get_clean();
}
add_shortcode('wpbono_dynamic_table', 'wpbono_dynamic_table_shortcode');Этот код выводит таблицу с заголовками и кнопку для обновления данных. При загрузке страницы и нажатии кнопки запускается AJAX-запрос к серверу.
Обработка AJAX-запроса на сервере WordPress
Теперь нужно создать обработчик AJAX-запроса, который вернёт данные для таблицы. Мы используем wp_ajax_ и wp_ajax_nopriv_ для поддержки авторизованных и неавторизованных пользователей.
function wpbono_ajax_get_table_data() {
// Здесь можно получить данные из БД, например, последние 5 записей типа 'post'
$args = array(
'post_type' => 'post',
'posts_per_page' => 5,
'orderby' => 'date',
'order' => 'DESC',
);
$query = new WP_Query($args);
$result = array();
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$result[] = array(
'id' => get_the_ID(),
'title' => get_the_title(),
'date' => get_the_date('Y-m-d'),
);
}
wp_reset_postdata();
}
wp_send_json_success($result);
}
add_action('wp_ajax_wpbono_get_table_data', 'wpbono_ajax_get_table_data');
add_action('wp_ajax_nopriv_wpbono_get_table_data', 'wpbono_ajax_get_table_data');Этот обработчик выдаёт последние 5 публикаций с их ID, названием и датой в формате JSON. Обратите внимание на использование wp_send_json_success для правильного формирования ответа.
Подключение AJAX URL и локализация скриптов
Чтобы JavaScript мог отправлять запросы на AJAX-обработчик, нужно передать ему URL. В нашем примере мы используем глобальный объект wpbono_ajax_object, который нужно объявить в PHP через wp_localize_script. Если вы подключаете внешние скрипты, используйте этот приём.
В нашем случае скрипт встроен в шорткод, поэтому добавим локализацию в функцию, которая подключает скрипты на вашем сайте:
function wpbono_enqueue_scripts() {
wp_enqueue_script('wpbono-frontend-js', get_template_directory_uri() . '/js/frontend.js', array('jquery'), null, true);
wp_localize_script('wpbono-frontend-js', 'wpbono_ajax_object', array(
'ajax_url' => admin_url('admin-ajax.php'),
));
}
add_action('wp_enqueue_scripts', 'wpbono_enqueue_scripts');Если вы вставляете JS прямо в шорткод, как в примере выше, то передайте URL через admin_url('admin-ajax.php') в скрипт вручную или замените строку в fetch на fetch('', ...).
Дополнительные улучшения и плагины для динамических таблиц
Для более сложных задач, таких как пагинация, сортировка и фильтрация, можно использовать готовые плагины, например:
- ABC Pagination — для удобной навигации по большим таблицам.
- WPRemark — для добавления комментариев и заметок прямо в таблицу.
Также можно улучшить UX, добавив индикатор загрузки, обработку ошибок и поддержку различных форматов данных, например JSON или XML.
Пример расширения: индикатор загрузки и сообщение об ошибке
Добавим в таблицу строку с индикатором загрузки и обработаем ошибки более дружелюбно.
function wpbono_dynamic_table_shortcode() {
ob_start();
?>
<table id="wpbono-dynamic-table" border="1" cellpadding="5" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Название</th>
<th>Дата</th>
</tr>
</thead>
<tbody>
<tr class="wpbono-loading"><td colspan="3">Загрузка данных...</td></tr>
</tbody>
</table>
<button id="wpbono-refresh-btn">Обновить таблицу</button>
<div id="wpbono-error-message" style="color:red; margin-top:10px;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const btn = document.getElementById('wpbono-refresh-btn');
const tbody = document.querySelector('#wpbono-dynamic-table tbody');
const errorBlock = document.getElementById('wpbono-error-message');
function wpbonoSetLoading(isLoading) {
tbody.querySelectorAll('tr').forEach(tr => tr.remove());
if(isLoading) {
const tr = document.createElement('tr');
tr.classList.add('wpbono-loading');
tr.innerHTML = '<td colspan="3">Загрузка данных...</td>';
tbody.appendChild(tr);
}
}
function wpbonoFetchData() {
errorBlock.textContent = '';
wpbonoSetLoading(true);
fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
body: 'action=wpbono_get_table_data'
})
.then(response => response.json())
.then(data => {
wpbonoSetLoading(false);
if(data.success) {
if(data.data.length === 0) {
tbody.innerHTML = '<tr><td colspan="3">Данные отсутствуют</td></tr>';
return;
}
data.data.forEach(row => {
const tr = document.createElement('tr');
tr.innerHTML = `<td>${row.id}</td><td>${row.title}</td><td>${row.date}</td>`;
tbody.appendChild(tr);
});
} else {
errorBlock.textContent = 'Ошибка загрузки данных с сервера.';
tbody.innerHTML = '<tr><td colspan="3">Невозможно загрузить данные</td></tr>';
}
})
.catch(() => {
wpbonoSetLoading(false);
errorBlock.textContent = 'Ошибка соединения с сервером. Попробуйте позже.';
tbody.innerHTML = '<tr><td colspan="3">Ошибка соединения</td></tr>';
});
}
btn.addEventListener('click', wpbonoFetchData);
wpbonoFetchData();
});
</script>
<?php
return ob_get_clean();
}Итог
Создание динамических таблиц в WordPress с помощью шорткодов и AJAX — мощный способ улучшить взаимодействие пользователей с сайтом, сделать данные всегда актуальными и удобными для восприятия. Приведённый пример — базовый каркас, который вы можете расширять для своих задач.
Для более сложных решений советуем изучить плагины из каталога WPSHOP и интегрировать их с вашим функционалом.