Создание ajax-формы на WordPress без использования плагинов: подробный гид

Аjax – это технология, позволяющая асинхронно отправлять запросы на сервер без перезагрузки страницы. Она приносит мгновенную обратную связь и улучшает пользовательский интерфейс. Создание ajax-формы на WordPress может показаться сложной задачей, но на самом деле это не так.

В этой статье мы рассмотрим простой способ создания ajax-формы на WordPress без необходимости использования плагинов. Мы будем использовать встроенные функции WordPress и немного JavaScript для обработки формы и отправки запроса на сервер.

Готовы начать? Давайте приступим к созданию ajax-формы на WordPress!

Шаг 1: Создание шаблона формы

В этом шаблоне формы мы создаем форму с уникальным id «contact-form» и указываем метод отправки данных как POST. Также мы указываем атрибут action с URL-адресом функции, которая будет обрабатывать отправку формы.

Внутри формы мы добавляем поля для имени, электронной почты и сообщения. Каждое поле содержит соответствующий name и атрибут required для обязательного заполнения.

В конце формы мы добавляем кнопку submit с надписью «Отправить».

Шаг 2: Добавление функции обработки формы в файл functions.php

Для того, чтобы ajax-форма на WordPress работала без плагинов, необходимо добавить функцию обработки формы в файл functions.php вашей темы. В данном шаге мы рассмотрим, как это можно сделать.

1. Откройте файл functions.php вашей темы в любом текстовом редакторе.
2. Найдите закрывающий тег ?> в конце файла и перейдите на новую строку перед ним.
3. Добавьте следующий код:

