Как создать динамические таблицы в WordPress с использованием шорткода и AJAX

Динамические таблицы в WordPress — отличный способ представить данные на сайте с возможностью фильтрации и пагинации без перезагрузки страницы. В этой статье я расскажу, как создать такую таблицу с нуля, используя шорткод и AJAX, что значительно улучшит пользовательский опыт и позволит легко управлять контентом.

Почему динамические таблицы важны для WordPress

Статичные таблицы неудобны, если данных много или нужно предоставить пользователю возможность быстро находить нужную информацию. Стандартный HTML-таблицы не поддерживают интерактивность и требуют перезагрузки страницы при фильтрации или сортировке. Использование AJAX позволяет обновлять таблицу без перезагрузки, что делает интерфейс более отзывчивым и современным.

В WordPress для создания динамических таблиц идеально подходит комбинация шорткодов для вывода и AJAX для обработки запросов на сервере.

Создание шорткода для вывода таблицы

Для начала создадим шорткод, который выведет пустую таблицу и подключит необходимые JavaScript и CSS файлы. В файле functions.php вашей темы или в кастомном плагине добавьте следующий код:

function wpquery_dynamic_table_shortcode() {
    ob_start();
    ?>
    <div id="wpquery-dynamic-table">
        <input type="text" id="wpquery-search" placeholder="Поиск..." />
        <table>
            <thead>
                <tr>
                    <th>Название</th>
                    <th>Категория</th>
                    <th>Дата</th>
                </tr>
            </thead>
            <tbody id="wpquery-table-body">
                <!-- Данные загрузятся здесь -->
            </tbody>
        </table>
        <div id="wpquery-pagination"></div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            function loadTable(page = 1, search = '') {
                const data = new URLSearchParams();
                data.append('action', 'wpquery_load_table');
                data.append('page', page);
                data.append('search', search);
                fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
                    method: 'POST',
                    credentials: 'same-origin',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: data.toString()
                })
                .then(response => response.json())
                .then(result => {
                    const tbody = document.getElementById('wpquery-table-body');
                    tbody.innerHTML = result.html;
                    const pagination = document.getElementById('wpquery-pagination');
                    pagination.innerHTML = result.pagination;
                    // Добавляем обработчики на кнопки пагинации
                    pagination.querySelectorAll('a').forEach(link => {
                        link.addEventListener('click', function(e) {
                            e.preventDefault();
                            loadTable(this.dataset.page, document.getElementById('wpquery-search').value);
                        });
                    });
                });
            }
            document.getElementById('wpquery-search').addEventListener('input', function() {
                loadTable(1, this.value);
            });
            loadTable();
        });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('wpquery_dynamic_table', 'wpquery_dynamic_table_shortcode');

В этом коде мы создаём контейнер с поиском, таблицей и пагинацией. Скрипт делает AJAX запросы к серверу, чтобы получать данные в формате JSON.

Обработка AJAX запроса и формирование данных

Теперь добавим обработчик AJAX на сервере, который будет возвращать записи с учётом поиска и пагинации. В functions.php добавьте следующий код:

function wpquery_handle_dynamic_table_ajax() {
    $paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $search = isset($_POST['search']) ? sanitize_text_field($_POST['search']) : '';
    $posts_per_page = 5;

    $args = [
        'post_type' => 'post',
        'posts_per_page' => $posts_per_page,
        'paged' => $paged,
    ];

    if (!empty($search)) {
        $args['s'] = $search;
    }

    $query = new WP_Query($args);

    $html = '';
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $category = get_the_category();
            $cat_name = !empty($category) ? esc_html($category[0]->name) : '—';
            $html .= '<tr>';
            $html .= '<td>' . esc_html(get_the_title()) . '</td>';
            $html .= '<td>' . $cat_name . '</td>';
            $html .= '<td>' . get_the_date('d.m.Y') . '</td>';
            $html .= '</tr>';
        }
    } else {
        $html = '<tr><td colspan="3">Записи не найдены</td></tr>';
    }
    wp_reset_postdata();

    // Пагинация
    $total_pages = $query->max_num_pages;
    $pagination = '';
    if ($total_pages > 1) {
        for ($i = 1; $i <= $total_pages; $i++) {
            if ($i == $paged) {
                $pagination .= '<span>' . $i . '</span> ';
            } else {
                $pagination .= '<a href="#" data-page="' . $i . '">' . $i . '</a> ';
            }
        }
    }

    wp_send_json([
        'html' => $html,
        'pagination' => $pagination,
    ]);
}
add_action('wp_ajax_wpquery_load_table', 'wpquery_handle_dynamic_table_ajax');
add_action('wp_ajax_nopriv_wpquery_load_table', 'wpquery_handle_dynamic_table_ajax');

Этот код использует стандартный класс WP_Query для выборки постов с учётом поиска и пагинации. Возвращается HTML для строк таблицы и HTML для пагинации, которые затем вставляются на страницу через JavaScript.

Улучшение внешнего вида и UX таблицы

Чтобы таблица выглядела аккуратно, добавим немного CSS. В functions.php подключите стили:

function wpquery_enqueue_styles_scripts() {
    wp_enqueue_style('wpquery-dynamic-table-style', get_stylesheet_directory_uri() . '/css/wpquery-dynamic-table.css');
}
add_action('wp_enqueue_scripts', 'wpquery_enqueue_styles_scripts');

Создайте файл css/wpquery-dynamic-table.css в вашей теме со следующим содержимым:

#wpquery-dynamic-table {
    max-width: 700px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
}
#wpquery-dynamic-table table {
    width: 100%;
    border-collapse: collapse;
}
#wpquery-dynamic-table th, #wpquery-dynamic-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}
#wpquery-dynamic-table th {
    background-color: #f4f4f4;
}
#wpquery-search {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
}
#wpquery-pagination {
    margin-top: 10px;
    text-align: center;
}
#wpquery-pagination a {
    margin: 0 5px;
    text-decoration: none;
    color: #0073aa;
    cursor: pointer;
}
#wpquery-pagination span {
    margin: 0 5px;
    font-weight: bold;
}

Так мы сделаем таблицу более приятной и удобной для восприятия.

Дополнительные возможности: сортировка и кастомизация данных

По желанию, вы можете расширить функциональность таблицы, добавив сортировку по столбцам. Для этого потребуется добавить параметры сортировки в AJAX-запрос и обработать их в WP_Query с помощью аргументов orderby и order.

Например, для сортировки по дате добавьте в JavaScript обработчики кликов на заголовках таблицы и передавайте эти параметры на сервер. В PHP добавьте в $args:

if (isset($_POST['orderby']) && in_array($_POST['orderby'], ['title', 'date'])) {
    $args['orderby'] = sanitize_text_field($_POST['orderby']);
}
if (isset($_POST['order']) && in_array(strtoupper($_POST['order']), ['ASC', 'DESC'])) {
    $args['order'] = strtoupper($_POST['order']);
}

Это позволит гибко управлять отображением данных и создавать полноценные интерактивные таблицы.

Заключение

Создание динамических таблиц в WordPress с помощью шорткодов и AJAX — мощный инструмент для вывода данных с удобным интерфейсом. Такой подход подходит для каталогов, списков постов, отзывов и других элементов сайта. Используя приведённый пример, вы легко адаптируете код под свои задачи и улучшите взаимодействие пользователей с вашим контентом.

Если хотите упростить работу с подобными задачами и добавить ещё больше возможностей, обратите внимание на плагины Clearfy Pro и Expert Review, которые помогут оптимизировать работу с данными и добавить функционал отзывов и рейтингов с минимальными усилиями.