Описание
Поле Icon Picker позволяет легко выбрать Dashicon, изображение из Библиотеки медиа или URL для изображения либо SVG.
Скриншоты
Журнал изменений
- Добавлено в версии 6.3.0
Настройки
Вкладки
Указывает, какие вкладки должны отображаться для этого экземпляра Icon Picker. Выберите из Dashicons, Библиотеки медиа и URL.Формат возврата
Указывает формат возвращаемых данных. Выберите String или Array.
Если выбран String, для Dashicons это будет строка класса dashicon, для Библиотеки медиа — URL вложения, а для URL — значение URL.
Использование в шаблоне
Поле Icon Picker возвращает массив или строковое значение, в зависимости от Формат возврата, выбранного при создании поля.
Если вы выбрали Array, вы получите массив с 2 ключами. Первый ключ — type, а второй — value.
Ключ type указывает тип выбранной иконки и будет одним из следующих:
dashiconsmedia_libraryurl
Ключ value будет соответствовать type, то есть dashicon дает строку класса dashicon в качестве значения, а media_library и url — URL в качестве значения.
Если вы выбрали String, вы получите строку в ответе, но значение строки по-прежнему зависит от типа иконки, выбранной в пикере:
Dashicon: Значением будет строка класса dashicon.
Библиотека медиа: Значением будет URL изображения.
URL: Значением будет URL изображения.
Чаще всего вы можете выбрать String в качестве типа возврата, если при настройке поля Icon Picker для вашей группы полей вы также отключили все вкладки, кроме одной. В противном случае, скорее всего, вам лучше использовать Array, чтобы вы могли обрабатывать каждый тип иконки.
Ваш шаблон вывода можно настроить так, чтобы он обрабатывал любой тип иконки, а также оба формата возврата — массив и строку:
<?php
$icon = get_field('my_icon');
// Обработка, если тип возврата — строка.
if ( is_string( $icon ) ) {
// Если выбран тип Dashicon, значением $icon будет строка класса dashicon.
// Если выбран тип изображения из Библиотеки медиа, значением $icon будет URL изображения.
// Если выбран тип URL, значением $icon будет URL изображения.
echo esc_html( $icon );
} else {
// Обработка, если тип возврата — массив.
// Если выбран тип Dashicon, выведите div с классом dashicon.
if ( 'dashicons' === $icon['type'] ) {
?><div class="<?php echo esc_attr( $icon['value'] ); ?>”></div><?php
}
// Если выбран тип изображения из Библиотеки медиа, используйте ID вложения, чтобы получить и вывести изображение.
if ( 'media_library' === $icon['type'] ) {
$attachment_id = $icon['value'];
$size = 'full'; // (thumbnail, medium, large, full или произвольный размер)
$image_html = wp_get_attachment_image( $attachment_id, $size );
echo wp_kses_post( $image_html );
}
// Если выбран тип URL, выведите тег img с этим URL.
if ( 'url' === $icon['type'] ) {
$url = $icon['value'];
?><img src="<?php echo esc_url( $url ); ?>" alt=""><?php
}
}
Обратите внимание, что Dashicons обычно используются как имена классов на HTML-элементе и обычно также полагаются на этот CSS-стиль. ACF не подключает этот CSS-стиль, поэтому если вы на него полагаетесь, вам нужно будет подключить его самостоятельно.
Добавление пользовательских вкладок
Поле Icon Picker включает фильтры и action hooks, которые можно использовать для добавления пользовательских вкладок. Ниже приведен базовый пример того, как можно добавить новую вкладку «Cards», дополненную пользовательским набором иконок, загружаемых из PNG-файлов, сохраненных в вашей теме.
Чтобы добавить новую вкладку, сначала определите ее через фильтр acf/fields/icon_picker/tabs:
<?php
function add_cards_icon_picker_tab( array $tabs ): array {
$tabs['cards'] = 'Карты';
return $tabs;
}
add_filter( 'acf/fields/icon_picker/tabs', 'add_cards_icon_picker_tab' );
Это добавит новую пустую вкладку в поле Icon Picker. Затем эта пустая вкладка будет искать иконки, переданные через фильтр acf/fields/icon_picker/{$tab_name}/icons, где {$tab_name} — это ключ вкладки, переданный в фильтр выше.
Вы можете предоставить иконки для только что созданной вкладки так:
function add_cards_icons( array $icons ): array {
// Замените на базовый URL-путь к вашим пользовательским иконкам.
$base_url = get_template_directory_uri() . '/cards/';
return array(
array(
'url' => $base_url . 'ace-of-spades-playing-card.png', // URL иконки.
'key' => 'ace-of-spades', // Сохраняется как значение в поле Icon Picker.
'label' => 'Туз пик', // Название карты, используемое в поиске.
),
array(
'url' => $base_url . 'eight-of-clubs-playing-card.png',
'key' => 'eight-of-clubs',
'label' => 'Восьмерка треф',
),
array(
'url' => $base_url . 'jack-of-hearts-playing-card.png',
'key' => 'jack-of-hearts',
'label' => 'Валет червей',
),
);
}
add_filter( 'acf/fields/icon_picker/cards/icons', 'add_cards_icons' );
Обновлено: 31.05.2026