Поле Range в ACF PRO для WordPress: настройка, вывод и практические сценарии

13.07.2026 - 12:41

160

Поле Range (ползунок) в ACF (Advanced Custom Fields) позволяет задавать значение в границах min/max с визуальным контролем, что удобнее ручного ввода там, где важна наглядность и ограничение диапазона. Оно выгодно тем, что снижает ошибки ввода, даёт понятный UI и легко интегрируется в шаблоны и запросы WordPress.

Поле Range зачем оно нужно

Типовые кейсы использования:

Оценка сложности материала (1–5) — редактор выставляет «уровень сложности» статьи ползунком, на фронтенде выводится бейдж «Сложно / Средне».
Настройка порога срабатывания логики (например, «показывать блок, если цена > X») — значение хранится как число, но задаётся через удобный интерфейс.
Указание рекомендуемого времени чтения (минуты) — ползунок от 1 до 60, значение используется в Schema.org и бейдже «~15 минут».
Задание коэффициента для расчётов (скидка, множитель, приоритет) — чистое число в базе, удобный ввод в админке.

Преимущества поля Range:

Наглядность для редактора: ползунок сразу показывает диапазон и текущее значение.
Жёсткие ограничения min/max: невозможно задать недопустимое значение.
Валидация на уровне поля: в базу попадает только число (float/int), без риска получить строку.
Совместимость с сортировкой и фильтрацией: значение можно использовать в meta_query и orderby.
Простота интеграции: работает с get_field(), REST API, Gutenberg, шаблонами тем.

Как настроить поле Range в ACF

В поле Имя поля (Field Name) укажите короткое имя латиницей без пробелов, например article_difficulty.
В поле Метка (Label) задайте понятное название для редактора: «Сложность статьи».
В блоке Настройки (Settings) задайте:
1. Минимальное значение (Minimum) — например, 1.
2. Максимальное значение (Maximum) — например, 5.
3. Шаг (Step) — 1 для целых, 0.5 для половинных значений.
4. Единицы измерения (Unit) — опционально, например «баллов» (отображается рядом с ползунком).

Когда выбирать Number (и почему это выгодно)

Выбирай Number, если:

Значение вводится редко и точно. Например, «ID внешнего сервиса», «фиксированный коэффициент», «порядковый номер».
Редактор знает точное число. Нет смысла в ползунке, если всегда вводят «1200» или «3.14».
Требуется ввод дробных значений с высокой точностью. Ползунки с шагом 0.01 неудобны для тонкой настройки.
Нужно хранить большие числа. Ползунок плохо масштабируется на диапазоны вроде 1–100 000.

Когда выбирать Range (и почему это лучше)

Выбирай Range, если:

Нужен визуальный контроль. Например, «приоритет вывода» (1–5), «сложность» (1–10), «время чтения» (1–60 минут).
Важно ограничить диапазон. Ползунок не даст поставить «999» там, где максимум 5.
Редактор — не технический специалист. Ползунок проще и быстрее, чем печатать цифры.
Есть понятные единицы измерения. В настройках Range можно указать «баллов», «минут», «%» — это улучшает UX.

Практические сценарии использования

Кейс 1. Бейдж «Сложность» на карточке статьи

Задача: показать уровень сложности статьи в виде текста и цвета, используя значение из поля Range.

Имя поля: article_difficulty

<?php $difficulty = get_field('article_difficulty') ?>
<?php if(is_numeric($difficulty)): ?>
  // Определяем класс и текст по значению
  <?php if($difficulty <= 2): ?>
    <?php 
      $badge_class = 'easy';
      $badge_text  = 'Легко'; 
    ?>
  <?php elseif($difficulty <= 4): ?>
    <?php 
      $badge_class = 'medium';
      $badge_text  = 'Средне'; 
    ?>
  <?php else: ?>
    <?php 
      $badge_class = 'hard';
      $badge_text  = 'Сложно'; 
    ?>
  <?php endif ?>
  <span class="difficulty-badge <?php echo esc_attr($badge_class) ?>">
    <?php echo esc_html($badge_text) ?> (<?php echo absint($difficulty) ?> баллов)
  </span>
<?php endif ?>

