При разработке сложных и интерактивных сайтов на WordPress часто возникает необходимость создавать собственные категории или таксономии, а также использовать их для динамической подгрузки контента через AJAX. Это позволяет улучшить UX, ускорить загрузку страницы и сделать интерфейс более гибким.
Что такое собственные категории (кастомные таксономии) в WordPress
WordPress из коробки предоставляет две стандартные таксономии: категории и метки (tags). Однако для более сложных проектов часто требуется создавать собственные таксономии, которые будут иметь свою структуру и свойства. Например, если у вас сайт с рецептами, можно создать таксономию "Тип кухни" или "Сложность блюда".
Создание кастомной таксономии позволяет лучше структурировать контент и использовать ее в запросах, в том числе AJAX-запросах для подгрузки данных без перезагрузки страницы.
Для создания собственной таксономии в WordPress используется функция register_taxonomy(). Ниже пример регистрации таксономии "wpexperts_category" для типа записи "post":
function wpexperts_register_custom_taxonomy() {
$labels = array(
'name' => 'Категории WPExperts',
'singular_name' => 'Категория WPExperts',
'search_items' => 'Поиск категорий',
'all_items' => 'Все категории',
'edit_item' => 'Редактировать категорию',
'update_item' => 'Обновить категорию',
'add_new_item' => 'Добавить новую категорию',
'new_item_name' => 'Название новой категории',
'menu_name' => 'Категории WPExperts',
);
$args = array(
'hierarchical' => true, // древовидная структура, как у стандартных категорий
'labels' => $labels,
'show_ui' => true,
'show_admin_column' => true,
'query_var' => true,
'rewrite' => array('slug' => 'wpexperts-category'),
);
register_taxonomy('wpexperts_category', array('post'), $args);
}
add_action('init', 'wpexperts_register_custom_taxonomy');Эта функция добавит новую таксономию, которую можно использовать в админке и в запросах.
Использование кастомных категорий в AJAX-запросах
После создания собственной категории часто появляется задача — динамически подгружать записи по выбранной категории без перезагрузки страницы. Для этого используется AJAX в WordPress.
Под AJAX в WordPress понимается механизм обработки запросов на сервер через JavaScript с использованием специальных хуков wp_ajax_ и wp_ajax_nopriv_.
Рассмотрим создание простого фильтра по категории wpexperts_category с динамической загрузкой постов.
Шаг 1: Добавление JavaScript для отправки AJAX-запроса
В шаблон или в отдельный JS-файл добавьте следующий скрипт. Он будет ловить изменение выбора категории и отправлять запрос на сервер:
jQuery(document).ready(function($) {
$('#wpexperts-category-select').on('change', function() {
var category = $(this).val();
$.ajax({
url: wpexperts_ajax_object.ajax_url,
type: 'POST',
data: {
action: 'wpexperts_filter_posts',
category: category,
},
success: function(response) {
$('#wpexperts-posts-container').html(response);
},
error: function() {
$('#wpexperts-posts-container').html('<p>Ошибка загрузки данных</p>');
}
});
});
});Важно передать в JS объект с адресом AJAX, его можно добавить через wp_localize_script в файле functions.php.
Шаг 2: Регистрация скрипта и передача AJAX URL в functions.php
function wpexperts_enqueue_scripts() {
wp_enqueue_script('wpexperts-ajax-script', get_template_directory_uri() . '/js/wpexperts-ajax.js', array('jquery'), null, true);
wp_localize_script('wpexperts-ajax-script', 'wpexperts_ajax_object', array(
'ajax_url' => admin_url('admin-ajax.php'),
));
}
add_action('wp_enqueue_scripts', 'wpexperts_enqueue_scripts');Шаг 3: Обработка AJAX-запроса на сервере
Добавим обработчик, который будет принимать ID выбранной категории и возвращать HTML с постами из этой категории:
function wpexperts_filter_posts_ajax() {
$category = intval($_POST['category']);
$args = array(
'post_type' => 'post',
'tax_query' => array(
array(
'taxonomy' => 'wpexperts_category',
'field' => 'term_id',
'terms' => $category,
),
),
'posts_per_page' => 5,
);
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
echo '<h3><a href="' . get_permalink() . '">' . get_the_title() . '</a></h3>';
echo '<p>' . get_the_excerpt() . '</p>';
}
} else {
echo '<p>Постов не найдено.</p>';
}
wp_reset_postdata();
wp_die();
}
add_action('wp_ajax_wpexperts_filter_posts', 'wpexperts_filter_posts_ajax');
add_action('wp_ajax_nopriv_wpexperts_filter_posts', 'wpexperts_filter_posts_ajax');Реализация HTML-интерфейса для выбора категории и вывода постов
Чтобы пользователь мог выбрать категорию, добавим селект с категориями и контейнер для вывода постов. Например, в шаблоне или через шорткод:
function wpexperts_render_category_filter() {
$terms = get_terms(array(
'taxonomy' => 'wpexperts_category',
'hide_empty' => true,
));
if (empty($terms) || is_wp_error($terms)) {
return '<p>Категории не найдены.</p>';
}
$output = '<select id="wpexperts-category-select">';
$output .= '<option value="0">Выберите категорию</option>';
foreach ($terms as $term) {
$output .= '<option value="' . esc_attr($term->term_id) . '">' . esc_html($term->name) . '</option>';
}
$output .= '</select>';
$output .= '<div id="wpexperts-posts-container"></div>';
return $output;
}
add_shortcode('wpexperts_category_filter', 'wpexperts_render_category_filter');Теперь вы можете вставить шорткод [wpexperts_category_filter] в любую страницу, чтобы получить интерактивный фильтр.
Полезные плагины для работы с кастомными таксономиями и AJAX
Хотя пример выше реализован вручную, существуют плагины, которые упрощают работу с кастомными таксономиями и AJAX:
- FacetWP — мощный плагин для фильтрации и поиска с поддержкой AJAX и кастомных таксономий.
- Search & Filter Pro — позволяет создавать сложные фильтры с AJAX-подгрузкой.
- WP AJAX Filter — простой бесплатный плагин для AJAX-фильтров по таксономиям.
Тем не менее, собственная реализация дает полный контроль и минимизирует нагрузку на сайт.
Советы по оптимизации и безопасности AJAX-запросов с кастомными категориями
При работе с AJAX важно учитывать несколько моментов:
- Валидация данных: всегда проверяйте и фильтруйте входящие данные, например, используйте
intval()для ID категорий. - Кэширование: если категория и посты меняются нечасто, применяйте кэширование результатов, чтобы снизить нагрузку на базу.
- Безопасность: добавляйте nonce для защиты запросов, особенно если данные могут быть изменены.
Пример добавления nonce:
function wpexperts_enqueue_scripts() {
wp_enqueue_script('wpexperts-ajax-script', get_template_directory_uri() . '/js/wpexperts-ajax.js', array('jquery'), null, true);
wp_localize_script('wpexperts-ajax-script', 'wpexperts_ajax_object', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wpexperts_nonce')
));
}
function wpexperts_filter_posts_ajax() {
check_ajax_referer('wpexperts_nonce', 'nonce');
// остальной код обработки
}
Заключение по теме кастомных категорий и AJAX в WordPress
Создание собственных категорий (таксономий) и их использование для AJAX-запросов — это мощный инструмент, который позволяет создавать динамичные и удобные интерфейсы на WordPress. Такой подход расширяет возможности стандартного функционала и улучшает взаимодействие пользователей с сайтом.
В статье приведен полный цикл: от регистрации кастомной категории до реализации AJAX-фильтра с примерами кода и рекомендациями по безопасности и оптимизации. Используйте этот материал как основу для ваших проектов на wpexperts.ru.