Как добавить значки в меню навигации WordPress

Хотели бы вы добавить иконки в свое меню навигации WordPress? Недавно один из наших пользователей спросил, существует ли простой способ добавить изображения в качестве значков в меню навигации. В сегодняшней статье мы покажем вам как добавить значки изображений в меню навигации WordPress без необходимости редактирования кода.

Первым делом вам необходимо установить и активировать плагин Menu Image. После активации переходим в раздел Внешний вид » Меню. Там вы увидите опцию добавления изображений к каждому элементу существующего меню.

Далее, загружаем нужное вам изображение, которое будет выводится рядом с пунктом меню, кликнув на кнопку ‘Set Image’.

Плагин автоматически создаст три новых размера изображений 24 x 24, 36 x 36, и 48 x 48 пикселей. Вы можете выбрать из выпадающего меню размера изображений. Вы также можете выбрать. где выводить название меню. Можно отобразить его либо перед, либо же после изображения. Существует возможность спрятать заголовок и вывести только картинку.

Добавляем свой собственный размер изображения

Если вы хотите добавить свой собственный размер изображения для загружаемых в меню картинок, то сделать это можно, просто добавив следующий код в файл functions.php вашей темы или в плагин для сайта WordPress:

add_filter( 'menu_image_default_sizes', function($sizes){

  // убираем стандартный размер 36x36
  unset($sizes['menu-36x36']);

  // добавляем новый размер
  $sizes['menu-50x50'] = array(50,50);

  // возвращаем $sizes (обязательно)
  return $sizes;

});

Добавляем изображения в меню навигации вручную с помощью CSS

Этот способ подойдет более продвинутым пользователям, которые хотя бы немного знакомы с CSS. Сначала вам нужно загрузить свои изображения в WordPress с помощью Медиафайлы » Добавить новый. После загрузки каждой картинки, копируем ссылки на них и вставляем в любой текстовый редактор типа Блокнота.

Далее переходим в раздел Внешний вид » Меню и кликаем на кнопку Настройки Экрана в самом верхнем правом углу страницы. В этом блоке настроек отмечаем галочку рядом с «CSS классы».

Далее прокручиваем страницу к меню, кликаем на любом элементе, и видим новое поле CSS класс. Все, что вам нужно сделать теперь, это добавить CSS класс к элементу меню.

После этого вам нужно добавить следующий код CSS в файл таблицы стилей своей темы.

.homepage {
background-image: url('http://www.example.com/wp-content/uploads/2014/12/home.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}

Не забудьте изменить .homepage на любой CSS класс, который вы указали, а также подменить ссылку на фоновое изображение, загруженное и записанное вами ранее в текстовый файл.

В зависимости от вашей темы, вы можете поиграться с CSS для достижения оптимального результата. После этого нужно повторить проделанное для всех элементов меню.

Вот и всё на сегодня. Мы надеемся, что эта статья помогла вам научиться добавлять значки в меню навигации WordPress. Также вы можете ознакомиться с нашей статьей о том, как стилизировать меню в WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.