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 включает в себя регулярную оптимизацию базы данных, в ходе которой вы избавляетесь от ненужных Читать далее

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

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

Получить параметры сайта с помощью функции get_bloginfo() WordPress

Сегодня мы поговорим об одной нужной функции WordPress get_bloginfo(), которая возвращает параметры сайта и довольно часто применяется при разработке в этой CMS. Например с её помощью можно получить и вывести название, описание сайта, его адрес URL и многое другое. Синтаксис Читать далее

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

  1. Михаил:

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

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

*

code