В WordPress часто возникает задача сделать навигацию между страницами или записями более плавной и быстрой, без полной перезагрузки страницы. Это можно сделать с помощью AJAX, загружая контент динамически. В этой статье мы подробно разберём, как реализовать внутреннюю AJAX-переходку — когда при клике на ссылку контент подгружается в текущую страницу без её перезагрузки.
Почему стоит использовать AJAX для внутренних переходов в WordPress
Традиционно переход по ссылке приводит к полной загрузке страницы, что замедляет взаимодействие пользователя с сайтом и увеличивает нагрузку на сервер. AJAX позволяет подгружать только необходимые данные, улучшая UX и снижая трафик.
Такой подход помогает создавать интерфейсы, похожие на SPA (Single Page Application), но без сложных JavaScript-фреймворков.
Кроме того, можно сохранить SEO-дружественность, если правильно настроить URL и обработку истории браузера.
Основные шаги для реализации AJAX-переходки в WordPress
Реализация включает несколько этапов:
- Создание JavaScript-кода для перехвата кликов по ссылкам и отправки AJAX-запроса.
- Обработка AJAX-запроса на стороне PHP и возврат HTML-контента.
- Обновление DOM с новым контентом и корректное управление историей браузера (pushState).
- Обработка кнопок "назад" и "вперёд" браузера.
Далее подробно рассмотрим каждый этап с примерами.
JS: перехват кликов и отправка AJAX-запроса
Создадим JavaScript, который будет слушать клики по внутренним ссылкам и отправлять запрос на сервер.
document.addEventListener('DOMContentLoaded', function() {
const contentContainer = document.getElementById('content'); // контейнер с контентом
function wpsetup_handleAjaxLink(event) {
const link = event.target.closest('a');
if (!link) return;
// Проверяем, что ссылка внутренняя
if (link.origin !== window.location.origin) return;
event.preventDefault();
const url = link.href;
fetch(wpsetup_ajax_object.ajax_url, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
body: new URLSearchParams({
action: 'wpsetup_load_content',
url: url,
security: wpsetup_ajax_object.nonce
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
contentContainer.innerHTML = data.data.content;
document.title = data.data.title;
window.history.pushState({url: url}, '', url);
} else {
console.error('Ошибка загрузки контента');
window.location.href = url; // fallback
}
})
.catch(() => {
window.location.href = url; // fallback при ошибке
});
}
document.body.addEventListener('click', wpsetup_handleAjaxLink);
// Обработка кнопок назад/вперёд
window.addEventListener('popstate', function(event) {
if (event.state && event.state.url) {
fetch(wpsetup_ajax_object.ajax_url, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
body: new URLSearchParams({
action: 'wpsetup_load_content',
url: event.state.url,
security: wpsetup_ajax_object.nonce
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
contentContainer.innerHTML = data.data.content;
document.title = data.data.title;
}
});
}
});
});PHP: обработка AJAX-запроса и возврат контента
В functions.php или в файле плагина добавим обработчик AJAX:
add_action('wp_ajax_wpsetup_load_content', 'wpsetup_load_content_callback');
add_action('wp_ajax_nopriv_wpsetup_load_content', 'wpsetup_load_content_callback');
function wpsetup_load_content_callback() {
check_ajax_referer('wpsetup_nonce', 'security');
if (empty($_POST['url'])) {
wp_send_json_error('URL не передан');
}
$url = esc_url_raw($_POST['url']);
// Парсим URL, чтобы получить путь
$parsed_url = wp_parse_url($url);
if (!isset($parsed_url['path'])) {
wp_send_json_error('Некорректный URL');
}
// Получаем пост по URL
$post_id = url_to_postid($url);
if (!$post_id) {
wp_send_json_error('Пост не найден');
}
$post = get_post($post_id);
if (!$post) {
wp_send_json_error('Пост не найден');
}
// Получаем контент и заголовок
$content = apply_filters('the_content', $post->post_content);
$title = get_the_title($post_id);
wp_send_json_success(['content' => $content, 'title' => $title]);
}Подключение скриптов и локализация AJAX-переменных
Чтобы JavaScript имел доступ к URL AJAX и nonce, зарегистрируем и подключим скрипт в functions.php:
function wpsetup_enqueue_scripts() {
wp_enqueue_script('wpsetup-ajax-navigation', get_template_directory_uri() . '/js/ajax-navigation.js', ['jquery'], '1.0', true);
wp_localize_script('wpsetup-ajax-navigation', 'wpsetup_ajax_object', [
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wpsetup_nonce'),
]);
}
add_action('wp_enqueue_scripts', 'wpsetup_enqueue_scripts');Особенности и рекомендации
1. Важно, чтобы контейнер с контентом имел уникальный идентификатор, например id="content".
2. Страницы должны выводить контент без лишних обёрток, иначе AJAX загрузит и хедер, и футер. Можно создавать отдельный шаблон для AJAX-запросов или использовать условие if (defined('DOING_AJAX') && DOING_AJAX).
3. Для SEO и индексации поисковиками ссылки остаются обычными — AJAX работает только при кликах пользователя.
4. Если используется кэширование на стороне сервера, убедитесь, что AJAX-запросы не кэшируются.
Пример использования плагина Clearfy для оптимизации AJAX
Плагин Clearfy может помочь отключить ненужный JavaScript и CSS для страниц, загружаемых через AJAX, что ускорит работу и уменьшит нагрузку.
Заключение
Реализация внутренней AJAX-переходки в WordPress требует продуманного подхода и базовых знаний JS и PHP. Приведённый пример даёт надёжный каркас для создания такой функциональности. Вы можете расширять его, добавляя динамическую подгрузку комментариев, изменение других частей страницы и интеграцию с плагинами.
Это отличный способ повысить интерактивность сайта без перехода на тяжёлые SPA-решения.