Как создать подписку на новости WordPress с помощью AJAX и плагинов

Автор: Сергей Крылов | Опубликовано: 15.12.2025

Подписка на новости — одна из ключевых функций для удержания аудитории и увеличения вовлеченности на сайте WordPress. В этой статье разберём, как создать удобную и быструю подписку на новости с использованием AJAX, чтобы пользователь мог подписаться без перезагрузки страницы. Рассмотрим практический пример с собственным кодом и дополнительно познакомимся с полезными плагинами, которые можно использовать для расширения функционала.

Почему подписка на новости с AJAX важна для WordPress

Обычные формы подписки, которые требуют перезагрузки страницы после отправки, негативно влияют на пользовательский опыт. AJAX позволяет отправлять данные на сервер и получать ответ без перезагрузки страницы, что делает процесс подписки мгновенным и удобным.

Кроме того, реализация подписки через AJAX позволяет легко валидировать данные на стороне клиента, выводить сообщения об ошибках и успехе, а также интегрировать подписку с email-сервисами и CRM через REST API.

Основные задачи, которые решает AJAX-подписка:

Отправка email подписчика без перезагрузки страницы;
Динамическая валидация email;
Вывод сообщений об успехе или ошибках;
Интеграция с внешними сервисами;
Улучшение UX и повышение конверсии.

Создание простой формы подписки с AJAX: пошаговый пример

Для начала создадим форму подписки и добавим обработчик на AJAX. В этом примере мы реализуем сохранение email подписчиков в таблицу базы данных WordPress.

1. Добавляем HTML-форму в шаблон

В нужном месте темы вставляем следующий код формы:

<form id="wpcodex-subscribe-form">
    <input type="email" name="email" id="wpcodex-email" placeholder="Введите ваш email" required />
    <button type="submit">Подписаться</button>
    <div id="wpcodex-message"></div>
</form>

2. Регистрируем AJAX-обработчик в functions.php

Добавим функции для обработки подписки и регистрации AJAX-запроса:

function wpcodex_create_subscribers_table() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'wpcodex_subscribers';
    $charset_collate = $wpdb->get_charset_collate();
    
    $sql = "CREATE TABLE IF NOT EXISTS $table_name (
        id mediumint(9) NOT NULL AUTO_INCREMENT,
        email varchar(100) NOT NULL,
        subscribed_at datetime DEFAULT CURRENT_TIMESTAMP NOT NULL,
        PRIMARY KEY  (id),
        UNIQUE KEY email (email)
    ) $charset_collate;";
    require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
    dbDelta( $sql );
}
add_action( 'after_setup_theme', 'wpcodex_create_subscribers_table' );

function wpcodex_ajax_subscribe() {
    check_ajax_referer( 'wpcodex_subscribe_nonce', 'nonce' );
    
    if ( empty( $_POST['email'] ) || ! is_email( $_POST['email'] ) ) {
        wp_send_json_error( 'Введите корректный email.' );
    }
    $email = sanitize_email( $_POST['email'] );
    global $wpdb;
    $table_name = $wpdb->prefix . 'wpcodex_subscribers';
    
    $exists = $wpdb->get_var( $wpdb->prepare( "SELECT COUNT(*) FROM $table_name WHERE email = %s", $email ) );
    if ( $exists ) {
        wp_send_json_error( 'Этот email уже подписан.' );
    }
    
    $inserted = $wpdb->insert( $table_name, [ 'email' => $email ] );
    if ( $inserted ) {
        wp_send_json_success( 'Спасибо за подписку!' );
    } else {
        wp_send_json_error( 'Ошибка при сохранении email.' );
    }
}
add_action( 'wp_ajax_wpcodex_subscribe', 'wpcodex_ajax_subscribe' );
add_action( 'wp_ajax_nopriv_wpcodex_subscribe', 'wpcodex_ajax_subscribe' );

3. Добавляем JavaScript для отправки формы без перезагрузки

Подключим скрипт в футере или через wp_enqueue_scripts:

function wpcodex_enqueue_scripts() {
    wp_enqueue_script( 'wpcodex-subscribe', get_template_directory_uri() . '/js/wpcodex-subscribe.js', ['jquery'], null, true );
    wp_localize_script( 'wpcodex-subscribe', 'wpcodex_ajax_obj', [
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'nonce' => wp_create_nonce( 'wpcodex_subscribe_nonce' )
    ]);
}
add_action( 'wp_enqueue_scripts', 'wpcodex_enqueue_scripts' );

Создаём файл js/wpcodex-subscribe.js с таким содержимым:

jQuery(document).ready(function($) {
    $('#wpcodex-subscribe-form').on('submit', function(e) {
        e.preventDefault();
        var email = $('#wpcodex-email').val();
        var message = $('#wpcodex-message');
        message.text('Отправка...');

        $.post(wpcodex_ajax_obj.ajaxurl, {
            action: 'wpcodex_subscribe',
            email: email,
            nonce: wpcodex_ajax_obj.nonce
        }, function(response) {
            if(response.success) {
                message.css('color', 'green').text(response.data);
                $('#wpcodex-email').val('');
            } else {
                message.css('color', 'red').text(response.data);
            }
        });
    });
});

Использование плагинов для подписки: обзор и советы

Если не хочется писать собственный код, можно использовать готовые решения. На рынке есть несколько популярных плагинов с поддержкой AJAX, интеграцией с почтовыми сервисами и расширенными настройками.

1. MailPoet

MailPoet позволяет создавать формы подписки и рассылки прямо в админке WordPress. Он поддерживает AJAX, автоматическую отправку приветственных писем, сегментацию и аналитику.

Плюсы: удобный интерфейс, бесплатный до 1000 подписчиков, интеграция с WooCommerce.

2. Newsletter

Мощный плагин с визуальным конструктором писем, поддержкой AJAX и мультисайтовостью. Позволяет настраивать триггерные рассылки и управлять подписчиками.

3. Clearfy Pro для оптимизации подписки

Если вы используете Clearfy Pro (https://wpshop.ru/clearfy-pro/?utm_source=wpcodex.ru&utm_medium=article&utm_campaign=kak-sozdat-podpisku-na-novosti-wordpress-s-pomoshhyu-ajax), он помогает оптимизировать загрузку скриптов и ускорить работу AJAX-запросов, что улучшит работу формы подписки.

Советы по безопасности и производительности подписки на новости

При реализации подписки важно помнить про безопасность и нагрузку на сервер.

1. Валидация и проверка данных

Обязательно проверяйте email как на клиенте, так и на сервере. Используйте is_email() и sanitize_email() для очистки данных в WordPress.

2. Защита от спама

Добавьте nonce-проверку, как показано в примере, и при необходимости капчу (например, Google reCAPTCHA) для снижения количества фейковых подписок.

3. Оптимизация запросов

Создавайте индекс на поле email в таблице базы данных для быстрого поиска. Используйте WP Cron для периодической очистки базы от неактивных подписчиков.

4. Интеграция с внешними сервисами

Если нужна интеграция с Mailchimp, GetResponse и другими, используйте их API. Можно добавить вызовы API в обработчик AJAX после успешного добавления email в базу.

Заключение: гибкость и масштабируемость

Создание подписки на новости c помощью AJAX — это не только улучшение UX, но и первый шаг к масштабируемому маркетингу. Собственный код даёт полный контроль и возможность доработок, а плагины ускоряют запуск.

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