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

Автор: Михаил Кузнецов | Опубликовано: 21.02.2026

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

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

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

Преимущества шорткода для мобильного раздела:

Лёгкость интеграции в контент
Возможность динамической подгрузки контента через AJAX
Управляемость из кода и расширяемость

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

Пример создания шорткода для мобильного раздела

В functions.php вашей темы или в отдельном плагине добавьте следующий код:

function wpmobile_render_mobile_section() {
    ob_start();
    ?>
    <div id="wpmobile-mobile-section">
        <button id="wpmobile-load-more">Загрузить больше</button>
        <div id="wpmobile-content"></div>
    </div>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        let offset = 0;
        const button = document.getElementById('wpmobile-load-more');
        const content = document.getElementById('wpmobile-content');

        function loadContent() {
            fetch(wpmobile_ajax_object.ajax_url + '?action=wpmobile_load_posts&offset=' + offset)
                .then(response => response.json())
                .then(data => {
                    if(data.success) {
                        content.insertAdjacentHTML('beforeend', data.data);
                        offset += data.count;
                        if(!data.has_more) {
                            button.style.display = 'none';
                        }
                    }
                });
        }

        button.addEventListener('click', loadContent);
        loadContent();
    });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('wpmobile_section', 'wpmobile_render_mobile_section');

Этот шорткод выводит кнопку и контейнер, в который по нажатию кнопки или при первой загрузке подгружаются посты через AJAX.

Настройка AJAX-обработчика для подгрузки контента

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

function wpmobile_ajax_load_posts() {
    $offset = isset($_GET['offset']) ? intval($_GET['offset']) : 0;
    $posts_per_page = 5;

    $query = new WP_Query(array(
        'post_type' => 'post',
        'posts_per_page' => $posts_per_page,
        'offset' => $offset,
        'orderby' => 'date',
        'order' => 'DESC',
    ));

    if(!$query->have_posts()) {
        wp_send_json_success(array(
            'data' => '',
            'count' => 0,
            'has_more' => false
        ));
    }

    ob_start();
    while($query->have_posts()) {
        $query->the_post();
        ?>
        <article class="wpmobile-post">
            <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
            <p><?php echo wp_trim_words(get_the_excerpt(), 20, '...'); ?></p>
        </article>
        <?php
    }
    wp_reset_postdata();
    $html = ob_get_clean();

    wp_send_json_success(array(
        'data' => $html,
        'count' => $query->post_count,
        'has_more' => ($query->found_posts > $offset + $posts_per_page)
    ));
}
add_action('wp_ajax_wpmobile_load_posts', 'wpmobile_ajax_load_posts');
add_action('wp_ajax_nopriv_wpmobile_load_posts', 'wpmobile_ajax_load_posts');

Этот обработчик возвращает JSON с HTML кодом постов, количеством загруженных элементов и флагом, есть ли ещё посты для загрузки.

Передача AJAX URL в JavaScript и оптимизация загрузки

Для работы fetch нам необходим URL для AJAX-запросов. Добавим локализацию скрипта, чтобы передавать URL в JS.

В функции подключения скриптов (например, wp_enqueue_scripts) добавьте:

function wpmobile_enqueue_scripts() {
    wp_enqueue_script('wpmobile-ajax', get_template_directory_uri() . '/js/wpmobile-ajax.js', array(), null, true);
    wp_localize_script('wpmobile-ajax', 'wpmobile_ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'wpmobile_enqueue_scripts');

И в отдельном файле wpmobile-ajax.js можно вынести JavaScript-код для загрузки постов. Это улучшит структуру и позволит повторно использовать скрипт.

Дополнительные советы по оптимизации мобильного раздела

Используйте легкие стили, минимизируйте количество изображений и сложных элементов для быстрой загрузки.
Добавьте индикатор загрузки (спиннер) при запросах AJAX для улучшения UX.
Кэшируйте результаты AJAX-запросов на стороне клиента, чтобы избежать повторных запросов.
Можно расширить функционал шорткода, добавив фильтры по категориям или тегам, передаваемые через атрибуты шорткода.

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

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

function wpmobile_render_mobile_section($atts) {
    $atts = shortcode_atts(array('category' => ''), $atts, 'wpmobile_section');
    $category = sanitize_text_field($atts['category']);
    ob_start();
    ?>
    <div id="wpmobile-mobile-section" data-category="<?php echo esc_attr($category); ?>">
        <button id="wpmobile-load-more">Загрузить больше</button>
        <div id="wpmobile-content"></div>
    </div>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        let offset = 0;
        const button = document.getElementById('wpmobile-load-more');
        const content = document.getElementById('wpmobile-content');
        const category = document.getElementById('wpmobile-mobile-section').getAttribute('data-category');

        function loadContent() {
            fetch(wpmobile_ajax_object.ajax_url + '?action=wpmobile_load_posts&offset=' + offset + '&category=' + encodeURIComponent(category))
                .then(response => response.json())
                .then(data => {
                    if(data.success) {
                        content.insertAdjacentHTML('beforeend', data.data);
                        offset += data.count;
                        if(!data.has_more) {
                            button.style.display = 'none';
                        }
                    }
                });
        }

        button.addEventListener('click', loadContent);
        loadContent();
    });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('wpmobile_section', 'wpmobile_render_mobile_section');

function wpmobile_ajax_load_posts() {
    $offset = isset($_GET['offset']) ? intval($_GET['offset']) : 0;
    $category = isset($_GET['category']) ? sanitize_text_field($_GET['category']) : '';
    $posts_per_page = 5;

    $args = array(
        'post_type' => 'post',
        'posts_per_page' => $posts_per_page,
        'offset' => $offset,
        'orderby' => 'date',
        'order' => 'DESC',
    );

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

    $query = new WP_Query($args);

    if(!$query->have_posts()) {
        wp_send_json_success(array(
            'data' => '',
            'count' => 0,
            'has_more' => false
        ));
    }

    ob_start();
    while($query->have_posts()) {
        $query->the_post();
        ?>
        <article class="wpmobile-post">
            <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
            <p><?php echo wp_trim_words(get_the_excerpt(), 20, '...'); ?></p>
        </article>
        <?php
    }
    wp_reset_postdata();
    $html = ob_get_clean();

    wp_send_json_success(array(
        'data' => $html,
        'count' => $query->post_count,
        'has_more' => ($query->found_posts > $offset + $posts_per_page)
    ));
}

Теперь, добавляя шорткод [wpmobile_section category="novosti"], вы получите мобильный раздел с постами из категории «новости».

Совместимость с плагинами и темами

Если вы используете темы Reboot, Root или плагины WPGPT, Clearfy Pro, они не конфликтуют с таким подходом, а могут помочь в оптимизации. Например, Clearfy Pro поможет отключить лишние скрипты для мобильного раздела, что ускорит загрузку. WPGPT можно использовать для генерации описаний постов или подсказок в мобильном разделе.

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

Заключение

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