В этой статье мы подробно рассмотрим, как в WordPress реализовать автоматическое создание выпадающего списка вариантов, которые зависят от пользовательских данных. Это полезно, когда нужно динамически подгружать опции без перезагрузки страницы, например, для выбора категорий, тегов, или кастомных значений в админке или на фронтенде. Используем пользовательские поля, AJAX и примеры кода с объяснениями.
Зачем нужен динамический выбор из вариантов в WordPress
Часто на сайтах требуется, чтобы список выбора изменялся в зависимости от других параметров. Например, при выборе категории товара автоматически подгружались подкатегории или характеристики. Это улучшает UX, уменьшает количество ошибок и ускоряет работу с формами.
В стандартном WordPress такого функционала нет «из коробки», поэтому приходится создавать свои решения. Сегодня мы разберёмся, как это сделать с помощью AJAX и пользовательских полей (custom fields), чтобы получать варианты без перезагрузки страницы.
Для примера возьмём ситуацию, когда у нас есть кастомный тип записи product с произвольным полем brand, и при выборе бренда на сайте нужно подгрузить варианты моделей этого бренда.
Создание пользовательских полей для хранения вариантов
Для начала создадим два пользовательских поля для кастомного типа product:
- brand — бренд товара
- model — модель товара
Можно использовать плагин Advanced Custom Fields (ACF) или писать своё мета-поле. Пример создания мета-полей через код:
function wprobot_add_meta_boxes() {
add_meta_box('wprobot_brand_box', 'Бренд товара', 'wprobot_brand_meta_box_html', 'product', 'normal', 'default');
add_meta_box('wprobot_model_box', 'Модель товара', 'wprobot_model_meta_box_html', 'product', 'normal', 'default');
}
add_action('add_meta_boxes', 'wprobot_add_meta_boxes');
function wprobot_brand_meta_box_html($post) {
$value = get_post_meta($post->ID, '_wprobot_brand', true);
echo '<input type="text" name="wprobot_brand" value="'.esc_attr($value).'" />';
}
function wprobot_model_meta_box_html($post) {
$value = get_post_meta($post->ID, '_wprobot_model', true);
echo '<input type="text" name="wprobot_model" value="'.esc_attr($value).'" />';
}
function wprobot_save_postdata($post_id) {
if(array_key_exists('wprobot_brand', $_POST)) {
update_post_meta($post_id, '_wprobot_brand', sanitize_text_field($_POST['wprobot_brand']));
}
if(array_key_exists('wprobot_model', $_POST)) {
update_post_meta($post_id, '_wprobot_model', sanitize_text_field($_POST['wprobot_model']));
}
}
add_action('save_post', 'wprobot_save_postdata');Так мы добавили два поля для ввода бренда и модели в админке.
Вывод динамического выпадающего списка на фронтенде с AJAX
Теперь создадим форму для выбора бренда и автоматической подгрузки моделей этого бренда без перезагрузки страницы. Для этого:
- Выведем выпадающий список брендов, собранных из всех записей типа
product - При выборе бренда через JavaScript отправим AJAX-запрос на сервер
- Сервер вернёт список моделей для выбранного бренда
- Мы обновим второй выпадающий список с моделями
Вывод списка брендов
function wprobot_get_brands() {
global $wpdb;
$query = "SELECT DISTINCT meta_value FROM {$wpdb->postmeta} WHERE meta_key = '_wprobot_brand'";
$brands = $wpdb->get_col($query);
return $brands;
}
function wprobot_render_brand_selector() {
$brands = wprobot_get_brands();
echo '<select id="wprobot_brand_select" name="brand">';
echo '<option value="">Выберите бренд</option>';
foreach ($brands as $brand) {
echo '<option value="'.esc_attr($brand).'">'.esc_html($brand).'</option>';
}
echo '</select>';
echo '<select id="wprobot_model_select" name="model"><option value="">Выберите модель</option></select>';
}
// Используйте шорткод для вывода
add_shortcode('wprobot_brand_model_selector', 'wprobot_render_brand_selector');AJAX обработчик для получения моделей выбранного бренда
function wprobot_ajax_get_models() {
if (!isset($_POST['brand'])) {
wp_send_json_error('Не указан бренд');
}
$brand = sanitize_text_field($_POST['brand']);
$args = [
'post_type' => 'product',
'meta_query' => [
[
'key' => '_wprobot_brand',
'value' => $brand,
'compare' => '=',
],
],
'posts_per_page' => -1
];
$query = new WP_Query($args);
$models = [];
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$model = get_post_meta(get_the_ID(), '_wprobot_model', true);
if ($model) {
$models[] = $model;
}
}
wp_reset_postdata();
}
$models = array_unique($models);
wp_send_json_success($models);
}
add_action('wp_ajax_wprobot_get_models', 'wprobot_ajax_get_models');
add_action('wp_ajax_nopriv_wprobot_get_models', 'wprobot_ajax_get_models');JavaScript для отправки AJAX-запроса и обновления списка моделей
function wprobot_enqueue_scripts() {
wp_enqueue_script('wprobot-script', get_stylesheet_directory_uri() . '/wprobot.js', ['jquery'], null, true);
wp_localize_script('wprobot-script', 'wprobotAjax', [
'ajax_url' => admin_url('admin-ajax.php')
]);
}
add_action('wp_enqueue_scripts', 'wprobot_enqueue_scripts');В файл wprobot.js добавим следующий код:
jQuery(document).ready(function($) {
$('#wprobot_brand_select').on('change', function() {
var brand = $(this).val();
if (!brand) {
$('#wprobot_model_select').html('<option value="">Выберите модель</option>');
return;
}
$.ajax({
url: wprobotAjax.ajax_url,
type: 'POST',
data: {
action: 'wprobot_get_models',
brand: brand
},
success: function(response) {
if(response.success) {
var options = '<option value="">Выберите модель</option>';
$.each(response.data, function(index, model) {
options += '<option value="' + model + '">' + model + '</option>';
});
$('#wprobot_model_select').html(options);
} else {
$('#wprobot_model_select').html('<option value="">Модели не найдены</option>');
}
},
error: function() {
$('#wprobot_model_select').html('<option value="">Ошибка загрузки</option>');
}
});
});
});Дополнительные улучшения и безопасность
Для безопасности следует добавить проверку nonce в AJAX-запросах, чтобы защититься от CSRF. Это делается с помощью wp_create_nonce() и проверки в обработчике.
Можно расширить функционал, добавив кэширование результатов для уменьшения нагрузки на базу. Также удобно интегрировать этот механизм с плагином Clearfy Pro для оптимизации AJAX-запросов и безопасности.
Если вы используете плагин WPGPT от WPShop, можно дополнительно автоматизировать заполнение моделей через AI, если ввести бренд, то GPT-система предложит варианты моделей.
Выводы и рекомендации
Таким образом, мы создали динамический выбор вариантов в WordPress с помощью пользовательских полей и AJAX. Это простой и эффективный способ улучшить интерактивность сайта без перезагрузок. Пример легко адаптируется под любые типы данных и может быть использован как на фронтенде, так и в админке.
Для удобства пользователей и разработчиков рекомендуем использовать шорткод [wprobot_brand_model_selector] для вывода формы выбора на страницах или в шаблонах.
Подробности и дополнительные плагины для автоматизации и оптимизации можно найти на wpshop.ru.