Авг
4
10

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

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

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

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

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

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

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

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

Какой бы способ вы не выбрали, главное в поле «Текст ссылки» добавить код символа 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.

Плагин 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. 

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

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

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

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

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

  • Михаил   04.04.2017

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

  • Иннокентий   07.07.2017

    Вот за информацию про плагин для меню с картинками отдельное спасибо. Я пока еще начинающий сайтостроитель, в кодах еще слабо разбираюсь. Буду пробовать работать с данным плагином. Кодами наверно займусь немного позже, раз предоставилась возможность пока обойтись без них.

  • Артём   07.07.2017

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

  • Михаил   07.07.2017

    Делал через Font Awesome, особой сложности тема не вызвала, но за детальную инструкцию все равно спасибо. Сгодится для общего развития, как тут написали выше)

  • Tod   07.07.2017

    Иннокентий, Артём, да плагин Menu Image для начинающих пользователей — самое то. Все просто реализуется, максимум нужно будет немного подправить стили.
    Михаил, работать с этой библиотекой шрифтов желательно, когда она уже используется на сайте, то есть ставить ее ради одного меню я бы не стал, а выбрал бы реализацию через CSS.

  • Сеня   08.10.2017

    Подскажите как в маркировке в редакторе записи вместо точки использовать свой рисунок? или вместо цифры использовать свой рисунок?

  • Tod   08.10.2017

    Сеня, это реализуется через добавление list-style-image в стили. Как-то так:
    ul {
    list-style-image: url('ваша_картинка.gif');
    }

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

  • WEB банкир   07.04.2020

    Эх… плагин бы, чтоб вставлял не в меню а в шапку сайта.
    Так как меню в мобильной версии сворачивается :(

  • Tod   08.04.2020

    WEB банкир, попробуйте реализовать разное обычное и мобильное меню для WordPress сайта.

  • service   29.11.2020

    Спасибо. Полезная информация.

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


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

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

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

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

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

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