add_action( 'wp_ajax_my_form_submit', 'my_form_submit' );add_action( 'wp_ajax_nopriv_my_form_submit', 'my_form_submit' );function my_form_submit() {// Проверяем, является ли текущий запрос типом POSTif ( $_SERVER['REQUEST_METHOD'] !== 'POST' ) {wp_send_json_error( 'Недопустимый запрос' );}// Получение данных из формы$name = sanitize_text_field( $_POST['name'] );$email = sanitize_email( $_POST['email'] );$message = sanitize_textarea_field( $_POST['message'] );// Ваш код обработки формы здесь...// Отправляем ответ об успешной обработке формыwp_send_json_success( 'Форма успешно обработана' );}

В данном коде мы добавляем две действия (wp_ajax_my_form_submit и wp_ajax_nopriv_my_form_submit), которые будут обрабатывать ajax-запросы для формы. Функция my_form_submit() будет вызываться при получении таких запросов.

Внутри функции мы сначала проверяем, является ли текущий запрос типом POST. Если это не так, то мы возвращаем ошибку.

Затем мы получаем данные из формы, выполняя необходимую санитизацию. Вам необходимо заменить name, email и message на соответствующие поля в вашей форме.

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

Наконец, мы отправляем ответ об успешной обработке формы с помощью функции wp_send_json_success().

Теперь у вас есть функция обработки формы, которую можно использовать для вашей ajax-формы на WordPress.

Шаг 3: Настройка обработчика ajax-запросов

Теперь, когда у нас есть форма и jQuery, необходимо настроить обработчик ajax-запросов, который будет получать данные, отправленные с помощью формы, и выполнять необходимые действия.

Создайте отдельный файл с именем «ajax-handler.php», который будет содержать обработчик. Поместите его в папку вашей темы WordPress.

В начале файла необходимо добавить несколько строк кода:

Внутри условия проверки метода запроса POST мы можем начать обрабатывать данные формы. Предположим, что мы хотим отправить электронное письмо с данными, введенными в форму. В этом случае, в обработчике можно использовать функцию wp_mail() WordPress для отправки письма. Например:

Не забудьте заменить «[email protected]» на свой электронный адрес, куда должно отправляться письмо.

После обработки запроса вы можете отправить ответ обратно на страницу, чтобы показать пользователю, что запрос был успешно обработан. Например:

Теперь, когда у вас есть обработчик ajax-запросов, вы можете добавить код в ваш скрипт, который будет отправлять данные формы на обработчик. Мы рассмотрим это в следующем шаге.

Шаг 4: Создание шорткода для размещения формы на странице

После того, как мы создали файл с настройками формы и функцией обработки ajax-запроса, нам нужно создать шорткод, чтобы разместить форму на странице.

Для этого откройте файл functions.php вашей темы и добавьте следующий код:


function custom_contact_form_shortcode() {
ob_start();
include 'contact-form.php';
return ob_get_clean();
}
add_shortcode('contact_form', 'custom_contact_form_shortcode');


Теперь, чтобы разместить форму на странице, просто добавьте следующий код в нужное место вашей страницы:


[contact_form]


После этого, при просмотре страницы вы увидите форму, которую мы создали, и она будет отправлять данные посредством асинхронного запроса.

Шаг 5: Добавление стилей для оформления формы

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

Если у вас нет отдельного файла стилей, вы можете добавить стили непосредственно в HTML-код. Для этого воспользуйтесь атрибутом style. Например:

В примере выше мы добавили стиль для формы, указав цвет фона (#f8f8f8) и внутренний отступ (padding: 20px).

Однако, лучше всего использовать отдельный файл стилей. Создайте новый файл с расширением .css и сохраните его в папке вашей темы WordPress. Например, wp-content/themes/your-theme/style.css.

Откройте этот файл и добавьте следующие стили для формы:

#ajax-form {background-color: #f8f8f8;padding: 20px;}

Сохраните файл со стилями и подключите его к своей теме WordPress, добавив следующий код перед закрывающим тегом в файле header.php:

Теперь форма будет оформлена в соответствии с вашими стилями!

Шаг 6: Подключение скриптов для работы ajax-формы

Для того чтобы наша ajax-форма корректно функционировала, необходимо подключить несколько скриптов. Скрипт jQuery будет использоваться для отправки асинхронных запросов на сервер, а скрипт WordPress wp_enqueue_script() позволит нам подключить jQuery к нашей теме.

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

function custom_scripts() {wp_enqueue_script( 'jquery' );wp_enqueue_script( 'custom-ajax-script', get_stylesheet_directory_uri() . '/js/custom-ajax-script.js', array( 'jquery' ), '1.0', true );}add_action( 'wp_enqueue_scripts', 'custom_scripts' );

В этом коде мы используем функцию wp_enqueue_script(), которая позволяет подключить скрипты к нашей теме с правильными зависимостями. Она принимает несколько параметров: идентификатор скрипта, URL файла скрипта, массив зависимостей (в нашем случае jQuery), версию скрипта и флаг, указывающий, должен ли скрипт быть выведен в конце файла.

Создайте папку «js» в директории вашей темы, если ее еще нет. Внутри нее создайте файл «custom-ajax-script.js» и добавьте следующий код:

jQuery(document).ready(function($) {$('#ajax-form').submit(function() {var form = $(this);var data = form.serialize();$.ajax({type: 'POST',url: form.attr('action'),data: data,success: function(response) {$('#form-result').html(response);form.find('input[type=text], textarea').val('');},error: function() {alert('Произошла ошибка! Пожалуйста, попробуйте еще раз.');}});return false;});});

Теперь вы успешно подключили необходимые скрипты для работы ajax-формы. Это позволит пользователям отправлять данные на сервер без перезагрузки страницы, что обеспечит более плавный пользовательский опыт.

Шаг 7: Тестирование и отладка ajax-формы

После создания ajax-формы на WordPress важно провести тестирование и отладку, чтобы убедиться, что она работает правильно. Вот несколько советов, которые помогут вам в этом процессе:

1. Проверьте правильность подключения скриптов и стилей

Убедитесь, что вы правильно добавили ссылки на файлы со скриптами и стилями вашей ajax-формы. Проверьте, что пути указаны верно и файлы доступны.

2. Используйте инструменты разработчика браузера

Откройте инструменты разработчика в вашем браузере и проверьте, есть ли ошибки в консоли. Это поможет вам определить возможные проблемы и найти точку ошибки.

3. Включите отладку в файле functions.php

Добавьте следующий код в файл functions.php вашей темы:

define(‘WP_DEBUG’, true);

Это включит режим отладки, который поможет вам отслеживать и исправлять ошибки.

4. Проверьте ajax-запросы

Используйте инструменты разработчика браузера, чтобы проверить ajax-запросы, отправляемые вашей формой. Проверьте, что данные отправляются и принимаются правильно.

5. Проверьте обработку данных на сервере

Убедитесь, что данные, отправленные вашей ajax-формой, корректно обрабатываются на сервере. Проверьте логику обработки данных и убедитесь, что все необходимые действия выполняются.

6. Тестирование на различных устройствах и браузерах

Проверьте работу вашей ajax-формы на различных устройствах и в разных браузерах, чтобы убедиться, что она работает корректно во всех ситуациях. Убедитесь, что форма адаптируется под разные разрешения экранов и корректно отображается.

Следуя этим советам, вы сможете успешно протестировать и отладить свою ajax-форму на WordPress и убедиться, что она работает стабильно и без ошибок.

Шаг 8: Размещение ajax-формы на веб-сайте

После создания ajax-формы вам нужно разместить ее на вашем веб-сайте. Для этого вам потребуется редактировать файл вашей темы WordPress, куда вы хотите разместить форму.

1. Войдите в административную панель WordPress и выберите «Внешний вид» в главном меню.

2. В разделе «Редактор тем» выберите нужную вам тему и откройте файл, который содержит шаблон страницы, на которой вы хотите разместить форму.

3. В месте, где вы хотите разместить форму, вставьте следующий код:

4. Сохраните изменения и обновите ваш веб-сайт. Теперь ajax-форма будет отображаться на выбранной вами странице.

5. Добавьте стили или внесите дополнительные изменения в размещение формы, если требуется.

Теперь ваша ajax-форма полностью готова к использованию на вашем веб-сайте. Она будет отправлять данные без перезагрузки страницы и обрабатывать их на сервере с помощью заданного вами обработчика.