В этой статье подробно разберём, как создать собственный набор иконок в WordPress, используя популярный плагин Advanced Custom Fields (ACF). Такой подход позволяет легко управлять иконками в админке и выводить их на сайте без лишних сложностей. Это особенно полезно, если вам нужно часто менять иконки или добавлять новые без правки кода.
Почему стоит использовать ACF для набора иконок в WordPress
ACF позволяет создавать кастомные поля для различных типов записей и страниц. В нашем случае мы создадим поле для загрузки SVG-иконок или выбора иконок из библиотеки. Такой метод гораздо удобнее, чем хардкодить иконки в шаблонах, и он даёт гибкость для контента и дизайна.
Основные преимущества использования ACF:
- Удобный интерфейс в административной панели для загрузки и выбора иконок.
- Гибкость — можно добавлять любое количество иконок без изменения кода.
- Поддержка SVG, PNG и других форматов.
- Возможность вывода иконок в шаблонах через PHP-функции, что упрощает интеграцию.
Как создать кастомное поле для набора иконок с помощью ACF
Для начала установите и активируйте плагин Advanced Custom Fields. Далее создайте группу полей для нужного типа записи (например, для страницы или произвольного типа записи). В ней добавьте новое поле:
- Тип поля: Повторитель (Repeater) — чтобы добавить несколько иконок.
- Внутри повторителя: поле загрузки файла или URL для SVG/PNG.
- Опционально: поле с названием иконки для удобства.
Пример создания группы полей:
if( function_exists('acf_add_local_field_group') ):
acf_add_local_field_group(array(
'key' => 'group_wpicons_icons',
'title' => 'Набор иконок',
'fields' => array(
array(
'key' => 'field_wpicons_icons_repeater',
'label' => 'Иконки',
'name' => 'wpicons_icons',
'type' => 'repeater',
'sub_fields' => array(
array(
'key' => 'field_wpicons_icon_name',
'label' => 'Название',
'name' => 'icon_name',
'type' => 'text',
),
array(
'key' => 'field_wpicons_icon_svg',
'label' => 'SVG файл',
'name' => 'icon_svg',
'type' => 'file',
'return_format' => 'url',
'mime_types' => 'svg,png',
),
),
'min' => 1,
'max' => 20,
),
),
'location' => array(
array(
array(
'param' => 'post_type',
'operator' => '==',
'value' => 'page',
),
),
),
));
endif;Данный код можно добавить в functions.php или в отдельный плагин. Он создаст группу полей с повторителем для загрузки до 20 иконок.
Вывод набора иконок на сайте через PHP
После заполнения полей в админке, выведите иконки на сайте с помощью цикла PHP. Вот пример функции для вывода:
function wpicons_get_icon_set() {
if( have_rows('wpicons_icons') ) {
echo '<div class="wpicons-icon-set">';
while( have_rows('wpicons_icons') ) {
the_row();
$name = get_sub_field('icon_name');
$svg_url = get_sub_field('icon_svg');
if( $svg_url ) {
echo '<div class="wpicons-icon" title="'.esc_attr($name).'">';
echo '<img src="'.esc_url($svg_url).'" alt="'.esc_attr($name).'" />';
echo '</div>';
}
}
echo '</div>';
} else {
echo '<p>Иконки не найдены</p>';
}
}В нужном шаблоне вызовите wpicons_get_icon_set(); для отображения иконок. Такой подход позволит легко управлять иконками через админку без постоянного правления кода.
Оптимизация иконок: SVG vs PNG
Для набора иконок лучше всего использовать SVG, так как этот формат масштабируемый и весит меньше, чем растровые PNG. SVG хорошо поддерживается браузерами и позволяет применять CSS-анимации и стили.
При использовании PNG учитывайте разные размеры иконок и оптимизируйте их через инструменты типа TinyPNG или ImageOptim. Для SVG можно дополнительно оптимизировать через SVGOMG.
В ACF настройте ограничения по типам файлов, чтобы избежать загрузки неподходящих форматов, и добавьте проверки при выводе, как показано в примерах выше.
Пример интеграции с плагином Clearfy Pro для ускорения загрузки иконок
Если у вас установлен плагин Clearfy Pro, он поможет оптимизировать загрузку иконок, отключив лишние скрипты и стили, а также добавит опции кэширования.
Для интеграции достаточно убедиться, что ваши SVG-иконки загружаются как статичные файлы и не блокируют рендеринг страницы. Clearfy Pro автоматически оптимизирует вывод CSS и JS, что повысит скорость загрузки страниц с набором иконок.
Заключение: преимущества кастомных наборов иконок на базе ACF
Использование ACF для создания набора иконок — отличный способ централизованно управлять визуальной составляющей сайта без привлечения разработчиков каждый раз. Такой подход масштабируем и легко адаптируется под любые задачи, будь то меню, блоки услуг, категории или прочие элементы.
Реализуйте собственный набор иконок через ACF, используйте приведённые примеры кода и максимально оптимизируйте загрузку иконок для лучшего пользовательского опыта.