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

Владислав Белецкий
Владислав Белецкий .
Категория:
Комментариев: 0

Иконки являются отличным дополнением к любому типа дизайна. Многие из них являются общепризнанными. Возьмите. например, иконку туалета в аэропорту. Без знания местного языка, если он не знаком вам, можно с легкостью определить, какая из кабинок для женщин, а которая — для мужчин только по виду значка на входной двери.

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

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

Вступление

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

plugin-activated[1]

Теперь все готово для того, чтобы добавлять иконки в меню.

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

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

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

main-navigation[1]

Затем мы добавляем иконку для каждого элемента. Для начала, давайте раскроем один из наших элементов меню. Там вы увидите ссылку с текстом Icon: Select icon. Кликните на “Select icon” для начала выбора иконки. Здесь вы увидите окошко, похожее не библиотеку медиафайлов WordPress.

На текущий момент написания статьи в плагине представлено 3 иконочных библиотеки шрифтов, это Dashicons, Genericons, и FontAwesome.

И пусть у нас есть выбор, какие именно иконки использовать, всё же будет лучше выбирать их из одной библиотеки в виду того, что у каждой из них свое начертание, размер и т.д. Другими словами, если вы используете шрифт FontAwesome, то используйте его на всем сайте. Это позволит сохранить целостность дизайна и иконки будут выглядеть более «унифицированно».

selecting-icon[1]

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

final-result[1]

Заключенгие

Menu Icons — это очень полезный и удобный плагин для того, чтобы добавить иконки в ваше меню. Он интегрируется в интерфейс WordPress, что делает его использование интуитивно понятным. В дополнение к этому, разработчик планирует добавить несколько новых функций в ближайших версиях, в том числе и добавление новых библиотек иконок, а также возможно загружать иконки самостоятельно.

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

По всем вопросам и отзывам просьба писать в комментарии ниже.

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

VN:F [1.9.22_1171]

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии