WordPress Ajax
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-код
Тут обычная форма с именем и полем для телефона.
<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 с локального или тестового домена на основной. Для этого необходимо не только скопировать файлы, базу данных и поменять настройки в конфигурационном файле, но и сделать ряд SQL-запросов, чтобы прописать Читать далее
Самый оптимальный и простой код файла robots.txt для вашего сайта на WordPress, который подойдет для всех поисковиков. Этот вариант использую на данном сайте. Не забудьте заменить maindot.ru на адрес вашего сайта. Содержание файла robots.txt для WordPress Если вы используете HTTPS, Читать далее
Постоянно приходится пользоваться этой заготовкой. Вы можете модернизировать ее под любые нужды, будь то форма обратной связи, форма обратного звонка или заказ какой-либо услуги или товара. Поэтому я не буду украшать ее стилями, применять классы Bootstrap и различные скрипты, как Читать далее
Произвольные типы записей позволяют разделить посты не только по категориям, но и по их типу с собственными названиями и рубриками. Это что-то типо инфоблока, как в CMS 1С-Битрикс. По умолчанию в WordPress есть возможность добавлять записи и их рубрики. К Читать далее
Произвольные поля или как их еще называют кастомные или доп. поля в WordPress очень нужная вещь, особенно при создании например сайта-каталога. С помощью доп. полей можно добавить к записям возможность указывать например цену или цвет, а затем выводить сохраненное значение Читать далее
Когда я создавал свой первый плагин, то оказалось, что в сети очень мало информации по этому вопросу. С трудом удалось найти даже основы. Надеюсь эта статья поможет вам научиться писать различные плагины для WordPress. Наверняка вы уже пользовались и знаете, Читать далее
По большей части публикации про применение Ajax в WordPress сложные для понимания, особенно если вы мало знакомы с этой технологией. В этой статье я покажу, как на самом деле просто использовать Ajax в публичной части сайта. Ajax запросы в WordPress Читать далее
Информация подана в самой понятной форме, что немаловажно для начинающего веб-программиста на WP. Жду новых интересных статей.