В современных веб-сайтах удобство навигации и динамичность интерфейса играют ключевую роль. Часто возникает задача создать меню, которое обновляется автоматически без перезагрузки страницы. Это улучшает пользовательский опыт и позволяет быстро отображать актуальные разделы, категории или пользовательские ссылки.
Зачем использовать AJAX для динамического меню в WordPress
AJAX (Asynchronous JavaScript and XML) позволяет обмениваться данными с сервером асинхронно, без полной перезагрузки страницы. В контексте меню это значит, что изменения в структуре или содержимом меню можно подгружать на лету, например, при изменении категории, фильтров или пользовательских настроек.
Использование AJAX меню полезно, если нужно:
- Обновлять пункты меню в зависимости от роли пользователя
- Динамически показывать последние записи или популярные категории
- Создавать интерактивные меню с подменю, которые подгружаются по требованию
В WordPress есть стандартные средства для работы с AJAX, которые мы рассмотрим на примерах.
Создание AJAX-запроса для обновления меню: основной код
Для начала создадим плагин или добавим в functions.php темы следующий код, который зарегистрирует обработчик AJAX-запроса и выдаст динамическое меню.
add_action('wp_enqueue_scripts', 'yelly_enqueue_ajax_menu_scripts');
function yelly_enqueue_ajax_menu_scripts() {
wp_enqueue_script('yelly-ajax-menu', get_template_directory_uri() . '/js/ajax-menu.js', array('jquery'), null, true);
wp_localize_script('yelly-ajax-menu', 'yelly_ajax_obj', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('yelly_ajax_nonce')
));
}
add_action('wp_ajax_yelly_get_menu', 'yelly_get_menu_callback');
add_action('wp_ajax_nopriv_yelly_get_menu', 'yelly_get_menu_callback');
function yelly_get_menu_callback() {
check_ajax_referer('yelly_ajax_nonce', 'security');
// Здесь можно получать параметры, например $_POST['menu_type']
// Получаем меню по названию (замените 'primary' на свой локейшн меню)
$locations = get_nav_menu_locations();
if (!isset($locations['primary'])) {
wp_send_json_error('Меню не найдено');
}
$menu = wp_get_nav_menu_object($locations['primary']);
$menu_items = wp_get_nav_menu_items($menu->term_id);
// Формируем HTML меню
$menu_html = '<ul class="yelly-ajax-menu">';
foreach ($menu_items as $item) {
$menu_html .= '<li><a href="' . esc_url($item->url) . '">' . esc_html($item->title) . '</a></li>';
}
$menu_html .= '</ul>';
wp_send_json_success($menu_html);
}Этот код добавляет JavaScript, который мы напишем ниже, и создает обработчик AJAX-запроса, возвращающий HTML меню.
JavaScript для вызова AJAX и обновления меню
Создадим файл js/ajax-menu.js в папке темы или плагина с таким содержимым:
jQuery(document).ready(function($) {
function yelly_load_menu() {
$.ajax({
url: yelly_ajax_obj.ajax_url,
type: 'POST',
data: {
action: 'yelly_get_menu',
security: yelly_ajax_obj.nonce
},
success: function(response) {
if (response.success) {
$('#yelly-menu-container').html(response.data);
} else {
console.log('Ошибка загрузки меню:', response.data);
}
},
error: function(xhr, status, error) {
console.log('AJAX ошибка:', error);
}
});
}
// Загрузка меню при загрузке страницы
yelly_load_menu();
// Можно добавить события для обновления меню по действиям пользователя
// Например, при клике или изменении фильтра
});Этот скрипт отправляет запрос на сервер и обновляет содержимое контейнера с ID yelly-menu-container. В шаблоне темы нужно добавить этот контейнер туда, где должно отображаться меню.
Размещение контейнера меню в шаблоне WordPress
Откройте файл темы, например header.php, и вставьте туда:
<div id="yelly-menu-container">
<!-- Меню загрузится сюда AJAX -->
</div>Теперь при загрузке страницы меню будет подгружаться динамически, что позволяет легко менять логику формирования меню на сервере, не трогая фронтенд.
Расширение функционала: динамическое меню по ролям пользователя
Добавим фильтрацию пунктов меню в зависимости от роли пользователя. Например, показывать разные пункты админам и гостям.
function yelly_get_menu_callback() {
check_ajax_referer('yelly_ajax_nonce', 'security');
$user = wp_get_current_user();
$role = (array) $user->roles;
$locations = get_nav_menu_locations();
if (!isset($locations['primary'])) {
wp_send_json_error('Меню не найдено');
}
$menu = wp_get_nav_menu_object($locations['primary']);
$menu_items = wp_get_nav_menu_items($menu->term_id);
$menu_html = '<ul class="yelly-ajax-menu">';
foreach ($menu_items as $item) {
// Предположим, что в описание пункта меню записана роль, для которой он виден
$visible_for = trim($item->description);
if ($visible_for) {
$allowed_roles = explode(',', $visible_for);
$allowed_roles = array_map('trim', $allowed_roles);
if (!array_intersect($role, $allowed_roles)) {
continue; // пропускаем этот пункт
}
}
$menu_html .= '<li><a href="' . esc_url($item->url) . '">' . esc_html($item->title) . '</a></li>';
}
$menu_html .= '</ul>';
wp_send_json_success($menu_html);
}Таким образом, в админке WordPress в описании пункта меню вы можете указывать роли через запятую, например administrator,editor, чтобы ограничить видимость.
Использование плагина Yelly для создания интерактивных карт меню
Если вам нужно визуально представить меню или навигацию в виде интерактивной карты, можно применить плагин Yelly. Он позволяет легко создавать кастомные карты с динамическими элементами, которые можно связать с пунктами меню.
Плагин поддерживает AJAX-загрузку и может быть интегрирован с вашим динамическим меню для отображения дополнительных данных или навигационных подсказок, что значительно улучшит UX.
Резюме и рекомендации
Создание автоматического меню с AJAX в WordPress — это мощный способ сделать сайт более интерактивным и адаптивным под нужды пользователей. Такой подход дает гибкость и позволяет реализовать сложную логику отображения пунктов меню.
Рекомендации по внедрению:
- Используйте nonce для безопасности AJAX-запросов
- Оптимизируйте запросы к базе данных, кешируйте результаты при необходимости
- Добавляйте обработку ошибок и fallback для пользователей с отключенным JavaScript
- Интегрируйте с плагинами, например, Yelly, для расширения функционала