<?php $difficulty = get_field('article_difficulty') ?>
<?php if(is_numeric($difficulty)): ?>
  // Определяем класс и текст по значению
  <?php if($difficulty <= 2): ?>
    <?php 
      $badge_class = 'easy';
      $badge_text  = 'Легко'; 
    ?>
  <?php elseif($difficulty <= 4): ?>
    <?php 
      $badge_class = 'medium';
      $badge_text  = 'Средне'; 
    ?>
  <?php else: ?>
    <?php 
      $badge_class = 'hard';
      $badge_text  = 'Сложно'; 
    ?>
  <?php endif ?>
  <span class="difficulty-badge <?php echo esc_attr($badge_class) ?>">
    <?php echo esc_html($badge_text) ?> (<?php echo absint($difficulty) ?> баллов)
  </span>
<?php endif ?>

Кейс 2. Рекомендуемое время чтения в бейдже

Задача: вывести бейдж «~12 минут» на основе значения из Range (минуты).

Имя поля: reading_time_min

<?php $time = get_field('reading_time_min') ?>
<?php if(is_numeric($time) && $time > 0): ?>
  // Безопасное целое число для вывода
  <?php $time_int = absint($time) ?>
  <span class="reading-time-badge">
    <?php esc_html_e('~' . $time_int . ' минут', 'superkapusta') ?>
  </span>
<?php endif ?>

<?php $time = get_field('reading_time_min') ?>
<?php if(is_numeric($time) && $time > 0): ?>
  // Безопасное целое число для вывода
  <?php $time_int = absint($time) ?>
  <span class="reading-time-badge">
    <?php esc_html_e('~' . $time_int . ' минут', 'superkapusta') ?>
  </span>
<?php endif ?>

Кейс 3. Фильтрация услуг по коэффициенту приоритета

Задача: вывести услуги, у которых поле Range «приоритет» попадает в диапазон 3–5, отсортировать по убыванию.

Имя поля: service_priority

<?php
  $args = [
    'post_type'      => 'service',
    'posts_per_page' => -1,
    'meta_query'     => [
      [
        'key'     => 'service_priority',
        'value'   => [3, 5],
        'compare' => 'BETWEEN',
        'type'    => 'NUMERIC', // важно для корректного сравнения
      ],
    ],
    'orderby' => 'meta_value_num',
    'order'   => 'DESC',
  ];
  $query = new WP_Query($args);
?>
<?php if($query->have_posts()): ?>
  <?php while ($query->have_posts()): $query->the_post() ?>
    <?php the_title('<h3>', '</h3>') ?>
  <?php endwhile ?>
  <?php wp_reset_postdata() ?>
<?php endif ?>

<?php
  $args = [
    'post_type'      => 'service',
    'posts_per_page' => -1,
    'meta_query'     => [
      [
        'key'     => 'service_priority',
        'value'   => [3, 5],
        'compare' => 'BETWEEN',
        'type'    => 'NUMERIC', // важно для корректного сравнения
      ],
    ],
    'orderby' => 'meta_value_num',
    'order'   => 'DESC',
  ];
  $query = new WP_Query($args);
?>
<?php if($query->have_posts()): ?>
  <?php while ($query->have_posts()): $query->the_post() ?>
    <?php the_title('<h3>', '</h3>') ?>
  <?php endwhile ?>
  <?php wp_reset_postdata() ?>
<?php endif ?>

Важные нюансы и лучшие практики

Всегда проверяйте is_numeric() перед использованием значения, даже для Range — это защита от неожиданных данных.
Используйте absint() или floatval() в зависимости от контекста, чтобы гарантировать нужный тип.
Для сортировки и фильтрации всегда указывайте 'type' => 'NUMERIC' в meta_query, иначе сравнение будет лексикографическим.
Не храните форматированные строки (например, «5 баллов») в этом поле — только чистое число.
Применяйте esc_* функции при выводе в HTML — это предотвращает XSS.
Задавайте min/max/step в настройках поля, чтобы ограничить возможные значения и упростить валидацию.
Избегайте сложных вычислений на фронтенде: всю логику делайте на PHP, чтобы она была предсказуемой и безопасной.

Продвинутые приёмы

Приём 1. Динамический CSS на основе значения Range

Когда применять: если нужно менять цвет бейджа или ширину прогресс‑бара в зависимости от значения.

