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

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

Что такое каскадный выбор и зачем он нужен

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

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

Пример использования каскадного выбора

• Выбор региона и города в форме обратной связи.
• Фильтрация товаров по категориям и подкатегориям в WooCommerce.
• Выбор темы и подтемы для пользовательского контента.

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

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

• Регистрировать шорткод, который выводит HTML с двумя <select> элементами.
• Добавить JavaScript для отслеживания изменений первого селекта и AJAX-запроса для обновления второго.
• Создать AJAX обработчик на сервере, который возвращает подходящие опции для второго селекта.

Шаг 1. Регистрация шорткода и вывод HTML

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

function wpdesk_cascade_shortcode() {
    ob_start();
    ?>
    <select id="wpdesk-select-1" name="region">
        <option value="">Выберите регион</option>
        <option value="moscow">Москва</option>
        <option value="spb">Санкт-Петербург</option>
        <option value="novosibirsk">Новосибирск</option>
    </select>

    <select id="wpdesk-select-2" name="city" disabled>
        <option value="">Выберите город</option>
    </select>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var select1 = document.getElementById('wpdesk-select-1');
        var select2 = document.getElementById('wpdesk-select-2');

        select1.addEventListener('change', function() {
            var region = this.value;
            select2.innerHTML = '<option>Загрузка...</option>';
            select2.disabled = true;

            if (!region) {
                select2.innerHTML = '<option value="">Выберите город</option>';
                select2.disabled = true;
                return;
            }

            fetch(wpdesk_ajax_object.ajax_url + '?action=wpdesk_get_cities&region=' + region)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        select2.innerHTML = '';
                        data.cities.forEach(function(city) {
                            var option = document.createElement('option');
                            option.value = city.slug;
                            option.textContent = city.name;
                            select2.appendChild(option);
                        });
                        select2.disabled = false;
                    } else {
                        select2.innerHTML = '<option value="">Города не найдены</option>';
                        select2.disabled = true;
                    }
                })
                .catch(() => {
                    select2.innerHTML = '<option value="">Ошибка загрузки</option>';
                    select2.disabled = true;
                });
        });
    });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('wpdesk_cascade', 'wpdesk_cascade_shortcode');

Шаг 2. Добавление AJAX обработчика

Теперь нужно добавить PHP функцию, которая будет обрабатывать AJAX запрос и возвращать список городов по региону. Используем хук wp_ajax_ и wp_ajax_nopriv_ для обработки запросов от залогиненных и гостей.

function wpdesk_ajax_get_cities() {
    $region = isset($_GET['region']) ? sanitize_text_field($_GET['region']) : '';
    $cities = [];

    if ($region === 'moscow') {
        $cities = [
            ['slug' => 'tverskoy', 'name' => 'Тверской'],
            ['slug' => 'arbat', 'name' => 'Арбат'],
            ['slug' => 'presnenskiy', 'name' => 'Пресненский'],
        ];
    } elseif ($region === 'spb') {
        $cities = [
            ['slug' => 'central', 'name' => 'Центральный'],
            ['slug' => 'admiralteysky', 'name' => 'Адмиралтейский'],
            ['slug' => 'vasileostrovsky', 'name' => 'Василеостровский'],
        ];
    } elseif ($region === 'novosibirsk') {
        $cities = [
            ['slug' => 'leninsky', 'name' => 'Ленинский'],
            ['slug' => 'oktyabrsky', 'name' => 'Октябрьский'],
            ['slug' => 'zaeltsovsky', 'name' => 'Заельцовский'],
        ];
    }

    if ($cities) {
        wp_send_json_success(['cities' => $cities]);
    } else {
        wp_send_json_error();
    }
}
add_action('wp_ajax_wpdesk_get_cities', 'wpdesk_ajax_get_cities');
add_action('wp_ajax_nopriv_wpdesk_get_cities', 'wpdesk_ajax_get_cities');

Шаг 3. Передача ajax_url в JavaScript

Для работы fetch-запроса нам нужно передать в скрипт URL для AJAX. Сделаем это через wp_localize_script. Если вы подключаете внешний JS-файл, то используйте этот метод. В нашем примере с inline-скриптом можно добавить в functions.php:

function wpdesk_enqueue_scripts() {
    wp_enqueue_script('wpdesk-script', false); // Заглушка, если нужен реальный файл
    wp_localize_script('wpdesk-script', 'wpdesk_ajax_object', [
        'ajax_url' => admin_url('admin-ajax.php'),
    ]);
}
add_action('wp_enqueue_scripts', 'wpdesk_enqueue_scripts');

Советы по расширению шорткода и применению

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

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

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

Пример использования с плагином Clearfy Pro

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

Итог

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