Мар
19
1

Иконки в меню WordPress — добавляем вручную и с плагином

Иконки для WP менюСуществует несколько причин для создания в WordPress меню с картинками (иконками). Во-первых, это отличный способ сэкономить место, заменив название главной страницы на «домик». Во-вторых, некоторые символы говорят намного больше нежели текстовые значения — кнопки Facebook, Twitter и т.п. И наконец, в-третьих, графические элементы могут сделать навигацию более наглядной за счет добавления изображений, например, в список категорий. Все три варианта вы можете видеть с превьюшке поста слева. А ниже я расскажу как их можно реализовать. 

Итак, по сути, есть три принципиально разных метода вставки иконок в меню WordPress:

В первом случае придется немного «покодить», что не всем новичкам под силу. Второй же ориентирован больше на полноценные изображения, а не символьные шрифты. Третий — вообще универсален. 

Иконки в WP меню с помощью Font Awesome

Ранее я уже писал детальную статью про использование Font Awesome в WordPress. В ней найдете примеры кода для добавления символов в заголовки виджета, контент и навигацию. Хотя, последний вариант реализовывался там несколько иным образом нежели в текущем посте. Можете посмотреть, если интересно.

1. Итак, дабы вставить картинку в меню Вордпресс первым делом заходим внутри админки в раздел «Внешний вид» — «Меню». Создать новый элемент в навигацию сайта вы можете через «Страницы» или «Произвольный ссылки».

Добавление пункта меню в WordPress

Какой бы способ вы не выбрали, главное в поле «Текст ссылки» добавить код символа Font Awesome, например, для главной:

<i class="fa fa-home"></i>

После этого кликаете по кнопке сохранения (про создание меню читаем тут). Проверяете результат на сайте.

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

add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
	wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );
}

Скачивать скрипт не нужно, он грузится прямо с официального сайта сервиса. Там же в разделе Icons сможете посмотреть коды других иконок для WordPress меню.

Картинки для вордпресс меню

В некоторых статьях я замечал, что разработчики включают в стили строки по типу:

#menu-item-121 a, #menu-item-122 a  {font-family: FontAwesome;}

Здесь двум элементам с ID с номерами 121 и 122 (смотрите в HTML коде) указывается использование символьного шрифта. Возможно, это какой-то старый вариант реализации, т.к. в моем случае ничего кроме подключения скрипта не требовалось. Однако на всякий случай дополнительно привожу эти стили. 

Важный нюанс/проблема! Так как текст в данном пукте, по сути, отсутствует, то в мобильной версии навигации строка «Главная» не отобразится. Поэтому, если адаптивное меню в теме создается автоматически, вероятно, придется отказаться от такой реализации в пользу варианта из статьи про Font Awesome. При этом тексту в CSS ставите свойство text-indent: -99999px, а отображение иконки задаете в псевдоэлементе before.

WordPress плагин для меню с картинками

Модуль Menu Image позволяет легко добавлять картинки в меню Вордпресс без каких-либо кодов. Изображения вставляются внутрь тега ссылки через админку. Решение достаточно популярное — 50к активных пользователей, рейтинг 4.9.

Плагин Menu Image

После установки все настройки найдете в разделе «Внешний вид» — «Меню». Если быть точным, то они отобразятся в самих элементах меню. Владельцам плагина WPML придется дополнительно зайти в «WPML» — «WP Menus Sync» и кликнуть по ссылке синхронизации. Если у вас его нет, ничего делать не нужно.

Menu Image добавляет несколько дополнительных опций:

Menu Image - новые фишки в меню

  • кнопка загрузки изображения для навигации;
  • второй вариант иконки WordPress меню при наведении;
  • расположение заголовка: над, под, до, после картинки или скрытие;
  • размер: 24х24, 36х36 и 48х48.

В разделе FAQ модуля на wordpress.org есть парочка интересных хаков и вопросов. В частности можете удалить/добавить размеры создаваемых картинок в меню.

<?php
add_filter( 'menu_image_default_sizes', function($sizes) {
 
  // remove the default 48x48 size
  unset($sizes['menu-48x48']);
 
  // add a new size
  $sizes['menu-16x16'] = array(16,16);
 
  // return $sizes (required)
  return $sizes;
 
});
?>

Данный код удалит стандартный размер 48×48 и подключит вариант с мини иконками 16×16. Остальные сниппеты ищите в описании Menu Image. 

Вариант с CSS стилями

Эта возможность подойдет тем, кто плюс-минус нормально ориентируется в верстке.

1. В разделе админки «Внешний вид» — «Меню» в правом верхнем углу открываем «Настройки экрана» и активируем пункт «Классы CSS».

CSS стили для WP меню

2. Этот прием добавляет в пункты Wodpress меню новый элемент — класс стилей. Указываем в желаемом объекте название, например, mymenu.

3. Затем переходите в раздел «Медиафайлы» и загружаете необходимое для показа изображение.

4. После этого открываете файл стилей шаблона (style.css) и вставляете туда следующий код:

.my-menu {
	background-image: url('http://ваш_сайт/wp-content/uploads/menuimg.png');
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 20px;
}

Сохраняете и смотрите результат.

В принципе, как я уже говорил выше, тут есть разные нюансы. Во-первых, можно было бы вообще не создавать новый класс, а просто посмотреть HTML код сайта и прописать стили, например, для #menu-item-121 и т.п. — система автоматически добавляет ID каждому пункту навигации.

Во-вторых, данный пример использования CSS свойства background можно заменить на тот же Font Awesome:

li#menu-item-2996 a:before {
    content: "\f015";
    font-family: FontAwesome;
    padding-right: 7px;
}

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

А что вы делаете для вставки картинки или иконки в меню WordPress? Делимся опытом и приемами ниже.

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 4, средний балл: 7,00 из 7)
Загрузка...

категория Категории: Возможности; Начинающим;
теги Теги: , , , , , , .

1 комментарий к статье “Иконки в меню WordPress — добавляем вручную и с плагином”

  • Михаил   04.04.2017

    Спасибо за инструкцию. Все предельно ясно. Хотя я все же решил не тратить время на разбор кодов, а устновить модуль Menu Image.

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Последние посты
Заработай в GoGetLinks
Лучшее в категории
Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости