Как использовать выпадающие списки в WordPress своими руками: примеры и код

Автор: Наталья Соколова | Опубликовано: 14.04.2026

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

Что такое выпадающий список и где он применяется в WordPress

Выпадающий список — это HTML-элемент <select>, который содержит набор <option>. Пользователь открывает список и выбирает один или несколько вариантов. В WordPress они используются:

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

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

Создание простого выпадающего списка в шаблоне WordPress

Самый простой способ — написать HTML прямо в шаблоне, например в файле page.php или в кастомном шаблоне:

<select name="wpzoom-simple-select" id="wpzoom-simple-select">
  <option value="1">Опция 1</option>
  <option value="2">Опция 2</option>
  <option value="3">Опция 3</option>
</select>

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

Пример формы с обработкой выбора

Добавим форму в шаблон:

<form method="post" action="">
  <select name="wpzoom_select">
    <option value="apple">Яблоко</option>
    <option value="banana">Банан</option>
    <option value="cherry">Вишня</option>
  </select>
  <input type="submit" value="Выбрать" />
</form>

В файле functions.php темы или в плагине можно добавить обработчик:

add_action('init', 'wpzoom_handle_select_form');
function wpzoom_handle_select_form() {
  if (isset($_POST['wpzoom_select'])) {
    $selected = sanitize_text_field($_POST['wpzoom_select']);
    // Здесь можно сохранить в сессию, в опции или выполнить другое действие
    // Например, записать в сессию:
    if (!session_id()) {
      session_start();
    }
    $_SESSION['wpzoom_selected_option'] = $selected;
  }
}

Динамические выпадающие списки: получение опций из базы WordPress

Статичные значения подходят не всегда. Часто нужно вывести список категорий, авторов, или постов. Рассмотрим пример динамического выпадающего списка категорий.

Вывод категорий в выпадающий список

$categories = get_categories();
echo '<select name="wpzoom_category">';
foreach ($categories as $category) {
  echo '<option value="' . esc_attr($category->term_id) . '">' . esc_html($category->name) . '</option>';
}
echo '</select>';

Этот код можно использовать в любом месте темы или плагина, где нужен выбор категории.

Пример: фильтр постов по выбранной категории с помощью выпадающего списка и AJAX

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

1. HTML и JavaScript (добавьте в шаблон или отдельный файл JS):

<select id="wpzoom_filter_category" name="category">
  <option value="0">Все категории</option>
  <?php
  $cats = get_categories();
  foreach ($cats as $cat) {
    echo '<option value="' . $cat->term_id . '">' . $cat->name . '</option>';
  }
  ?>
</select>

<div id="wpzoom_posts_list"></div>

<script type="text/javascript">
jQuery(document).ready(function($){
  function wpzoom_load_posts(cat_id) {
    $.ajax({
      url: wpzoom_ajax_object.ajax_url,
      type: 'POST',
      data: {
        action: 'wpzoom_filter_posts',
        category: cat_id
      },
      success: function(response) {
        $('#wpzoom_posts_list').html(response);
      }
    });
  }

  $('#wpzoom_filter_category').change(function() {
    var cat = $(this).val();
    wpzoom_load_posts(cat);
  });

  // Загрузим все посты при загрузке страницы
  wpzoom_load_posts(0);
});
</script>

2. PHP обработчик AJAX в functions.php или плагине:

add_action('wp_enqueue_scripts', 'wpzoom_enqueue_ajax_script');
function wpzoom_enqueue_ajax_script() {
  wp_enqueue_script('jquery');
  wp_localize_script('jquery', 'wpzoom_ajax_object', array(
    'ajax_url' => admin_url('admin-ajax.php'),
  ));
}

add_action('wp_ajax_wpzoom_filter_posts', 'wpzoom_filter_posts_callback');
add_action('wp_ajax_nopriv_wpzoom_filter_posts', 'wpzoom_filter_posts_callback');

function wpzoom_filter_posts_callback() {
  $cat_id = isset($_POST['category']) ? intval($_POST['category']) : 0;
  $args = array(
    'post_type' => 'post',
    'posts_per_page' => 10,
  );
  if ($cat_id) {
    $args['cat'] = $cat_id;
  }
  $query = new WP_Query($args);

  if ($query->have_posts()) {
    while ($query->have_posts()) {
      $query->the_post();
      echo '<h3><a href="' . get_permalink() . '">' . get_the_title() . '</a></h3>';
      echo '<p>' . get_the_excerpt() . '</p>';
    }
  } else {
    echo '<p>Посты не найдены.</p>';
  }
  wp_reset_postdata();
  wp_die();
}

Использование плагинов WPShop для создания и расширения выпадающих списков

Если вы хотите расширить возможности форм с выпадающими списками, обратите внимание на плагин My Popup из каталога WPShop. Он позволяет создавать кастомные всплывающие окна с формами, в том числе с выпадающими списками, и настраивать логику показа по действиям пользователя.

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

Советы по безопасности и оптимизации при работе с выпадающими списками

При работе с выпадающими списками важно помнить следующие моменты:

Всегда используйте функции sanitize_text_field(), esc_html() и esc_attr() для очистки и вывода данных. Это защитит от XSS и других атак.
Если получаете данные из пользовательского ввода, валидируйте их строго по типу (например, intval() для чисел).
Для больших списков используйте AJAX-загрузку, чтобы не перегружать страницу.
Кешируйте результаты запросов, если данные не меняются часто, чтобы снизить нагрузку на сервер.
Используйте nonce-поля для защиты форм от CSRF-атак.

Создание кастомного выпадающего списка с метаполями пользователя

Рассмотрим пример, как вывести выпадающий список с данными из метаполей пользователей. Допустим, у пользователей есть метаполе favorite_color, и нужно его отображать в форме.

$users = get_users(array('meta_key' => 'favorite_color'));
echo '<select name="wpzoom_user_color">';
foreach ($users as $user) {
  $color = get_user_meta($user->ID, 'favorite_color', true);
  if (!empty($color)) {
    echo '<option value="' . esc_attr($color) . '">' . esc_html($user->display_name) . ' - ' . esc_html($color) . '</option>';
  }
}
echo '</select>';

Такой список может использоваться для выбора пользователя по его любимому цвету и вывода информации.

Заключение

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