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-код

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

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.0rn";
    $headers .= "Content-type: text/html; charset=utf-8rn";
    $headers .= "From: info@site.ru rn";
        
    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');