<?php $val = get_field('article_difficulty') ?>
<?php if(is_numeric($val)): ?>
  <?php $percent = min(max(($val - 1) * 25, 0), 100) ?> // конвертируем 1–5 в 0–100%
  <style>
      .progress-bar {
        width: <?php echo absint($percent) ?>%;
      }
  </style>
  <div class="progress-bar"></div>
<?php endif ?>

<?php $val = get_field('article_difficulty') ?>
<?php if(is_numeric($val)): ?>
  <?php $percent = min(max(($val - 1) * 25, 0), 100) ?> // конвертируем 1–5 в 0–100%
  <style>
      .progress-bar {
        width: <?php echo absint($percent) ?>%;
      }
  </style>
  <div class="progress-bar"></div>
<?php endif ?>

Приём 2. Группировка постов по диапазонам значений

Когда применять: чтобы вывести посты в секциях «Лёгкие», «Средние», «Сложные» на одной странице.

<?php
  $groups = [
    ['label' => 'Лёгкие',   'min' => 1, 'max' => 2],
    ['label' => 'Средние',  'min' => 3, 'max' => 4],
    ['label' => 'Сложные',  'min' => 5, 'max' => 5],
  ];
?>
<?php foreach($groups as $group): ?> 
  <?php
    $args = [
      'post_type'  => 'post',
      'meta_query' => [
        [
          'key'     => 'article_difficulty',
          'value'   => [$group['min'], $group['max']],
          'compare' => 'BETWEEN',
          'type'    => 'NUMERIC',
        ],
      ],
      'posts_per_page' => 5,
    ];
    $query = new WP_Query($args);
  ?>   
  <?php if($query->have_posts()): ?>
    <h3><?php echo esc_html($group['label']) ?></h3>
    <?php while($query->have_posts()): $query->the_post() ?>
        <p><a href="<?php the_permalink() ?>"><?php the_title() ?></a></p>
    <?php endwhile ?> 
    <?php wp_reset_postdata() ?>
   <?php endif ?>
<?php endforeach ?>

<?php
  $groups = [
    ['label' => 'Лёгкие',   'min' => 1, 'max' => 2],
    ['label' => 'Средние',  'min' => 3, 'max' => 4],
    ['label' => 'Сложные',  'min' => 5, 'max' => 5],
  ];
?>
<?php foreach($groups as $group): ?> 
  <?php
    $args = [
      'post_type'  => 'post',
      'meta_query' => [
        [
          'key'     => 'article_difficulty',
          'value'   => [$group['min'], $group['max']],
          'compare' => 'BETWEEN',
          'type'    => 'NUMERIC',
        ],
      ],
      'posts_per_page' => 5,
    ];
    $query = new WP_Query($args);
  ?>   
  <?php if($query->have_posts()): ?>
    <h3><?php echo esc_html($group['label']) ?></h3>
    <?php while($query->have_posts()): $query->the_post() ?>
        <p><a href="<?php the_permalink() ?>"><?php the_title() ?></a></p>
    <?php endwhile ?> 
    <?php wp_reset_postdata() ?>
   <?php endif ?>
<?php endforeach ?>

Частые ошибки и как их избежать

Ошибка	Как исправить
Вывод значения без проверки `is_numeric()`	Всегда оборачивайте в `if(is_numeric($value))`
Сортировка по `meta_value` вместо `meta_value_num`	Используйте `orderby => 'meta_value_num'` и `'type' => 'NUMERIC'`
Хранение текста в поле Range	Поле должно содержать только число; форматирование делайте в шаблоне
Отсутствие min/max в настройках поля	Настройте границы и шаг в интерфейсе ACF
Прямой вывод в HTML без `esc_*`	Применяйте `esc_attr()`, `esc_html()` для безопасности

Заключение

Поле Range WordPress в ACF — это удобный и безопасный способ работы с числовыми диапазонами: от бейджей и микроразметки до фильтрации и сортировки. Его сила — в сочетании наглядного интерфейса для редактора и строгой типизации данных для разработчика. В следующих статьях разберём другие типы полей: URL, Repeater, их комбинации для сложных шаблонов. Подписывайтесь на блог superkapusta.ru и наш канал в Дзене, чтобы не пропустить новые гайды по WordPress и ACF