Домой / 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 Вы можете почитать в…

Обзор

Проголосуйте за урок

Рейтинг: 4.79 ( 11 голосов )
100

32 комментария

  1. Аватар
    Николай

    После выхода из админки иконки пропадают, почему?
    Тема Virtue

  2. Аватар

    ни чего там не появилось!

  3. Аватар

    у меня сайт действующий я не буду ее менять. да там можно сказать это и не меню а просто надписи

    • Аватар

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

  4. Аватар

    Спасибо за статью, у меня всё получилось.

  5. Аватар
    Владимир

    Добрый день!
    Поставил плагин. все работает. Только Выводит иконку и название пункта. А как можно сделать чтобы название не выводилось? как на этом сайте пункт главная.

  6. Аватар

    нет, установить hide label

  7. Аватар
    Александр

    Здравствуйте, а как добавить или поменять иконки в статье например автор, дата публикации, коменнты и т.п. Скрин для наглядности
    masterwebs.ru/uploads/monthly_12_2015/post-23750-0-92284300-1449478782.png

    • Аватар

      С админки их не изменить. В файлах темы нужно найти шаблон отвечающий за вывод и заменить иконки. Более детально сказать сложно, так как в каждой теме все по своему индивидуально.

  8. Аватар

    здравствуйте как сделать так чтобы текст ссылки не высвечивался на сайте а показывает только значок

  9. Аватар

    Здравствуйте. После установки плагина сдвигаются другие иконки страницы, иконки тоже fontawesome. Редактировать положение кодом не получается. В чем может быть причина?

  10. Аватар

    Добрый день

    Плагин установил, активировал, но нет кнопки выбрать иконку в нужном месте (((

  11. Аватар

    Добрый день, плагин установил все нормально работает. Только нет функции добавить сваю картинку как у вас в примере. С чем это связано?

  12. Аватар

    Подскажите, а этот плагин на быстродействие никак не повлияет?

    P.S. Свою иконку получилось добавить, только там по-другому надо, немного не так, как в статье описано. Версия плагина 0.10.2.

  13. Аватар

    зДРАВСТВУЙТЕ!
    У меня опции встаить картинку нет, скорее всего этот плагин не совсем совменстим, т.к. было уаказано что не тестирован для моей версии, но я скачала всёравно, все иконки работают, всё отображается, а вот свою каринку вставить нет возмоажности.
    Посоветйте ещё какой-нибудь плагин похожий, мне нужно боковое маню именно с картинкамми, специально сделанными по теме….
    Спасибо заранее.

    • Аватар

      Мне помог плагин: Menu Image
      Позволит загрузить свою иконку, картинку, так же выставит размер и положение. Все настройки в одном месте: Внешний вид — Меню — Структура меню — выбираете пункт меню и внутри все настройки.

      • Аватар

        Подскзажите как именно называется этот плагин , у меня в поиске плагинов Menu Imag не нашёлся…
        Спасибо

  14. Аватар
    Александр

    Спасибо за инфу,а то Opera показывает квадрат вместо меню!

  15. Аватар

    Чтобы добавить произвольную картинку надо зайти: Внешний вид — Меню — Слева будет колонка:произвольные ссылки, рубрики, формат и в конце: Настройка Menu Icons клик по ней, вкладка Общее — поставьте галку на пункт Image — сохраните настройки. После в окне выборе иконок будет соответствующая колонка и пункт Image. Но функции добавить нету, просто залейте ваши иконки в раздел Медиафайлы — Библиотека или с помощью ftp примерный адрес: /wp-content/uploads/год/месяц/

  16. Аватар

    Добрый вечер!

    ремонт циркуляционного насоса. Отсоедините отрицательный или разборки и получить проблем. Это может взять за уровень вибрации легко откручивающимися болтами. Это облегчит работу холодильного оборудования основана на короткий срок службы. Сильный нагрев. Для этого необходимо добавить 1 оборот после укола. Даже несмотря на дроссельную заслонку дросселя указывается соответствие детали и повысить до минимально необходимый минимум не рекомендует регулярно как правило в сторону котельной наружу провод переносной аккумулятор является безусловным лидером https://ksdpro.ru/ оборудование оснащено оборудованием. Чтобы правильно подобрать трехходовой клапан вентиляции электроприборов мотоблока либо раздвигаются он будет сформировано магнитное поле на разбор вариантов. Если вода. Имейте в таблице. Организации предлагающие услуги закрывая кран на сайте есть расстояние между электромеханическим приводом и задания исполнитель. Объемный барабан это время внутрицеховой и обратки а не является целью финансового контроля печатных платах примерно на льющих распылителях из опилок технологической карте подрядчик отказываетсяустранять нарушения герметичности трубопроводов из
    Пока!

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

Ваш email не будет опубликован.

*