В одной из предыдущих статей я рассмотрел создание меню WordPress и его настройка. Сегодня, в продолжении темы меню WordPress, рассмотрим дополнительные возможности, с помощью которых можно добавить иконки к пунктам меню. В результате мы получим такой вывод меню на сайте.
Шаг 1.
Создание меню
Если у вас еще нет меню на сайте, то необходимо его создать.
Откройте в админке сайта раздел Внешний вид > Меню. Нажмите ссылку «создайте новое меню». Выберите нужную область отображения и добавьте в меню пункты.
Шаг 2.
Добавление php-кода
Для добавления иконок к пунктам мы будем использовать хук wp_nav_menu_objects. Он позволяет изменять список объектов пунктов меню, перед тем, как HTML-код меню будет сгенерирован.
Чтобы иконки добавлялись только к меню в шапке, нужно добавить дополнительную проверку.
Предварительный код выглядит так
add_filter( 'wp_nav_menu_objects', 'add_menu_items_icon', 10, 2 );
function add_menu_items_icon( $items, $args ) {
// Добавляем иконки только для меню primary
if( $args->theme_location == 'primary' ) {
foreach( $items as $item ) {
// здесь будем добавлять иконки к меню
}
}
return $items;
}Этот код добавляем в файл functions.php.
Если вы регулярно обновляете тему, то для изменений файла functions.php используйте дочернюю тему.
Шаг 3.
Добавление иконок
Рассмотрим 3 варианта добавления иконок в меню:
- С помощью иконок Dashicons
- Через загрузку svg иконок в медиатеку
- С помощью плагина ACF
Добавление иконок Dashicons
Библиотека иконок Dashicons идет в WordPress из коробки. Нам нужно только подключить css скрипт в лицевой части сайта.
В functions.php добавьте скрипт подключения стилей
add_action( 'wp_enqueue_scripts', 'enqueue_style_dashicons' );
function enqueue_style_dashicons() {
wp_enqueue_style( 'dashicons' );
}Теперь перейдите на сайт Dashicons и с помощью поиска найдите нужную иконку. Скопируйте название иконки.
А теперь вернемся в раздел Внешний вид > Меню. Вверху страницы откройте вкладку Настройки экрана и активируйте чекбокс Описание.
В настройках каждого пункта меню появилось новое текстовое поле. В поле Описание вставьте название иконки и сохраните изменения.
Таким образом добавляем в описание каждого пункта меню название иконки.
Теперь вернемся к php коду, который мы добавляли на шаге 2. В код добавляем вывод дополнительного html.
add_filter( 'wp_nav_menu_objects', 'add_menu_items_icon', 10, 2 );
function add_menu_items_icon( $items, $args ) {
// Добавляем иконки только для меню primary
if( $args->theme_location == 'primary' ) {
foreach( $items as $item ) {
if( $item->description ) {
$item->title = '<span class="dashicons '. $item->description .'"></span>' . $item->title;
}
}
}
return $items;
}Обновляем страницу браузера и получаем итоговый результат
Иконки добавлены, но "прилипли" к тексту. Добавим стилей, чтобы навести визуальный порядок.
.menu-item .dashicons{
margin-right: 6px;
font-size: 18px;
}Чуть уменьшил размер иконок и добавил отступ. Стало гораздо лучше 🙂
Иконки Dashicons были рассмотрены в качестве примера. Аналогичным образом вы можете подключить любую библиотеку иконок и добавлять их к пунктам меню.
Добавление иконок через Медиатеку
Теперь рассмотрим универсальный способ добавления иконок. Он позволяет добавлять абсолютно любые иконки и не требует подключения сторонних скриптов и стилей.
Если вы планируете загружать svg иконки, то сначала нужно включить svg в WordPress.
Откройте медиатеку WordPress и загрузите нужные иконки.
Чтобы добавить эти иконки в меню, надо получить ID каждой картинки. В моем случае, для значка домика ID=1511.
Переходим в настройки меню Внешний вид > Меню и в описание каждого пункта добавляем ID иконки.
Далее добавляем php-код. Выводим тег img с помощью функции wp_get_attachment_image.
add_filter( 'wp_nav_menu_objects', 'add_menu_items_icon', 10, 2 );
function add_menu_items_icon( $items, $args ) {
// Добавляем иконки только для меню primary
if( $args->theme_location == 'primary' ) {
foreach( $items as $item ) {
if( $item->description ) {
$item->title = wp_get_attachment_image( $item->description, 'full', true ) . $item->title;
}
}
}
return $items;
}Дополнительно добавляем стили
.menu-item img{
margin-right: 6px;
height: 18px;
width: 18px;
}И смотрим конечный результат:
Добавление иконки с помощью плагина ACF
И последний вариант – использование плагина ACF для добавления произвольного поля с загрузкой изображения. С точки зрения удобства, этот способ самый оптимальный и не требует выполнять махинации с полем Описание.
Установите плагин и активируйте его. Далее откройте в админке новый раздел ACF и создайте новую группу полей. В правилах отображения обязательно выберите Элемент меню и название необходимого меню.
Создайте новое поле типа Изображение, которое должно возвращать ID изображения.
Теперь у каждого пункта меню появилась кнопка для загрузки картинки.
Загрузите нужные иконки для каждого пункта и сохраните меню.
С помощью встроенной в плагин ACF функции get_field получим ID изображения и выведем иконку.
add_filter( 'wp_nav_menu_objects', 'add_menu_items_icon', 10, 2 );
function add_menu_items_icon( $items, $args ) {
// Добавляем иконки только для меню primary
if( $args->theme_location == 'primary' ) {
foreach( $items as $item ) {
$icon = get_field( 'icon', $item );
if( $icon ) {
$item->title = wp_get_attachment_image( $icon, 'full', true ) . $item->title;
}
}
}
return $items;
}Сохраняем код и проверяем окончательный результат
- Готово! Теперь меню на вашем сайте выглядит более привлекательно 🙂
