В современных проектах на WordPress часто возникает необходимость создавать формы с вариантами выбора, которые подгружаются динамически из базы данных или других источников. Это особенно актуально, когда количество вариантов постоянно меняется, и поддерживать их вручную неудобно. В этой статье разберем, как реализовать динамические варианты в формах WordPress, используя как нативные методы, так и популярные плагины, с примерами кода.
Почему важно использовать динамические варианты в формах WordPress
Статичные варианты в формах — это просто, но этот подход не масштабируется. Если у вас, например, форма заказа, где нужно выбрать товар или категорию, жестко прописывать варианты — значит, каждый раз при изменении ассортимента придется редактировать форму вручную.
Динамические варианты позволяют:
- Подгружать актуальные данные из базы или API автоматически;
- Уменьшить количество ошибок при обновлении;
- Облегчить администрирование;
- Создавать более гибкие и умные формы.
Динамические варианты с помощью пользовательского кода
Рассмотрим пример создания динамического списка выбора (select) на основе записей кастомного типа "product". Для этого будем использовать WP_Query и хук wp_box_dynamic_select_options для генерации списка.
Пример функции вывода вариантов
function wp_box_get_dynamic_product_options() {
$args = [
'post_type' => 'product',
'posts_per_page' => -1,
'orderby' => 'title',
'order' => 'ASC'
];
$query = new WP_Query($args);
$options = '';
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$options .= '<option value="' . get_the_ID() . '">' . get_the_title() . '</option>';
}
wp_reset_postdata();
}
return $options;
}Далее можно вывести этот список в форме:
<select name="product_id" id="product_id">
<option value="">Выберите товар</option>
<?php echo wp_box_get_dynamic_product_options(); ?>
</select>Этот способ подойдет, если вы создаете форму вручную в шаблоне или шорткоде.
Интеграция динамических вариантов в популярные формы с помощью плагинов
Если вы используете конструкторы форм, например, Contact Form 7, Gravity Forms или WPForms, то там тоже можно реализовать динамические варианты.
Contact Form 7: добавление динамических опций
Contact Form 7 позволяет создавать свои теги с помощью фильтра wpcf7_form_elements и хука для генерации опций. Вот пример создания динамического select с товарами:
add_filter('wpcf7_form_elements', 'wp_box_cf7_dynamic_select');
function wp_box_cf7_dynamic_select($form) {
if (strpos($form, 'dynamic-product-select') !== false) {
$options = wp_box_get_dynamic_product_options();
$select_html = '<select name="product_id"><option value="">Выберите товар</option>' . $options . '</select>';
$form = str_replace('dynamic-product-select', $select_html, $form);
}
return $form;
}В форме просто вставьте тег [dynamic-product-select], и он заменится на динамический список.
Gravity Forms: использование фильтра для динамического наполнения
В Gravity Forms можно использовать фильтр gform_pre_render для заполнения поля выбора динамическими значениями:
add_filter('gform_pre_render_1', 'wp_box_populate_select'); // 1 - ID формы
add_filter('gform_pre_validation_1', 'wp_box_populate_select');
add_filter('gform_pre_submission_filter_1', 'wp_box_populate_select');
add_filter('gform_admin_pre_render_1', 'wp_box_populate_select');
function wp_box_populate_select($form) {
foreach ($form['fields'] as &$field) {
if ($field->type != 'select' || strpos($field->cssClass, 'populate-products') === false) {
continue;
}
$args = [
'post_type' => 'product',
'posts_per_page' => -1,
'orderby' => 'title',
'order' => 'ASC'
];
$products = get_posts($args);
$choices = [];
foreach ($products as $product) {
$choices[] = ['text' => $product->post_title, 'value' => $product->ID];
}
$field->choices = $choices;
}
return $form;
}В настройках поля select добавьте CSS класс populate-products, чтобы фильтр его обработал.
Использование плагина Clearfy Pro для управления динамическими формами
Плагин Clearfy Pro из ассортимента WPSHOP позволяет существенно упростить оптимизацию и управление функционалом WordPress, включая формы. С помощью его модулей можно отключать ненужные скрипты, что ускорит загрузку динамических форм и улучшит UX.
Преимущества Clearfy Pro в работе с динамическими формами:
- Оптимизация загрузки ресурсов форм;
- Управление автозаполнением и кешированием;
- Поддержка динамических элементов;
- Совместимость с популярными конструкторами форм.
Советы и рекомендации по работе с динамическими вариантами в WordPress
При реализации динамических вариантов в формах учитывайте следующие моменты:
- Кэширование. Если данные меняются нечасто, стоит использовать transient API или другой механизм кеширования, чтобы не нагружать базу запросами на каждом показе формы.
- Безопасность. Всегда фильтруйте и экранируйте данные, особенно если они используются для формирования HTML.
- Пользовательский опыт. Добавляйте placeholder, подсказки и валидацию для упрощения выбора пользователем.
- Совместимость. Проверяйте, что динамические варианты корректно работают с плагинами кэширования и оптимизации.
Пример кеширования списка
function wp_box_get_dynamic_product_options_cached() {
$options = get_transient('wp_box_product_options');
if ($options === false) {
$options = wp_box_get_dynamic_product_options();
set_transient('wp_box_product_options', $options, HOUR_IN_SECONDS);
}
return $options;
}Используйте эту функцию вместо wp_box_get_dynamic_product_options(), чтобы снизить нагрузку на базу.
Заключение
Динамические варианты в формах WordPress — мощный инструмент для создания гибких и удобных интерфейсов. Реализовать их можно как на чистом коде, так и с помощью популярных плагинов. Обязательно учитывайте производительность и безопасность при работе с динамическими данными. Для улучшения общего состояния сайта и управления функционалом рекомендуем обратить внимание на Clearfy Pro — этот плагин поможет оптимизировать работу с формами и не только.