В WordPress виджеты традиционно располагаются в сайдбаре или других областях и управляются статично. Но что если нужно организовать иерархию виджетов, где одни виджеты будут динамически подгружаться по нажатию или в зависимости от выбора пользователя? Это особенно полезно для сложных интерфейсов, где нужно экономить место или создавать многоуровневое меню виджетов.
Почему нужна иерархия виджетов с AJAX?
Стандартный подход к виджетам не поддерживает вложенность или динамическую подгрузку. Если у вас много виджетов, размещать их все сразу неудобно, что увеличивает время загрузки страницы и снижает удобство пользователя. AJAX помогает загружать дополнительные виджеты по требованию, без перезагрузки страницы, а иерархия позволяет логично структурировать блоки.
Например, можно создать боковую панель, где первый уровень — это категории виджетов, а при клике на категорию подгружаются дочерние виджеты.
Такой подход улучшает UX и повышает производительность сайта.
Создаем базовую иерархию виджетов
Для начала нужно зарегистрировать несколько областей для виджетов в functions.php вашей темы или плагина. Допустим, мы создаем три области: главная, и две дочерние.
function wphierarchy_register_widget_areas() {
register_sidebar([
'name' => 'Главная область виджетов',
'id' => 'main-widget-area',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
]);
register_sidebar([
'name' => 'Дочерняя область 1',
'id' => 'child-widget-area-1',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
]);
register_sidebar([
'name' => 'Дочерняя область 2',
'id' => 'child-widget-area-2',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
]);
}
add_action('widgets_init', 'wphierarchy_register_widget_areas');Теперь в админке можно добавить виджеты в эти области. Но мы хотим, чтобы дочерние области загружались динамически.
Добавляем AJAX для динамической подгрузки
Для реализации AJAX-загрузки создадим обработчик на стороне сервера и JavaScript для отправки запросов.
PHP: обработчик AJAX в WordPress
Добавьте в functions.php следующий код:
function wphierarchy_ajax_load_widgets() {
// Проверяем nonce для безопасности
check_ajax_referer('wphierarchy_nonce', 'nonce');
$area = isset($_POST['area']) ? sanitize_text_field($_POST['area']) : '';
if (!$area || !is_active_sidebar($area)) {
wp_send_json_error('Неверная область виджетов');
}
ob_start();
dynamic_sidebar($area);
$widgets_html = ob_get_clean();
wp_send_json_success(['html' => $widgets_html]);
}
add_action('wp_ajax_wphierarchy_load_widgets', 'wphierarchy_ajax_load_widgets');
add_action('wp_ajax_nopriv_wphierarchy_load_widgets', 'wphierarchy_ajax_load_widgets');JavaScript: отправка AJAX-запроса
Добавьте JS в вашу тему или плагин, например, в отдельный файл и подключите его:
jQuery(document).ready(function($) {
$('.wphierarchy-load-btn').on('click', function() {
var area = $(this).data('area');
var container = $('#widget-container-' + area);
if (container.data('loaded')) {
container.toggle();
return;
}
$.ajax({
url: wphierarchy_ajax_object.ajax_url,
method: 'POST',
data: {
action: 'wphierarchy_load_widgets',
area: area,
nonce: wphierarchy_ajax_object.nonce
},
beforeSend: function() {
container.html('Загрузка...');
container.show();
},
success: function(response) {
if (response.success) {
container.html(response.data.html);
container.data('loaded', true);
} else {
container.html('Ошибка загрузки');
}
},
error: function() {
container.html('Ошибка при запросе');
}
});
});
});Подключение JavaScript и локализация
В functions.php добавьте:
function wphierarchy_enqueue_scripts() {
wp_enqueue_script('wphierarchy-ajax', get_template_directory_uri() . '/js/wphierarchy-ajax.js', ['jquery'], null, true);
wp_localize_script('wphierarchy-ajax', 'wphierarchy_ajax_object', [
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wphierarchy_nonce')
]);
}
add_action('wp_enqueue_scripts', 'wphierarchy_enqueue_scripts');Вывод кнопок и контейнеров для подгрузки
В шаблоне выведите кнопки и контейнеры для загрузки виджетов:
<button class="wphierarchy-load-btn" data-area="child-widget-area-1">Показать виджеты 1</button>
<div id="widget-container-child-widget-area-1" style="display:none;"></div>
<button class="wphierarchy-load-btn" data-area="child-widget-area-2">Показать виджеты 2</button>
<div id="widget-container-child-widget-area-2" style="display:none;"></div>Пользователь кликает по кнопке — через AJAX подгружаются виджеты из соответствующей области.
Оптимизация и безопасность
Важно всегда проверять nonce в AJAX-запросах, чтобы защититься от CSRF. Используйте check_ajax_referer, как показано выше.
Для улучшения UX можно добавить индикатор загрузки и обработку ошибок.
Также стоит кешировать результаты, если виджеты не меняются часто, чтобы снизить нагрузку на сервер.
Пример использования плагина Clearfy Pro для управления виджетами
Плагин Clearfy Pro позволяет тонко управлять видимостью виджетов по условиям, что хорошо сочетается с иерархией и AJAX-загрузкой. Например, можно отключить некоторые виджеты для определённых ролей пользователей или страниц, уменьшая количество подгружаемых блоков.
Расширение иерархии: вложенные уровни и фильтрация виджетов
Если нужно сделать более сложную иерархию с несколькими уровнями вложенности, можно расширить AJAX-обработчик и JS, передавая параметры выбора пользователя (например, ID родительского виджета).
Также можно добавить фильтрацию виджетов по категориям или меткам, чтобы пользователю было проще найти нужный блок.
Для этого создайте дополнительное таксономическое поле для виджетов (если используете кастомные виджеты) и в AJAX-запросах фильтруйте вывод на сервере.
Итоги
Создание иерархии виджетов с поддержкой AJAX позволяет увеличить гибкость интерфейса WordPress, улучшить UX и оптимизировать загрузку страниц. В статье приведены базовые примеры регистрации областей, реализации AJAX-запросов и вывода динамических виджетов.
Используйте полученный код как основу и развивайте под свои задачи, интегрируя с плагинами, такими как Clearfy Pro, для более тонкой настройки.