Как добавить свои иконки в wordpress
Перейти к содержимому

Как добавить свои иконки в wordpress

  • автор:

Как добавить иконку в меню WordPress

Как добавить иконку в меню WordPress

Здравствуйте, друзья! В этом уроке мы поговорим о том, как добавить иконки или изображения в меню сайта на WordPress. Добавление в меню собственных изображений или общепринятых иконок дает возможность посетителю сайта ускорить поиск нужного пункта меню или категории на сайте.

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

К примеру, для многих уже привычно видеть иконку «конверта» или «земного шара» на пункте меню ведущего на страницу контактов, или иконку «домика» на пункте меню ведущего на главную страницу сайта.

О том как правильно создавать и настраивать меню в WordPress Вы можете почитать в одном из прошлых уроков.

Создание меню с иконками в WordPress

Для создания меню с иконками мы будем использовать плагин Menu Icons. И так, начнем!

1. Устанавливаем и активируем плагин Menu Icons. О том как установить плагины в WordPress читайте в специальном уроке.

2. Переходим в Внешний вид -> Меню.

3. Нажимаем по стрелочке вниз на пункте меню, к которому мы хотим добавить иконку.

Как добавить иконку в меню WordPress: добавляем изображения в пункты меню сайта. Создание меню с иконками с помощью плагина Menu Icons

4. В настройках пункта меню нажимаем Select.

Как добавить иконку в меню WordPress

5. В открывшемся окне выбираем иконку, и указываем параметры отображения в настройках с правой стороны.

Свойство Position отвечает за позицию иконки в меню. Если Вы выберите Before — иконка будет отображаться перед названием пункта меню, а если Afterпосле названия.

Vertical align отвечает за выравнивание иконки по вертикали, значение Middle (выравнивание средней точки иконки по базовой линии) будет по умолчанию. Его менять не будем.

Font Size — настройка размера иконки. Чем больше значение — тем больше размер иконки.

Как добавить иконку в меню WordPress

После выбора иконки нажимаем в нижнем правом углу кнопку Select, а после кнопку «Сохранить меню».

Вот что получилось у нас в результате:

Как добавить иконку в меню WordPress

Таким образом, мы с Вами добавили иконку в меню. По аналогии иконки можно добавлять на все пункты и подпункты меню.

Как добавить свою картинку в меню

Для того чтобы загрузить и установить свою собственную картинку нужно сделать следующее:

1. В открывшемся окне, которое появляется после нажатия на Select (в пункте меню) нажимаем Image. После этого загружаем изображение на вкладке «Загрузить файлы» или выбираем из уже загруженных ранее файлов на вкладке «Библиотека файлов».

Как добавить иконку в меню WordPress

2. Сохраняем изменения нажав кнопку «Сохранить меню».

Как видите, ничего сложного в добавлении иконок в пункты меню WordPress нету. Плагин Menu Icons не требует настроек, а добавление иконок в меню не требует особых знаний.

Если у Вас возникнут по ходу добавления иконок в меню вопросы — задавайте их в комментариях и я постараюсь Вам помочь.

Здравствуйте, друзья! В этом уроке мы поговорим о том, как добавить иконки или изображения в меню сайта на WordPress. Добавление в меню собственных изображений или общепринятых иконок дает возможность посетителю сайта ускорить поиск нужного пункта меню или категории на сайте. Благодаря добавлению тематических изображений в пункты меню, посетители сайта смогут интуитивно догадываться о том, какую информацию они найдут перейдя по пункту меню. К примеру, для многих уже привычно видеть иконку «конверта» или «земного шара» на пункте меню ведущего на страницу контактов, или иконку «домика» на пункте меню ведущего на главную страницу сайта. О том как правильно создавать и настраивать меню в WordPress Вы можете почитать в…

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

Иконки для WP меню

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

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

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

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

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

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

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

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

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

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

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

#menu-item-121 a, #menu-item-122 a

