Почему иконки в меню важны для сайта на WordPress
Иконки в меню — это не просто украшение, а важный элемент юзабилити. Они помогают посетителям быстрее ориентироваться, визуально выделять разделы и делают интерфейс более современным. Особенно актуально для сайтов с большим количеством пунктов меню или с мультиязычными версиями. Оптимизация иконок позволяет загружать страницы быстрее и улучшает общее впечатление от сайта.
На wpicons.ru тема иконок особенно актуальна, поэтому сегодня разберём, как добавить иконки в меню WordPress, какие форматы лучше использовать и как избежать ошибок, замедляющих сайт.
Варианты добавления иконок в меню WordPress
Использование плагинов для иконок в меню
Самый простой способ — воспользоваться плагинами, которые добавляют возможность задавать иконки к пунктам меню через административную панель. Например:
- Menu Icons by ThemeIsle — поддерживает SVG, Dashicons, Font Awesome, а также загрузку своих иконок.
- WP Menu Icons — простой плагин с поддержкой SVG и PNG.
- Clearfy Pro https://wpshop.ru/clearfy-pro — кроме оптимизации, содержит инструменты для управления меню и иконками.
Плагины удобны, но не всегда дают нужный контроль и могут добавить лишний вес.
Добавление иконок вручную через фильтры WordPress
Для тех, кто хочет гибко настроить отображение иконок и не зависеть от плагинов, можно добавить иконки через код. Рассмотрим пример с добавлением SVG прямо в меню через фильтр wp_nav_menu_objects:
function wpicons_add_menu_icons($items, $args) {
foreach ($items as &$item) {
// Пример добавления иконки к пункту с ID 42
if ($item->ID == 42) {
$icon_svg = '<svg width="16" height="16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M8 0L6.59 1.41 12.17 7H0v2h12.17l-5.58 5.59L8 16l8-8z"/></svg>';
$item->title = $icon_svg . ' ' . $item->title;
}
}
return $items;
}
add_filter('wp_nav_menu_objects', 'wpicons_add_menu_icons', 10, 2);В этом примере для пункта меню с ID 42 к названию добавляется SVG-иконка стрелки. Такой способ позволяет использовать любые SVG без дополнительных запросов к серверу.
Выбор формата иконок для меню
Для меню лучше всего подходят:
- SVG — масштабируемы, легкие, не теряют качество. Их можно стилизовать через CSS, анимация тоже возможна.
- Font Awesome и другие иконные шрифты — если уже используются на сайте, удобно вставлять иконки через классы.
- PNG или WebP — если иконка сложная и не подходит для SVG, но стоит оптимизировать размер.
Совет: для меню предпочтительнее SVG, так как они меньше по весу и легко масштабируются под разные размеры экрана.
Оптимизация иконок для быстрого загрузки
Минификация SVG
Перед добавлением SVG в меню стоит минифицировать их — убрать комментарии, пробелы, лишние атрибуты. Это сильно уменьшит размер файла. Для этого можно использовать онлайн-сервисы, например SVGOMG.
Объединение иконок в спрайты
Если иконок много, лучше объединить их в SVG-спрайт. Это уменьшит количество HTTP-запросов и ускорит загрузку. В WordPress можно добавить спрайт в разметку и ссылаться на отдельные иконки через <use>:
<svg class="icon icon-home">
<use xlink:href="#icon-home"></use>
</svg>Создать спрайт можно вручную или с помощью плагинов типа SVG Support.
Lazy load для иконок
Хотя иконки обычно маленькие, если их много, имеет смысл отложить загрузку некоторых из них, чтобы уменьшить время первого рендеринга страницы. Это реализуется через JavaScript и Intersection Observer API, однако для меню обычно это избыточно.
Пример создания кастомных иконок в меню с помощью кода и SVG
Объединим всё в практический пример. Допустим, у нас есть меню с пунктами, и мы хотим добавить разные SVG-иконки к разным пунктам. Вот пример кода для functions.php:
function wpicons_add_custom_icons_to_menu($items, $args) {
foreach ($items as &$item) {
switch ($item->title) {
case 'Главная':
$icon = '<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 3.293l6 6V15H2v-5.707l6-6z"/></svg>';
break;
case 'Контакты':
$icon = '<svg width="16" height="16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M1 4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4z"/></svg>';
break;
default:
$icon = '';
}
if ($icon) {
$item->title = $icon . ' ' . $item->title;
}
}
return $items;
}
add_filter('wp_nav_menu_objects', 'wpicons_add_custom_icons_to_menu', 10, 2);Так мы добавляем иконки к пунктам меню без дополнительных плагинов и легко можем менять иконки под разные пункты.
Рекомендации по стилизации иконок в меню
Чтобы иконки гармонично смотрелись с текстом меню, нужно учитывать:
- Размер иконки (обычно 16–20px по высоте).
- Вертикальное выравнивание с текстом. Можно использовать
vertical-align: middle;или flexbox. - Цвет иконки. SVG можно окрашивать через CSS, например
fill: currentColor;для наследования цвета текста. - Отступы между иконкой и текстом. Обычно 4–6px.
Пример CSS для иконок в меню:
.menu-item svg {
vertical-align: middle;
margin-right: 6px;
fill: currentColor;
width: 18px;
height: 18px;
}Поддержка мобильных устройств и адаптивность
Иконки в меню должны оставаться чёткими и удобными на мобильных устройствах. Используйте SVG, они масштабируются без потери качества. При адаптивной верстке меню часто меняется, но иконки остаются на месте, сохраняя визуальную структуру.
Также учитывайте, что на маленьких экранах можно показывать только иконки без текста, экономя место. Для этого используйте CSS медиа-запросы:
@media (max-width: 480px) {
.menu-item span {
display: none;
}
}Заключение
Добавление иконок в меню WordPress — задача, которая улучшает UX и визуальную составляющую сайта. Используйте SVG для лучшей производительности, оптимизируйте иконки и выбирайте подходящий способ интеграции — через плагины или собственный код.
Для расширенных возможностей управления меню и иконками рекомендуем обратить внимание на плагин Clearfy Pro, который помогает не только с иконками, но и с оптимизацией всего сайта.