ACF Icons Shortcode

Плагин для WordPress, который добавляет шорткод для вывода иконок комплектации из полей ACF с поддержкой кастомных размеров и ориентации.

📋 Описание

Плагин позволяет легко выводить иконки комплектации (например, для отелей, номеров, услуг) из поля ACF типа Checkbox. Каждая иконка отображается с всплывающей подсказкой или с подписью к иконке.

Основные возможности:

• ✅ Вывод иконок из поля ACF типа Checkbox
• ✅ Поддержка кастомных размеров иконок
• ✅ Горизонтальная и вертикальная ориентация
• ✅ Два режима отображения: всплывающие подсказки или подписи к иконкам
• ✅ Настройка позиции подписи (сверху/снизу)
• ✅ Всплывающие подсказки с описанием
• ✅ Интеграция с WPBakery Page Builder
• ✅ Использование через шорткод
• ✅ Адаптивный дизайн
• ✅ Простая настройка
• ✅ Стили вынесены в отдельный файл (оптимизация)

🚀 Установка

Способ 1: Через админку WordPress

1. Скачайте архив с плагином
2. Зайдите в Плагины → Добавить новый → Загрузить плагин
3. Выберите архив и нажмите Установить
4. Активируйте плагин

Способ 2: Вручную через FTP

1. Скачайте файлы плагина
2. Создайте папку /wp-content/plugins/acf-icons-shortcode/
3. Загрузите все файлы плагина в эту папку
4. Активируйте плагин в админке WordPress

📁 Структура плагина

acf-icons-shortcode/
├── acf-icons-shortcode.php       # Основной файл плагина
├── css/
│   └── acf-icons-shortcode.css   # Стили плагина
├── readme.md                     # Документация
└── LICENSE                       # Лицензия (опционально)

⚙️ Настройка

1. Создание поля ACF

1. Зайдите в Пользовательские поля → Добавить новое
2. Создайте группу полей (например, "Комплектация номера")
3. Добавьте поле типа Checkbox:
   • Имя поля: komplekt (или другое)
   • Return Value: Both (array)
   • Choices (значения):

     /wp-content/uploads/icons/tv.png : Телевизор
     /wp-content/uploads/icons/tea.png : Чайник
     /wp-content/uploads/icons/froze.png : Холодильник
     /wp-content/uploads/icons/wifi.png : WiFi
     /wp-content/uploads/icons/hairdryer.png : Фен

2. Подготовка иконок

1. Создайте папку /wp-content/uploads/icons/ на вашем сервере
2. Загрузите туда PNG-иконки с прозрачным фоном
3. Имена файлов должны соответствовать значениям в поле ACF

Рекомендуемые параметры иконок:

• Формат: PNG с прозрачным фоном
• Размер: 64×64 или 128×128 пикселей (масштабируется)
• Оптимизация: сжатие через TinyPNG

📖 Использование

Через элемент WPBakery

1. Откройте редактор страницы в WPBakery
2. Добавьте новый элемент "Иконки комплектации ACF"
3. Настройте параметры:
   • Имя поля ACF: komplekt (или ваше имя поля)
   • Ориентация: Горизонтальная / Вертикальная
   • Режим отображения: Всплывающие подсказки / Подпись к иконке
   • Позиция подписи: Снизу / Сверху (только для режима "Подпись к иконке")
   • Размер иконок (px): 28 (или другое значение)

Через шорткод

Вставьте шорткод в любой элемент текста или через редактор:

[acf_icons field="komplekt" layout="horizontal" size="28"]

Параметры шорткода:

Параметр	Описание	Значение по умолчанию	Примеры
field	Имя поля ACF	komplekt	komplekt, amenities
layout	Ориентация вывода	horizontal	horizontal, vertical
size	Размер иконок в пикселях	28	24, 32, 40, 48
display	Режим отображения	tooltip	tooltip (подсказки), label (подписи)
label_position	Позиция подписи	bottom	top (сверху), bottom (снизу)

Примеры использования:

<!-- Горизонтальный вывод, размер 32px -->
[acf_icons field="komplekt" layout="horizontal" size="32"]

<!-- Вертикальный вывод, размер 40px -->
[acf_icons field="komplekt" layout="vertical" size="40"]

<!-- С другим именем поля -->
[acf_icons field="amenities" layout="horizontal" size="28"]

<!-- Режим с подписями снизу -->
[acf_icons field="komplekt" layout="horizontal" display="label" label_position="bottom"]

<!-- Режим с подписями сверху, вертикальный вывод -->
[acf_icons field="komplekt" layout="vertical" display="label" label_position="top"]

