Skip to main content

Использование Ajax в WordPress

По большей части публикации про применение Ajax в WordPress сложные для понимания, особенно если вы мало знакомы с этой технологией. В этой статье я покажу, как на самом деле просто использовать Ajax в публичной части сайта.

Ajax запросы в WordPress отправляются через стандартный обработчик /wp-admin/admin-ajax.php. Если вы до этого уже пользовались Ajax, то здесь все тоже самое, только обработчик один.

Обычно JavaScript посылает запрос с некими данными PHP-обработчику и получает результат. В WordPress в запросе дополнительно с другими переменными передаётся значение action, в котором указывается часть имени хука, который надо вызвать. И обработчик отдает результат его выполнения.

Форма обратного звонка на Ajax в WordPress

Рассмотрим простой пример отправки формы обратного звонка без перезагрузки страницы. Код я максимально упростил, чтобы вы поняли суть использования Ajax в WordPress. А для рабочего варианта вы можете использовать, например вот этот код, только немного преобразовав его для WordPress.

HTML-код

Тут обычная форма с именем и полем для телефона.

<form id="callback-form" action="">
  <input type="text" name="name" required placeholder="Ваше имя">
  <input type="tel" name="phone" required placeholder="Ваш телефон">
  <input type="submit" name="submit" value="Отправить">
</form>

JS-код

Не забудьте подключить библиотеку jQuery перед скриптом.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
$(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 <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');

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

code