19 сентября 2019 WordPress Ajax
По большей части публикации про применение Ajax в WordPress сложные для понимания, особенно если вы мало знакомы с этой технологией. В этой статье я покажу, как на самом деле просто использовать Ajax в публичной части сайта.
Ajax запросы в WordPress отправляются через стандартный обработчик /wp-admin/admin-ajax.php. Если вы до этого уже пользовались Ajax, то здесь все тоже самое, только обработчик один.
Обычно JavaScript посылает запрос с некими данными PHP-обработчику и получает результат. В WordPress в запросе дополнительно с другими переменными передаётся значение action, в котором указывается часть имени хука, который надо вызвать. И обработчик отдает результат его выполнения.
Форма обратного звонка на Ajax в WordPress
Рассмотрим простой пример отправки формы обратного звонка без перезагрузки страницы. Код я максимально упростил, чтобы вы поняли суть использования Ajax в WordPress. А для рабочего варианта вы можете использовать, например вот этот код, только немного преобразовав его для WordPress.
HTML-код
Тут обычная форма с именем и полем для телефона.
JS-код
Не забудьте подключить библиотеку jQuery перед скриптом.
$(document).ready(function () {
$("#callback-form").submit(function () {
var name = $(this).find("input[name='name']").val();
var phone = $(this).find("input[name='phone']").val();
$.ajax({
type:'POST',
data:{
action:'send_callback_form',
name:name,
phone:phone,
},
url: "/wp-admin/admin-ajax.php",
success: function(data) {
$(this).html(data);
}
});
return false;
});
});
Все как при обычном запросе, только в url указываем стандартный обработчик WordPress /wp-admin/admin-ajax.php и передаем ему в переменной action часть названия хука, к которому надо обратиться. Об этом подробнее чуть ниже.
Осталось только зарегистрировать саму функцию.
PHP-код
В файле functions.php создаем функцию send_callback_form, которая будет отправлять полученные данные на почту.
send_callback_form {
$message = 'Имя: ' . $_POST['name'] . ' ';
$message .= 'Телефон: ' . $_POST['phone'] . ' ';
$mailTo = "mail@mail.ru"; // Ваш e-mail
$subject = "Письмо с сайта"; // Тема сообщения
$headers= "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=utf-8\r\n";
$headers .= "From: info@site.ru \r\n";
if(mail($mailTo, $subject, $message, $headers)) {
echo "Спасибо, ".$_POST['name'].", мы свяжемся с вами в самое ближайшее время!";
} else {
echo "Сообщение не отправлено!";
}
}
И создаем хук для вызова этой функции. Хуки для Ajax содержат action и могут быть двух видов в зависимости от первой части названия: для авторизованных пользователей wp_ajax_имя и не авторизованных wp_ajax_nopriv_имя. Вторая часть названия хука это тот же action из Аjax запроса, который мы придумали ранее. А второй параметр хука это само название функции, которую он будет вызывать. В нашем случае функция должна быть доступна для всех пользователей, поэтому добавляем и тот и тот вариант.
add_action('wp_ajax_nopriv_send_callback_form', 'send_callback_form');
add_action('wp_ajax_send_callback_form', 'send_callback_form');