🎨 Кастомизация

Настройка режима отображения

В шорткоде:

<!-- Всплывающие подсказки (по умолчанию) -->
[acf_icons field="komplekt" layout="horizontal" display="tooltip"]

<!-- Подписи снизу -->
[acf_icons field="komplekt" layout="horizontal" display="label" label_position="bottom"]

<!-- Подписи сверху -->
[acf_icons field="komplekt" layout="vertical" display="label" label_position="top"]

В WPBakery Page Builder:

1. Добавьте элемент "Иконки комплектации ACF"
2. В настройках выберите:
   • Режим отображения: Всплывающие подсказки или Подпись к иконке
   • Позиция подписи: Снизу или Сверху (активно только для режима с подписью)

Изменение стилей

Вы можете добавить свои стили в Внешний вид → Настроить → Дополнительный CSS:

/* Изменение цвета подсказки */
.acf-icons-wrapper .acf-icon-item::after {
    background: #0073aa;
    color: #fff;
}

/* Увеличение отступов между иконками */
.acf-icons-wrapper {
    gap: 20px;
}

/* Изменение эффекта при наведении */
.acf-icons-wrapper .acf-icon-item:hover .acf-icon {
    transform: rotate(10deg) scale(1.2);
}

Изменение размера подсказки

.acf-icons-wrapper .acf-icon-item::after {
    font-size: 14px;
    padding: 6px 12px;
}

Настройка стиля подписей

/* Изменение размера шрифта подписи */
.acf-icons-wrapper.display-label .acf-icon-label {
    font-size: 14px;
    font-weight: 600;
}

/* Изменение максимальной ширины блока с подписью */
.acf-icons-wrapper.display-label .acf-icon-item.with-label {
    max-width: 120px; /* по умолчанию 100px */
}

/* Изменение минимальной ширины блока с подписью */
.acf-icons-wrapper.display-label .acf-icon-item.with-label {
    min-width: 80px; /* по умолчанию 70px */
}

🔧 Технические требования

• WordPress: 5.0 или выше
• PHP: 7.0 или выше
• ACF (Advanced Custom Fields): Pro или Free
• WPBakery Page Builder: опционально (для визуального элемента)

🐛 Отладка

Если плагин не работает:

1. Проверьте настройки поля ACF:

   • Return Value должен быть Both (array)

2. Включите отладку: Раскомментируйте строку 54 в файле acf-icons-shortcode.php:

   return '<pre>' . print_r($values, true) . '</pre>';

   Это покажет, какие данные возвращает поле ACF.

3. Проверьте пути к иконкам: Убедитесь, что файлы иконок доступны по указанным путям.

4. Очистите кеш: Если используете кеширующий плагин, очистите кеш.

📝 История версий

1.7.0 (2026-02-25)

• ✨ Добавлен режим отображения с подписями к иконкам (display="label")
• ✨ Добавлена настройка позиции подписи: сверху/снизу (label_position)
• ✨ Обновлены настройки в WPBakery Page Builder
• ✨ Обновлена документация с примерами использования

1.6.0 (2026-02-11)

• ✨ Стили вынесены в отдельный файл css/acf-icons-shortcode.css
• ✨ Добавлены константы плагина для лучшей организации кода
• ✨ Стили подключаются автоматически на всех страницах
• ✨ Улучшена производительность и организация кода

1.5.0 (2026-02-11)

• Добавлен параметр size для настройки размера иконок
• Улучшена валидация размера (от 10 до 200px)
• Добавлены настройки размера в элементе WPBakery

1.4.0 (2026-02-11)

• Полностью переписана логика обработки данных
• Убраны ненужные карты соответствия
• Упрощён код для лучшей производительности

1.3.0 (2026-02-11)

• Добавлена поддержка WPBakery/Visual Composer
• Улучшена структура кода
• Добавлена многоязычная поддержка

1.0.0 (2026-02-11)

• Первая версия плагина
• Базовый функционал вывода иконок
• Поддержка горизонтальной и вертикальной ориентации

📄 Лицензия

Данный плагин распространяется под лицензией GPL-2.0+.

Copyright (C) 2026 Your Name

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

🤝 Поддержка

Если у вас возникли вопросы или проблемы:

• 💬 Создайте issue на GitHub: GitHub Issues

🙏 Благодарности

• Advanced Custom Fields - за отличный плагин
• WPBakery Page Builder - за мощный конструктор
• Font Awesome - за иконки (опционально)

---

Создано с ❤️ для WordPress