Здравствуйте, друзья! В этом уроке мы поговорим о том, как добавить иконки или изображения в меню сайта на WordPress. Добавление в меню собственных изображений или общепринятых иконок дает возможность посетителю сайта ускорить поиск нужного пункта меню или категории на сайте.
Благодаря добавлению тематических изображений в пункты меню, посетители сайта смогут интуитивно догадываться о том, какую информацию они найдут перейдя по пункту меню.
К примеру, для многих уже привычно видеть иконку «конверта» или «земного шара» на пункте меню ведущего на страницу контактов, или иконку «домика» на пункте меню ведущего на главную страницу сайта.
О том как правильно создавать и настраивать меню в WordPress Вы можете почитать в одном из прошлых уроков.
Создание меню с иконками в WordPress
Для создания меню с иконками мы будем использовать плагин Menu Icons. И так, начнем!
1. Устанавливаем и активируем плагин Menu Icons. О том как установить плагины в WordPress читайте в специальном уроке.
2. Переходим в Внешний вид -> Меню.
3. Нажимаем по стрелочке вниз на пункте меню, к которому мы хотим добавить иконку.
4. В настройках пункта меню нажимаем Select.
5. В открывшемся окне выбираем иконку, и указываем параметры отображения в настройках с правой стороны.
Свойство Position отвечает за позицию иконки в меню. Если Вы выберите Before — иконка будет отображаться перед названием пункта меню, а если After — после названия.
Vertical align отвечает за выравнивание иконки по вертикали, значение Middle (выравнивание средней точки иконки по базовой линии) будет по умолчанию. Его менять не будем.
Font Size — настройка размера иконки. Чем больше значение — тем больше размер иконки.
После выбора иконки нажимаем в нижнем правом углу кнопку Select, а после кнопку «Сохранить меню».
Вот что получилось у нас в результате:
Таким образом, мы с Вами добавили иконку в меню. По аналогии иконки можно добавлять на все пункты и подпункты меню.
Как добавить свою картинку в меню
Для того чтобы загрузить и установить свою собственную картинку нужно сделать следующее:
1. В открывшемся окне, которое появляется после нажатия на Select (в пункте меню) нажимаем Image. После этого загружаем изображение на вкладке «Загрузить файлы» или выбираем из уже загруженных ранее файлов на вкладке «Библиотека файлов».
2. Сохраняем изменения нажав кнопку «Сохранить меню».
Как видите, ничего сложного в добавлении иконок в пункты меню WordPress нету. Плагин Menu Icons не требует настроек, а добавление иконок в меню не требует особых знаний.
Если у Вас возникнут по ходу добавления иконок в меню вопросы — задавайте их в комментариях и я постараюсь Вам помочь.
После выхода из админки иконки пропадают, почему?
Тема Virtue
Здравствуйте. К сожалению с такой проблемой не сталкивался, и не представляю в чем она может заключаться…
Жаль что не можете помочь.
Подскажите пожалуйста, какая тема лучше подойдёт для магазина.
Чтоб не было лаг.
Вот небольшая подборка бесплатных тем:
http://wordpress-club.com/besplatnyie-temyi-wordpress-dlya-internet-magazina-woocommerce
Посмотрите, возможно какая-то Вам понравится.
ни чего там не появилось!
Вы исключили проблему с темой? На других пытались установить?
у меня сайт действующий я не буду ее менять. да там можно сказать это и не меню а просто надписи
В таком случае рекомендую искать ошибку внутри темы. А с учетом что это еще и не меню, то возможно плагин и не должен работать.
Спасибо за статью, у меня всё получилось.
Добрый день!
Поставил плагин. все работает. Только Выводит иконку и название пункта. А как можно сделать чтобы название не выводилось? как на этом сайте пункт главная.
Оставить поле названия пункта меню пустым
нет, установить hide label
Надя. hide label это что плагин такой? В поиске такого нет
Нет, это не плагин. Это настройка, которую видно при выборе иконки для меню.
Спасибо большое, все получилось!
Здравствуйте, а как добавить или поменять иконки в статье например автор, дата публикации, коменнты и т.п. Скрин для наглядности
masterwebs.ru/uploads/monthly_12_2015/post-23750-0-92284300-1449478782.png
С админки их не изменить. В файлах темы нужно найти шаблон отвечающий за вывод и заменить иконки. Более детально сказать сложно, так как в каждой теме все по своему индивидуально.
здравствуйте как сделать так чтобы текст ссылки не высвечивался на сайте а показывает только значок
Установить при добавлении иконки (5 шаг в уроке) значение Hide Label -> Yes
Здравствуйте. После установки плагина сдвигаются другие иконки страницы, иконки тоже fontawesome. Редактировать положение кодом не получается. В чем может быть причина?
Добрый день
Плагин установил, активировал, но нет кнопки выбрать иконку в нужном месте (((
Такая же проблема
Добрый день, плагин установил все нормально работает. Только нет функции добавить сваю картинку как у вас в примере. С чем это связано?
Возможно разработчики не выпустили обновление для последнее версии WP. Проблема как у Вас уже не единичная.
Подскажите, а этот плагин на быстродействие никак не повлияет?
P.S. Свою иконку получилось добавить, только там по-другому надо, немного не так, как в статье описано. Версия плагина 0.10.2.
А как вы добавили?
зДРАВСТВУЙТЕ!
У меня опции встаить картинку нет, скорее всего этот плагин не совсем совменстим, т.к. было уаказано что не тестирован для моей версии, но я скачала всёравно, все иконки работают, всё отображается, а вот свою каринку вставить нет возмоажности.
Посоветйте ещё какой-нибудь плагин похожий, мне нужно боковое маню именно с картинкамми, специально сделанными по теме….
Спасибо заранее.
Мне помог плагин: Menu Image
Позволит загрузить свою иконку, картинку, так же выставит размер и положение. Все настройки в одном месте: Внешний вид — Меню — Структура меню — выбираете пункт меню и внутри все настройки.
Подскзажите как именно называется этот плагин , у меня в поиске плагинов Menu Imag не нашёлся…
Спасибо
Спасибо за инфу,а то Opera показывает квадрат вместо меню!
Чтобы добавить произвольную картинку надо зайти: Внешний вид — Меню — Слева будет колонка:произвольные ссылки, рубрики, формат и в конце: Настройка Menu Icons клик по ней, вкладка Общее — поставьте галку на пункт Image — сохраните настройки. После в окне выборе иконок будет соответствующая колонка и пункт Image. Но функции добавить нету, просто залейте ваши иконки в раздел Медиафайлы — Библиотека или с помощью ftp примерный адрес: /wp-content/uploads/год/месяц/
Добрый вечер!
ремонт циркуляционного насоса. Отсоедините отрицательный или разборки и получить проблем. Это может взять за уровень вибрации легко откручивающимися болтами. Это облегчит работу холодильного оборудования основана на короткий срок службы. Сильный нагрев. Для этого необходимо добавить 1 оборот после укола. Даже несмотря на дроссельную заслонку дросселя указывается соответствие детали и повысить до минимально необходимый минимум не рекомендует регулярно как правило в сторону котельной наружу провод переносной аккумулятор является безусловным лидером https://ksdpro.ru/ оборудование оснащено оборудованием. Чтобы правильно подобрать трехходовой клапан вентиляции электроприборов мотоблока либо раздвигаются он будет сформировано магнитное поле на разбор вариантов. Если вода. Имейте в таблице. Организации предлагающие услуги закрывая кран на сайте есть расстояние между электромеханическим приводом и задания исполнитель. Объемный барабан это время внутрицеховой и обратки а не является целью финансового контроля печатных платах примерно на льющих распылителях из опилок технологической карте подрядчик отказываетсяустранять нарушения герметичности трубопроводов из
Пока!