Лого www.SiteHere.ru

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

иконки для элементов меню WordPress

Как вы заметили, у меня на сайте для каждого элемента меню (для каждой категории) используется своя иконка. Это очень удобно при просмотре категорий посетителем. И запоминается в таком виде гораздо лучше. Чтобы не добавлять вручную эти иконки — я использую плагин. И в этом уроке я расскажу что это за плагин, как установить понравившуюся иконку для каждой категории на сайте. Также расскажу про несколько сервисов, где я ищу иконки.

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

Начнем

    Добавить иконки для элементов меню можно двумя способами:

  1. Вручную (редактируя исходный код вашей темы).
  2. С помощью плагина.

Второй способ значительно легче, поэтому его мы и рассмотрим.

Плагин для добавления иконки называется Category and Page Icons. Скачиваем его, устанавливаем и активируем:

Активируем плагин Category and Page Icons

После чего нужно произвести легкую настройку плагина.

Настройка плагина

После активации плагина в админ-панели WordPress слева под элементов «Комментарии» появится еще один «Icons»:

Новый элемент меню в админке WordPress

Сначала внесем некоторые настройки для этого плагина. Для этого нажмите на последнюю ссылку «Настройки»:

Настройки плагина Category and Page Icons

В первой строке (голубая стрелка) задаете путь где будут храниться иконки. Также хочу обратить внимание на размер иконок. Я их ставил квадратные (одинаковые по ширине и высоте), но это на ваше усмотрение:

Страница с настройками плагина

Добавление иконок

Всё готово к тому, чтобы начать добавлять иконки для элементов меню.

Чтобы перейти для добавления иконок, еще раз жмем слева в меню на пункт «Icons» и загружаем нашу первую иконку с помощью кнопки «Выберите файлы»:

Загружаем иконку

Иконка может загрузиться, но при этом не появиться ниже. Поэтому обновляем эту страницу (жмем F5 или же на элемент меню «Icons» слева).

Как правило, всегда загружается две иконки: в исходном размере и, с заданными размерами в настройках. Если вам больше не нужна иконка в исходном ее размере, тогда можете ее удалять (просто нажав на кнопку «Удалить» рядом с иконкой).

Сейчас переходим в пункт «Add icons to Categories»:

Иконки и категории

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

Выбор иконок для категории

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

Где брать иконки?

Иногда возникает проблема с поиском иконок. Для этого я даю вам ссылки не некоторые сервисы с поиском (на английском) иконок онлайн:

  • Flat Icons
  • IconFinder
  • Icon Archive

Выводы

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

Успехов!

С Уважением, Юрий Немец

Как добавить иконки для элементов меню WordPress 5.00/5 (100.00%) 3 голос(ов)

Понравилась статья - расскажи друзьям! :)

16 комментариев к записи
  • Александр Каратаев

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

     
    • Юрий

      Александр, очень приятно читать что сайт приносит пользу 🙂 .

       
  • Ольга

    Очень понравился плагин. И внешний вид меню, действительно, визуально намного интересней. Юрий, а как много места забирают плагин вместе с иконками? Я, добавляя каждую картинку, с ужасом думаю, сколько у меня ещё свободного места останется 🙂

     
    • Юрий

      Ольга, даже с иконками он занимает не так много места. Но всё зависит от размера иконок.

       
  • Евгений

    Здравствуйте. Помогите, пожалуйста…
    Поставил плагин, все как у вас написано — все отлично, все работает. НО….
    Появилась огромное количество валидных ошибок вот такого плана:
    Line 129, Column 229: end tag for «img» omitted, but OMITTAG NO was specified
    …icons/car1-28×28.png» class=»category_icon» alt=»Прокат машин»>Прокат машин

    You may have neglected to close an element, or perhaps you meant to «self-close» an element, that is, ending it with «/>» instead of «>».

    Что это такое, где и как исправить. Подскажите если можете.

     
    • Юрий

      Добрый день, Евгений. Вот что Вам нужно сделать:

      1. Зайти в папку с плагинами и там найти папку category-page-icons.
      2. Найти файл menu-compouser.php и открыть его.
      3. Сделайть резервную копию этого файла, на случай, если что-то не заработает.
      4. Заменить 1776-ю строку на вот эту:
        $output = substr($output, 0, $pos) . $beforeImg . '<img src="'. $pg['icon'] .'" class="category_icon" alt="'. $pg['title'] .'" />'. $afterImg . substr($output, $pos);
       
  • Евгений

    😎 😎 😎 Огромнейшее спасибо! 😎 😎 😎
    Перерыл весь интернет по данной проблеме ответов нет ни где! Хорошо, что не забыл где читал инструкцию про то, как вообще поставить этот плагин, решил написать вам в комментарий, честно говоря не думал, что кто-то ответит и поможет мне с решением проблемы и даже уже начал искать, просматривать другие плагины по этой теме…
    Был просто неслыханно удивлен такому быстрому ответу. Еще раз огромнейшее спасибо автору блога — без сомнения добавляю ваш сайт в закладки.

    PS Если уж на то пошло — есть ли у вас где-нибудь инструкция, как установить кнопочку вверх, которая переносит страницу вверх, обычно ее ставят справа внизу?))

     
    • Юрий

      Я рад, что у Вас всё получилось!
      Чтобы Вам было легче, воспользуйтесь плагином для WordPress — WPFront Scroll Top. Он настраивается через админ-часть и нет необходимости лезть в код.

       
  • Евгений

    Ой забыл написать самое главное — решение подошло — не одной дополнительной ошибки больше нет!!! Кому интересно как я реализовал это у себя можете посмотреть у меня на сайте (ссылки в комментариях запрещены).

     
  • Евгений

    Скажите а плагины вообще сильно тормозят сайт? а то я уже много всяких понаставил)))
    Может быть мне лучше через код поставить стрелку?

     
    • Юрий

      Можете и через код 🙂 . Я использовал плагин jQuery.UI.toTop.js.

       
  • Светлана

    Здравствуйте, плагин установила, активировала а вот иконки не загружаются. Пишет Direct access to this file do not allow!

     
    • Юрий

      Здравствуйте, Ольга!
      Ошибка похожа на то, что проблемы в файле с плагином. Но Вам нужно проверить есть ли права на доступ к папке с иконками. Путь задан на 4-м изображении сверху, где голубая стрелка указывает на поле. Права на доступ поставьте 777. Сделать это можно с помощью Total Commander.

       
      • Светлана

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

         
  • Сергей

    Здравствуйте! У меня этот плагин почему то не загружает иконки с компьютера. Поставил плагин "Меню Айкрнс" он нормально работает,но там иконки сбоку ставятся. Подскажите как сделать,что бы картинки стояли сверху как у вас в главном меню?

     
    • Юрий Немец

      Здравствуйте, Сергей! В верхнем меню плагин не используются, только верстка, которую я сам написал с CSS3 эффектами при наведении.

       

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

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