Подписка на email — важный элемент любого сайта, позволяющий собирать базу контактов и поддерживать связь с аудиторией. В этой статье разберём, как добавить форму подписки в WordPress с использованием AJAX без привлечения сторонних плагинов. Это позволит сделать процесс подписки удобным и быстрым для пользователей, а также снизит нагрузку на сервер за счёт асинхронной отправки данных.
Почему стоит создавать подписку без плагинов
Многие разработчики сразу используют готовые плагины для подписок, но это не всегда оправдано. Во-первых, плагины могут замедлять сайт и создавать лишние зависимости. Во-вторых, кастомная реализация позволяет идеально вписать функционал в дизайн и логику сайта. В-третьих, вы контролируете все аспекты безопасности и хранения данных.
В данном решении мы создадим простую форму, которая отправит email на сервер с помощью AJAX, проверит формат email, сохранит подписчика в отдельной таблице базы данных и вернёт пользователю сообщение об успехе или ошибке.
Создание таблицы для хранения подписчиков
Для начала создадим таблицу в базе данных WordPress, где будут храниться адреса email подписчиков. Рекомендуется делать это через функцию активации темы или плагина. Для примера используем хук after_switch_theme:
function wptests_create_subscribers_table() {
global $wpdb;
$table_name = $wpdb->prefix . 'wptests_subscribers';
$charset_collate = $wpdb->get_charset_collate();
$sql = "CREATE TABLE IF NOT EXISTS $table_name (
id BIGINT(20) NOT NULL AUTO_INCREMENT,
email VARCHAR(100) NOT NULL,
subscribed_at DATETIME DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (id),
UNIQUE KEY email (email)
) $charset_collate;";
require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
dbDelta($sql);
}
add_action('after_switch_theme', 'wptests_create_subscribers_table');Этот код создаст таблицу wp_wptests_subscribers (префикс может отличаться) с полями для email и времени подписки. К email применён уникальный индекс, чтобы не допустить дублирования.
Добавление формы подписки на сайт
Форма будет простой, с полем для email и кнопкой отправки. Добавим её в нужное место темы, например, через шорткод:
function wptests_subscription_form_shortcode() {
ob_start();
?>
<form id="wptests-subscribe-form">
<input type="email" id="wptests-email" name="email" placeholder="Введите ваш email" required />
<button type="submit">Подписаться</button>
<div id="wptests-message"></div>
</form>
<script>
document.getElementById('wptests-subscribe-form').addEventListener('submit', function(e) {
e.preventDefault();
var emailField = document.getElementById('wptests-email');
var messageDiv = document.getElementById('wptests-message');
var email = emailField.value.trim();
if (!email) {
messageDiv.textContent = 'Пожалуйста, введите email.';
return;
}
var data = new FormData();
data.append('action', 'wptests_subscribe');
data.append('email', email);
data.append('security', wptests_vars.nonce);
fetch(wptests_vars.ajax_url, {
method: 'POST',
credentials: 'same-origin',
body: data
})
.then(response => response.json())
.then(result => {
if (result.success) {
messageDiv.style.color = 'green';
messageDiv.textContent = result.data.message;
emailField.value = '';
} else {
messageDiv.style.color = 'red';
messageDiv.textContent = result.data.message;
}
})
.catch(() => {
messageDiv.style.color = 'red';
messageDiv.textContent = 'Ошибка при отправке запроса.';
});
});
</script>
<?php
return ob_get_clean();
}
add_shortcode('wptests_subscribe_form', 'wptests_subscription_form_shortcode');Для корректной работы AJAX необходимо передать URL обработчика и nonce, зарегистрируем их в скрипте:
function wptests_enqueue_scripts() {
wp_localize_script('jquery', 'wptests_vars', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wptests_subscribe_nonce')
));
}
add_action('wp_enqueue_scripts', 'wptests_enqueue_scripts');Обработка AJAX-запроса и валидация email
Создадим функцию-обработчик для AJAX, которая проверит nonce, валидирует email и сохранит его в базу:
function wptests_handle_subscribe_ajax() {
check_ajax_referer('wptests_subscribe_nonce', 'security');
if (empty($_POST['email'])) {
wp_send_json_error(array('message' => 'Email не передан.'));
}
$email = sanitize_email($_POST['email']);
if (!is_email($email)) {
wp_send_json_error(array('message' => 'Неверный формат email.'));
}
global $wpdb;
$table_name = $wpdb->prefix . 'wptests_subscribers';
$exists = $wpdb->get_var($wpdb->prepare("SELECT COUNT(*) FROM $table_name WHERE email = %s", $email));
if ($exists) {
wp_send_json_error(array('message' => 'Этот email уже подписан.'));
}
$inserted = $wpdb->insert($table_name, array('email' => $email));
if ($inserted) {
wp_send_json_success(array('message' => 'Спасибо за подписку!'));
} else {
wp_send_json_error(array('message' => 'Ошибка при сохранении email. Попробуйте позже.'));
}
}
add_action('wp_ajax_wptests_subscribe', 'wptests_handle_subscribe_ajax');
add_action('wp_ajax_nopriv_wptests_subscribe', 'wptests_handle_subscribe_ajax');Советы по безопасности и расширению функционала
Важной частью является защита от спама и повторных подписок. Мы уже реализовали nonce и проверку на дубликаты. Для дальнейшего улучшения можно:
- Добавить CAPTCHA (например, Google reCAPTCHA) в форму.
- Отправлять письмо с подтверждением подписки (double opt-in) для легальности и качества базы.
- Добавить возможность отписки, сохраняя в базе статус подписчика.
- Интегрировать с сервисами email-маркетинга через API.
Для отправки почты с подтверждением используйте функцию wp_mail внутри wptests_handle_subscribe_ajax после успешного добавления email в базу.
Пример интеграции с WPRemark для сбора отзывов после подписки
Если на сайте используется плагин WPRemark (https://wpshop.ru/wpremark/?utm_source=wptests.ru&utm_medium=article&utm_campaign=sozdat-podpisku-na-email-v-wordpress-s-ajax-bez-plaginov), можно автоматически отправлять приглашение оставить отзыв после подписки. Для этого расширьте функцию обработки подписки, добавив вызов встроенных методов WPRemark для создания отзыва или отправки email.
Это позволит повысить вовлечённость пользователей и улучшить репутацию сайта.
Итог
Создание подписки на email с использованием AJAX без плагинов — задача вполне решаемая, если грамотно работать с базой данных, AJAX-запросами и безопасностью. Приведённый пример поможет быстро внедрить такой функционал и настроить его под свои нужды.
Для более продвинутых решений и интеграций рекомендуем изучить плагины WPRemark и Clearfy Pro на wpshop.ru.