WordPress Ajax

WordPress Ajax

19 сентября 2019 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');
Остались вопросы по статье? Задайте их прямо сейчас!
Похожие записи
WordPress подгрузка постов кнопкой показать еще или бесконечным скроллом

Кнопка "Показать ещё" и бесконечный скроллинг - это по сути постраничная навигация, которая подгружает следующую страницу с постами без перезагрузки страницы. Подобные примеры часто можно встретить в лентах соц. сетей. В этом примере показана реализация кнопки "Показать ещё" и бесконечного Читать далее

Календарь на PHP и Ajax

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

Отправка формы без перезагрузки страницы на PHP и Ajax

Постоянно приходится пользоваться этой заготовкой. Вы можете модернизировать ее под любые нужды, будь то форма обратной связи, форма обратного звонка или заказ какой-либо услуги или товара. Поэтому я не буду украшать ее стилями, применять классы Bootstrap и различные скрипты, как Читать далее

Как создать виджет WordPress

Виджеты используются для добавления контента на страницу WordPress без изменения шаблонов тем. Боковая панель является областью по умолчанию для добавления содержимого виджетов. Также вы можете зарегистрировать собственную область виджетов и добавить в нее виджеты. WordPress содержит некоторые виджеты по умолчанию Читать далее

Оптимизация WordPress

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

Отправка сообщений в Telegram из Contact Form 7

Мы уже рассматривали как отправлять сообщения в телеграмм из обычного PHP скрипта и заказы из OpenCart. В этой статье вы узнаете как отправлять сообщения в телеграмм из плагина WordPress Contact Form 7. Создаем бота Боты в Telegram создаются через другого Читать далее

Один комментарий на «WordPress Ajax»

  1. Михаил:

    Информация подана в самой понятной форме, что немаловажно для начинающего веб-программиста на WP. Жду новых интересных статей.

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

*

code