Как создать персонализацию контента в WordPress с помощью AJAX и WPBono

Что такое персонализация контента и зачем она нужна в WordPress

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

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

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

Основы реализации персонализации: почему AJAX и WPBono

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

WPBono — мощный плагин с готовыми хуками и API для расширения функционала WordPress. Он упрощает обработку AJAX-запросов, управляет сессиями и пользовательскими данными, что позволяет быстро создавать персонализированные решения.

Сочетание этих инструментов даёт гибкий и производительный механизм персонализации.

Создание AJAX-эндпоинта с WPBono для получения персональных данных

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

add_action('wp_ajax_wpbono_get_user_data', 'wpbono_get_user_data_callback');
add_action('wp_ajax_nopriv_wpbono_get_user_data', 'wpbono_get_user_data_callback');

function wpbono_get_user_data_callback() {
    // Проверяем nonce для безопасности
    check_ajax_referer('wpbono_nonce', 'security');

    // Получаем ID текущего пользователя
    $user_id = get_current_user_id();

    if (!$user_id) {
        wp_send_json_error(['message' => 'Пользователь не авторизован']);
    }

    // Пример получения метаданных пользователя для персонализации
    $favorite_category = get_user_meta($user_id, 'favorite_category', true);

    // Формируем ответ
    $response = [
        'favorite_category' => $favorite_category ?: 'all',
        'message' => 'Данные получены успешно'
    ];

    wp_send_json_success($response);
}

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

Регистрация nonce для безопасности AJAX-запросов

Вам нужно добавить в шаблон страницы вывод nonce:

<script>
var wpbono_ajax = {
    url: '<?php echo admin_url('admin-ajax.php'); ?>',
    nonce: '<?php echo wp_create_nonce('wpbono_nonce'); ?>'
};
</script>

Клиентская часть: AJAX-запрос для получения данных и динамическое обновление контента

Теперь создадим JavaScript-код, который отправит AJAX-запрос и обновит контент на странице без перезагрузки.

document.addEventListener('DOMContentLoaded', function() {
    function wpbonoFetchUserData() {
        var data = new FormData();
        data.append('action', 'wpbono_get_user_data');
        data.append('security', wpbono_ajax.nonce);

        fetch(wpbono_ajax.url, {
            method: 'POST',
            credentials: 'same-origin',
            body: data
        })
        .then(response => response.json())
        .then(data => {
            if(data.success) {
                var category = data.data.favorite_category;
                document.getElementById('wpbono-personalized-content').textContent = 'Показываем контент для категории: ' + category;
                // Здесь можно добавить загрузку контента по категории через еще один AJAX-запрос или обновить блок
            } else {
                console.error('Ошибка получения данных:', data.data.message);
            }
        })
        .catch(error => console.error('Fetch error:', error));
    }

    wpbonoFetchUserData();
});

В HTML-шаблоне страницы добавьте элемент для вывода персонализированного контента:

<div id="wpbono-personalized-content">Загрузка персонального контента...</div>

Расширение функционала: динамическая подгрузка постов по категории

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

Добавим в PHP дополнительную функцию для получения постов:

function wpbono_get_posts_by_category_callback() {
    check_ajax_referer('wpbono_nonce', 'security');

    $category = sanitize_text_field($_POST['category'] ?? 'all');

    $args = [
        'post_type' => 'post',
        'posts_per_page' => 5
    ];

    if ($category !== 'all') {
        $args['category_name'] = $category;
    }

    $query = new WP_Query($args);
    $posts = [];

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $posts[] = [
                'title' => get_the_title(),
                'link' => get_permalink()
            ];
        }
        wp_reset_postdata();
    }

    wp_send_json_success(['posts' => $posts]);
}
add_action('wp_ajax_wpbono_get_posts_by_category', 'wpbono_get_posts_by_category_callback');
add_action('wp_ajax_nopriv_wpbono_get_posts_by_category', 'wpbono_get_posts_by_category_callback');

И клиентский код для запроса и отображения постов:

function wpbonoLoadPosts(category) {
    var data = new FormData();
    data.append('action', 'wpbono_get_posts_by_category');
    data.append('security', wpbono_ajax.nonce);
    data.append('category', category);

    fetch(wpbono_ajax.url, {
        method: 'POST',
        credentials: 'same-origin',
        body: data
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            var container = document.getElementById('wpbono-post-list');
            container.innerHTML = '';
            data.data.posts.forEach(function(post) {
                var a = document.createElement('a');
                a.href = post.link;
                a.textContent = post.title;
                a.style.display = 'block';
                container.appendChild(a);
            });
        } else {
            console.error('Ошибка загрузки постов');
        }
    });
}

// Для вызова после получения категории
wpbonoLoadPosts(category);

HTML для списка постов:

<div id="wpbono-post-list">Здесь появятся персонализированные посты</div>

Использование дополнительных возможностей WPBono для улучшения персонализации

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

Также плагин поддерживает удобное управление пользовательскими метаданными, что сокращает время разработки.

Если хотите автоматизировать сбор аналитики по персонализации, посмотрите на возможности WPBono Expert Review и ABC Pagination для показа рейтингов и страниц с персонализированными списками.

Пример сохранения данных предпочтений пользователя через AJAX и WPBono

add_action('wp_ajax_wpbono_save_user_pref', 'wpbono_save_user_pref_callback');
function wpbono_save_user_pref_callback() {
    check_ajax_referer('wpbono_nonce', 'security');
    $user_id = get_current_user_id();
    if (!$user_id) {
        wp_send_json_error(['message' => 'Пользователь не авторизован']);
    }
    $pref = sanitize_text_field($_POST['pref'] ?? '');
    update_user_meta($user_id, 'favorite_category', $pref);
    wp_send_json_success(['message' => 'Предпочтения сохранены']);
}

Такой подход позволяет создавать полноценный интерактивный UX с сохранением данных без перезагрузки.

Резюме и рекомендации по улучшению персонализации

Персонализация контента в WordPress с помощью AJAX и WPBono – это мощный инструмент для повышения вовлечённости пользователей и улучшения конверсии. Используйте динамические AJAX-запросы для подгрузки данных и контента, храните пользовательские предпочтения в метаданных, а WPBono поможет упростить реализацию и обезопасить взаимодействие.

Рекомендуется также продумывать UX: информировать пользователя о персонализации, давать возможность менять настройки и использовать кэширование для оптимизации скорости.

Для расширения функционала обратите внимание на плагины из WPShop, которые могут помочь в автоматизации и улучшении пользовательского опыта.