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

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

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

• Через подключение Font Awesome.
• Хак с фильтром wp_nav_menu_items для «домика» перед меню.
• С применением плагина (Menu Image).
• С помощью CSS стилей.

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

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

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

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

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

<i class="fas 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 коде) указывается использование символьного шрифта. Возможно, в некоторых макетах данная фишка уже подключена по умолчанию, например, в моем случае никаких дополнительных действий не требовалось. Тем не менее, на всякий случай все равно приведу эти стили. 

Важный нюанс с адаптивностью

Поскольку заголовок в пункте меню из примера выше отсутствует, то в мобильной версии текст «Главная» не отобразится. Существует несколько вариантов решения этой задачи:

• Если у вас на сайте предусмотрены разные обычное и мобильное меню то тут все логично — в одном из них будет иконка, в другом пишете текст.
• Можно добавить 2 ссылки для главной (текст/иконка) в одном элементе навигации, и в зависимости от размера экрана показывать/скрывать один из них (через опцию display). Принцип такой же, как и в ходе реализации адаптивности макета.
• Есть еще вариант из статьи про Font Awesome, в котором тексту в CSS ставите свойство text-indent: -99999px, а отображение иконки задаете в псевдоэлементе before.

Иконка домика перед меню (хак)

Преимущество метода в том, что вам не придется создавать новый пункт через WP-админку, ссылка добавляется с помощью php-сниппета, что надо будет разместить в файле функций functions.php:

add_filter('wp_nav_menu_items','add_new_menu_item', 10, 2);
function add_new_menu_item( $nav, $args ) {
    if( $args->theme_location == 'main_menu' )
    $newmenuitem = '<li class="home-link"><a href="'.home_url().'">'.get_the_title(get_option('page_on_front')).'</a></li>';
    $nav = $newmenuitem.$nav;
    return $nav;
}

Преимущество метода в том, что вы можете и не использовать символьный шрифт (если в теме он не подключен), а просто добавить вывод картинки домика.

add_filter('wp_nav_menu_items','add_new_menu_item', 10, 2);
function add_new_menu_item( $nav, $args ) {
    if( $args->theme_location == 'primary' ) {
    	if (is_front_page()) { $my_link_class = "home-link current-menu-item"; } else { $my_link_class = "home-link"; }   	   	
    	$newmenuitem = '<li class="'.$my_link_class.'"><a href="'.home_url().'"><img src="'.get_stylesheet_directory_uri().'/img/home-white25.png"></a></li>';
    	$nav = $newmenuitem.$nav;
	}
    return $nav;
}

Обратите также внимание на условный оператор проверки главной страницы, т.к. нам нужно вставить класс активного пункта меню, если что.

Тут есть парочка нюансов. Фильтр будет применен для меню, привязанного к локации (месту в шаблоне) под названием main_menu, поэтому иконка домика появится только там. Кроме того автоматически считывается заголовок главной страницы (учтите это, если у вас он какой-то специфический). Ну, и как вы сами понимаете, «проблемы» с поддержкой адаптивности, озвученные чуть выше, здесь также надо решать.

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

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

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

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. 

Теоретически, вы также можете использовать модуль Max Mega Menu в WordPress дабы не просто добавлять мини-изображения в пункты навигации, но и создавать их исключительно из иконок (кнопки без текста).

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

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

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

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

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? Делимся опытом и приемами ниже.

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

(голосов - 25, средний балл: 4,84 из 7)

Загрузка...

Категории: Возможности; Начинающим;
Теги: wordpress руководство, изображения, меню и навигация, новичкам, оформление, шрифты.