Здесь двум элементам с 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=='primary'){if(is_front_page()){$my_link_class="home-link current-menu-item";}else{$my_link_class="home-link";}$newmenuitem='.$my_link_class.'">.home_url().'">.get_stylesheet_directory_uri().'/img/home-white25.png">';$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 = »; $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 есть парочка интересных хаков и вопросов. В частности можете удалить/добавить размеры создаваемых картинок в меню.

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

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

рейтинг

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

(голосов — 24, средний балл: 4,75 из 7)

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

Похожие статьи:

  1. Создаем список ссылок в сайдбаре с картинками +плагины блогролла
  2. Как добавить ссылку на изображение в WordPress
  3. Как подключить шрифт в WordPress: через CSS, из Google Fonts, в редакторе
  4. Как удалить записи WordPress, очистить базу данных и настройки сайта (+подборка модулей)
  5. Как прикрепить медиафайл к WordPress записи и как отсоединить вложение

Как добавить иконки в меню WordPress?

Меню WordPress с иконками

В данной статье я покажу один очень простой способ добавления иконок в меню сайта, работающего на WordPress.

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

Навигация по статье:

  • Плагин для добавления иконок в меню WordPress
  • Плагин для добавления изображений в меню WordPress
  • Видеоинструкция

Плагин для добавления иконок в меню WordPress

Для реализации данной задачи нам понадобится плагин для WordPress, который называется Menu Icons.

Плагин для добавления иконок в меню WordPress

  1. 1. Копируем его название, переходим в административную часть и устанавливаем как обычно через раздел «Плагины» =>«Добавить новый». Выглядит он вот так:

Устанвка плагина WordPress

Установить иконку в меню WordPress

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

Набор иконок для меню

Настройка иконок для меню

Иконки для меню

Положение иконок в меню

Так же здесь можно задать выравнивание текста, но лучше всего использовать выравнивание посередине, которое здесь стоит по умолчанию.

Выравнивание иконок

Размер иконок

Настройка меню для WordPress

Теперь переходим на сайт и смотрим, что у нас получилось:

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

При наведении на определенный пункт иконка так же изменяет свой цвет.

Плагин для добавления изображений в меню WordPress

Иногда возникают ситуации, когда иконок, которые есть в наборе для вас не достаточно, и вам необходимо добавлять не иконку, а именно какое-то определенное изображение.

Для этой цели тоже есть соответствующий плагин для WordPress, который называется Menu Image.

Плагин для вставки картинок в меню WordPress

  1. 1. После его установки, у вас в разделе «Меню», точно так же, при редактировании каждого отдельного пункта, появляется кнопочка «Выбрать картинку» для выбора изображения.

Задаем картинки для меню

Вставляем свои картинки

Картинка в меню при наведении

Размер изображений в меню

Расположение заголовка

  • Можно отключить заголовок совсем, выбрав пункт «Нет».
  • «Above» — иконка будет отображаться под ссылкой.
  • «Below» — сверху будет отображаться картинка, а под картинкой название ссылки меню.
  • «До» — ссылка будет расположена до изображения.
  • «После» — сначала будет стоять изображение, а потом ссылка.

В результате использования данного плагина можно получить вот такое простое и интересное меню для сайта на WordPress с картинками.

Красивоеменю WordPress с картинками

Если сюда подключить ещё немного фантазии, то можно получить очень привлекательное и оригинальное меню.

Видеоинструкция

На этом у меня сегодня все. Надеюсь, что эта статья будет для вас полезной. Не забывайте оставлять комментарии, делиться статьей в социальных сетях и подписывайтесь на мою рассылку новостей. Для меня это очень важно!

Спасибо за то, что посетили мой сайт! До встречи в следующих статьях!

С уважением Юлия Гусарь

Как добавить иконки в меню WordPress

Вы уже могли заметить на моем блоге появились иконки в меню WordPress. Достаточно много популярных блогов используют такие иконки. Они привлекают внимание пользователя, заставляя его обратить свой взор на тот или иной элемент на вашем сайте. Ну и это просто красиво смотрится!

Как добавить иконки в меню WordPress

Если вы захотели себе такие же иконки, вы в нужном месте! Продолжайте читать и в этой статье я расскажу вам, как добавить иконки в меню WordPress с помощью плагина!

Добавляем иконки в меню WordPress через плагин

Безусловно самым простым способом является установка иконок с помощью плагина. Первым делом нам понадобится установить плагин Menu Icons by ThemeIsle, он достаточно прост и имеет поддержку множества библиотек иконок, таких как FontAwesome. Если вы не знаете как устанавливать плагины, обратитесь к статье — Как установить плагин WordPress.

Далее мы переходим к настройкам нашего меню. Внешний вид → Меню

Как добавить иконки в меню WordPress

Если у вас на сайте несколько разных меню, вы можете выбрать именно нужное вам. Затем выберите нужный элемент в меню, это может быть как рубрика, так и запись. Абсолютно любому элементу в меню можно задать свою иконку.

Как добавить иконки в меню WordPress

Также слева доступно меню, в котором вы можете выбрать библиотеку иконок, которую вы хотите использовать. Можно выбрать все, а можно только одну, как я. С помощью Image и SVG вы можете загружать свои изображения.

Каждая библиотека содержит свой CSS файл с настройками иконок. Выбрав все, вы автоматически добавляете их загрузку в head вашей страницы, даже если вы их не используете. Это может сказаться на скорости вашего сайта.

Рекомендую выбрать одну или две библиотеки и пользоваться ими. Мне хватает одной библиотеки — Font Awesome.

Как добавить иконку рубрики в меню

Открываем нужный элемент в вашем меню, у меня это рубрики и если вы всё сделали правильно, то должна появиться кнопка выбора иконки, нажимаем её.

Как добавить иконки в меню WordPress

У вас откроется большая библиотека различных иконок, вы можете пользоваться поиском по ключевым словам или сортировать их по группам.

Как добавить иконки в меню WordPress

  1. Фильтр групп.
  2. Поиск.
  3. Выбор иконки.

После выбора нужной вам иконки, справа откроется возможность её настроить.

Как добавить иконки в меню WordPress

Вы можете скрыть текст ссылки, указать позицию (до/после ссылки), выравнивание и конечно же сам размер иконки, экспериментируйте и выбирайте то, что вам больше всего по душе.

Определитесь с настройками и не забудьте нажать на кнопку «Сохранить меню». Проверяем на своем сайте и наслаждаемся!

Украшаем иконки меню WordPress

По умолчанию, цвет ваших иконок будет такой же, что и текст ваших ссылок. У меня это чёрный, но можно это изменить с помощью дополнительных стилей CSS. Для этого нам необходимо узнать класс этих самых ссылок.

Как добавить иконки в меню WordPress

Для этого дела нам нужна панель разработчика (ctrl + shift + i), находим нашу иконку в коде и смотрим какой у нее класс. Далее, мы с легкостью можем задать цвет всему классу с помощью дополнительных стилей (Внешний вид → Настроить → Дополнительные стили) .

Как добавить иконки в меню WordPress

Задаем цвет иконки с помощью свойства color . Сохраняем и проверяем как всё отображается на нашем сайте.

Как добавить иконки в меню WordPress

Отлично! Всё шикарно работает. Экспериментируйте и подбирайте нужные вам цвета. Конечно, всё это можно сделать руками, без плагинов, но об этом мы поговорим уже в следующей нашей статье.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *