Как создать и оптимизировать мобильные шорткоды в WordPress с AJAX

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

Почему важно создавать мобильные шорткоды с AJAX

Шорткоды — мощный инструмент WordPress, позволяющий вставлять функциональность в записи, страницы и виджеты. Однако при использовании на мобильных устройствах важно учитывать особенности подключения, скорости и UX. AJAX позволяет загружать контент асинхронно, снижая время начальной загрузки и экономя трафик, что критично для мобильных пользователей.

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

Создание базового мобильного шорткода с AJAX

Начнем с простого примера шорткода, который выводит список последних постов, подгружаемый по кнопке «Показать еще» без перезагрузки.

Регистрация шорткода и AJAX-обработчика

function wpmobile_register_ajax_shortcode() {
    add_shortcode('wpmobile_latest_posts', 'wpmobile_latest_posts_shortcode');
    
    add_action('wp_enqueue_scripts', 'wpmobile_enqueue_scripts');
    add_action('wp_ajax_wpmobile_load_more_posts', 'wpmobile_load_more_posts_callback');
    add_action('wp_ajax_nopriv_wpmobile_load_more_posts', 'wpmobile_load_more_posts_callback');
}
add_action('init', 'wpmobile_register_ajax_shortcode');

function wpmobile_enqueue_scripts() {
    wp_enqueue_script('wpmobile-ajax', get_template_directory_uri() . '/js/wpmobile-ajax.js', array('jquery'), null, true);
    wp_localize_script('wpmobile-ajax', 'wpmobile_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('wpmobile_nonce')
    ));
}

function wpmobile_latest_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'posts_per_page' => 5
    ), $atts, 'wpmobile_latest_posts');

    $query = new WP_Query(array(
        'posts_per_page' => $atts['posts_per_page'],
        'post_status' => 'publish'
    ));

    ob_start();
    if ($query->have_posts()) {
        echo '<div id="wpmobile-posts-container">';
        while ($query->have_posts()) {
            $query->the_post();
            echo '<div class="wpmobile-post-item">';
            echo '<h3>' . get_the_title() . '</h3>';
            echo '<p>' . get_the_excerpt() . '</p>';
            echo '</div>';
        }
        echo '</div>';
        echo '<button id="wpmobile-load-more" data-page="1">Показать еще</button>';
    } else {
        echo '<p>Посты не найдены.</p>';
    }
    wp_reset_postdata();
    return ob_get_clean();
}

function wpmobile_load_more_posts_callback() {
    check_ajax_referer('wpmobile_nonce', 'nonce');
    $paged = isset($_POST['page']) ? intval($_POST['page']) + 1 : 2;
    $posts_per_page = 5;

    $query = new WP_Query(array(
        'posts_per_page' => $posts_per_page,
        'paged' => $paged,
        'post_status' => 'publish'
    ));

    if ($query->have_posts()) {
        ob_start();
        while ($query->have_posts()) {
            $query->the_post();
            echo '<div class="wpmobile-post-item">';
            echo '<h3>' . get_the_title() . '</h3>';
            echo '<p>' . get_the_excerpt() . '</p>';
            echo '</div>';
        }
        wp_reset_postdata();
        $posts_html = ob_get_clean();
        wp_send_json_success(array('html' => $posts_html, 'next_page' => $paged));
    } else {
        wp_send_json_error('Больше постов нет');
    }
}

JavaScript для AJAX-загрузки

Создадим файл js/wpmobile-ajax.js в теме с таким содержанием:

jQuery(document).ready(function($) {
    $('#wpmobile-load-more').on('click', function() {
        var button = $(this);
        var page = parseInt(button.data('page'));

        $.ajax({
            url: wpmobile_ajax_obj.ajax_url,
            method: 'POST',
            data: {
                action: 'wpmobile_load_more_posts',
                nonce: wpmobile_ajax_obj.nonce,
                page: page
            },
            beforeSend: function() {
                button.prop('disabled', true).text('Загрузка...');
            },
            success: function(response) {
                if (response.success) {
                    $('#wpmobile-posts-container').append(response.data.html);
                    button.data('page', response.data.next_page).prop('disabled', false).text('Показать еще');
                } else {
                    button.text('Больше постов нет').prop('disabled', true);
                }
            },
            error: function() {
                button.text('Ошибка загрузки').prop('disabled', false);
            }
        });
    });
});

Оптимизация мобильных шорткодов: советы и рекомендации

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

1. Минификация и отложенная загрузка скриптов

Загружайте JavaScript и CSS только на тех страницах, где используется шорткод. В нашем примере это сделано через условную регистрацию скриптов в wpmobile_enqueue_scripts.

Используйте плагины как Clearfy Pro для минимизации и оптимизации загрузки ресурсов.

2. Кеширование результатов AJAX

Если данные постов не меняются часто, можно кешировать результаты AJAX-запросов на стороне сервера с помощью set_transient и get_transient в WordPress. Это значительно снизит нагрузку и ускорит выдачу.

3. Использование формата JSON и lazy loading

Вместо передачи HTML можно выдавать JSON с данными, а строить разметку на клиенте через JavaScript. Это позволяет легче интегрировать шорткод в SPA или мобильные приложения.

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

Дополнительные возможности для мобильных шорткодов

Интеграция с плагинами WPShop

Для расширения функциональности мобильных шорткодов можно использовать плагины из WPShop. Например, WPRemark поможет добавить мобильные комментарии с AJAX, а ABC Pagination — улучшить пагинацию в шорткодах.

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

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

Выводы и итоги

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

Используйте приведенный пример как отправную точку, адаптируйте под свои задачи и не забывайте про инструменты оптимизации из экосистемы WPShop.