Плагин для иконок wordpress.
Многие опытные мастера предпочитают добавлять иконки в меню . Например, они помогут существенно сэкономить место – вместо надписи Домашняя страница будет изображен милый и компактный домик. Кроме того, довольно часто именно изображения позволяют понять намного больше, чем обычный текст. Да и воспринимаются иконки быстрее, чем текстовые названия.
Если вы решили установить в меню своего сайта иконки, сделать это можно посредством трех способов:
- подключив Font Awesome – для этого необходимо знать код, а потому такой метод не подойдет новичкам;
- используя специальное расширение Menu Image – данный метод ориентирован не столько на изображения, а больше на символьные шрифты;
- работая с CSS – универсальный метод.
Ниже мы подробно рассмотрим каждый способов. Ознакомившись с их описаниями, вы сможете понять, какой же вам подходит более прочих.
Для того, чтобы в меню вашего сайта появились иконки, необходимо перейти в административную панель, выбрать «Внешний вид» - «Меню». Для добавления нового элемента вы также можете использовать подразделы «Страницы» или «Произвольные ссылки».
Какой бы именно метод вы не используете, важно в строке «Текст ссылки» прописать код Font Awesome. К примеру, для главной страницы он будет иметь следующий вид:
После добавления кода необходимо обязательно сохранить изменения, нажав на соответствующую кнопку. И посмотреть результат на сайте.
Отметим, что новые темы для ВордПресс зачастую уже имеют подключенные скрипты. А потому вам не нужно больше ничего делать. Если же таких скриптов нет, то вам нужно будет выполнить подключение шрифта. Для этого в раздел 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 представлены прочие иконы для меню вашей платформы.
Интересно, что в отдельных статьях можно встретить рекомендации разработчиков по включению в стили:
#menu-item-121 a, #menu-item-122 a {font-family: FontAwesome;}
Плагин Menu Image
В этом разделе рассмотрим расширение Menu Image, посредством которого в меню добавить картинки очень и очень легко. И вам не придется использовать коды. Ведь для установки изображений достаточно будет поместить внутрь тэга ссылку. Делается это в административной панели.
После того, как установите плагин, переходите в подраздел «Внешний вид» - «Меню», там будут доступны все настройки.
Обратите внимание! Если вы уже используете расширение WPML, вам необходимо перейти «WPML» - «WP Menus Sync» и нажать на кнопку, которая выполняет синхронизацию.
Описываемый плагин имеет определенные опции и «фишки», среди которых:
- дополнительная кнопка, посредством которой проводится загрузка изображения для навигации;
- еще один вариант иконки меню, появляющийся при наведении;
- выбор места положения заголовка – фактически, с любой стороны иконки;
- выбор размера иконки.
Если перейти в раздел FAQ плагина, который представлен на сайте WordPress.org, то можно прочитать много интересного. Например, о том, как удалять или добавлять необходимые вам размеры иконок, используемых в меню.
Ниже представленный код позволит вам удалить стандартный для иконок размер (48 на 48) и установить так называемые мини-иконки, размер которых составляет 16 на 16.
add_filter(‘menu_image_default_sizes’, function($sizes) {
// remove the default 48×48 size
unset($sizes[‘menu-48×48’]);
// add a new size
$sizes[‘menu-16×16’] = array(16,16);
// return $sizes (required)
return $sizes;
Прочие особенности расширения, его возможности вы можете прочитать в описании плагина.
CSS стили
- перейдите в панель администратора «Внешний вид» - «Меню», в правом верхнем углу кликните по кнопке «Настройки экрана» и активируйте подпункт «Классы CSS»;
- после этого в меню появится новый элемент – это класс стилей, подпишите его так, как вам удобно. К пример, это может быть my-menu;
- выберите пункт «Медиафайлы» и подгрузите через него ту картинку, которую вы хотите использовать;
- далее следуйте к файлу стилей шаблона (он именуется 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;
В завершение: подводим итоги
Здесь следует учитывать то, какую именно задачу вы поставили и как хотите ее решить. Так, те же , существенно упрощают работу новичкам. Однако эта информация может показаться чрезмерно избыточной.
А вот пример с Font Awesome станет идеальным выбором для тех, кто уже применяется на своем сайте указанный скрипт. Выполнить его подключение через административную панель ну очень просто!
А третий метод требует от пользователей знания принципов верстки или простой внимательности при использовании кода, указанного в конце материала.
У вас есть свои способы и методы добавления иконок в меню? Поделитесь ими!
Подпишитесь на блог и вы не пропустите важные обновления!
Степан, почему вы решили что таким методом будут выводиться иконки и какой вообще background? Не в меню не в рубриках таким способом выводиться они не будут. Лично проверял на четырех разных шаблонах вордпресс и только потом до меня дошло как надо сделать правильно. Для начала надо понять где их вывести. Вот пример вывода в сайтбаре:
Вот теперь выводим иконку для рубрики вот так:
Sidebar li.cat-item-2 { list-style-image: url("images/каптинка.png"); }
Обязательно должен присутствовать класс cat-item-ваш id рубрики. И никаких background. Не верите можете проверить сами, разница большая
У некоторых сайдбар может выводиться не классом а id, тогда код будет вот такой:
#sidebar li.cat-item-2 { list-style-image: url("images/картинка.png"); }
Все. Теперь только сделать отступы если нужно.
Вот теперь этот код будет работать.
В статье у меня было написано – “…для всех ссылок в меню или в рубриках будет присвоен класс menu-item- , но с уникальной цифрой, например вот так:
Вы все тоже написали, только другими словами.
Если вы в админе добавили меню через (“админ-панель” => “Внешний вид” => “меню”), то класс будет menu-item-хххххх
Если вы в админе добавили категорию через виджеты (“админ-панель” => “Внешний вид” => “виджеты”), то класс будет cat-item-хххххх
На всех моих макетах все работает. Можете проверить на моем блоге.
Почему я поставил background, да потому что list-style-image почему-то не заработал.
Александр отвечает:
04.01.2016 в 09:48
Я говорю про то что если просто прописать cat-item-хххххх и задать к нему картинку, то не будет ничего работать. Вот сами прикиньте, что cat-item есть в меню и есть в сайдбаре, так вот, для какого cat-item вы будете делать иконки? Для этого надо и прописать перед cat-item .sidebar li. или меню где будут стоять иконки. А разница между background и list-style-image в том, что background задает фот списка, а list-style-image задает фон маркера списка. Вот и все.
Вы не правы, Александр. Сейчас объясню почему. Не у всех шаблонов есть класс “sidebar” и ваш стиль работать вообще не будет. Как на мой взгляд достаточно прописать вот это:
Li#menu-item-xxx{стиль;}
xxx – айди стр.
Если ошибаюсь, поправьте. Но повторюсь, что на всех моих макетах работает именно такой способ. Насчет “list-style-image”, я с вами согласен, но когда что-то не работает, то приходиться выкручиваться. У меня лично на одном сайте “list-style-image” для категорий не прошел (ставил даже приоритет), вот и пришлось использовать background.
Александр отвечает:
04.01.2016 в 10:12
Хорошо, я спорить не буду. Действительно шаблоны есть разные. И если нет элемента “sidebar”, то наверно будет работать по вашему. А на счет как лучше привязать иконку, то конечно бывает что без танца с бубнами не обойтись.
Вот я попробовал ваш код и не сработал, пришлось доставать бубны, и после некоторого времени все получилось.
Танец с бубнами над кодом это вещь сильная, без него порой не обойтись
Иконки — немаловажная часть любого дизайна. Многие иконки являются общепризнанными. К примеру, обозначения уборных в аэровокзалах. Ведь даже без знания языка, благодаря иконкам на дверях, вы без труда поймете, где находится мужская, а где — женская комната.
То же самое применимо к веб-сайтам. Отображаемые иконки помогут посетителям в навигации по сайту, увеличат удобство пользования ресурсом и сделают внешний вид страницы более привлекательным.
Однако процесс добавления иконок в меню CMS типа WordPress может оказаться непростой задачей. Если ваш сайт построен на WordPress , это руководство окажется полезным для вас и вы найдете самый простой способ отображения иконок в меню навигации.
Приступим
Добавлять иконки мы будем с помощью плагина Menu Icons . Для начала установите, и активируйте его:
Все готово. Можем приступать.
Добавление иконок
В этом примере я буду использовать TwentyTwelve , аккуратную и прозрачную тему WordPress . Также я создам несколько страниц, которые включу в меню.
Создаем пункт меню через Вид>Меню (Appearance > Menus ). Не забудьте определить местоположение пункта меню, пока он не появится на сайте:
Теперь мы добавим иконки для каждого пункта. Развернем один из пунктов. Там вы найдете ссылку «Иконка: выбрать иконку » (Icon: Select icon ). Выбираем пункт «Выбрать иконку » (Select icon ). Откроется окно аналогичное окну медиа-библиотеки WordPress .
На момент написания этой статьи, плагин Menu Icons поставлялся с тремя библиотеками иконок — Dashicons , Genericons , и FontAwesome .
Можно набрать иконки сразу из трех библиотек. Но лучше сделать набор из одной. Потому как в библиотеках иконки подобраны по подобию, имеют схожие размеры и изгибы.
Иными словами, если начали использовать FontAwesome — используйте на сайте только эту библиотеку. Это позволит сохранить согласованность в стиле и придать сайту законченный вид:
При выборе иконки справа вы увидите превью. На панели справа можно произвести некоторые настройки. Можно поместить иконку перед или после пункта меню, изменить размер шрифта и установить вертикальное выравнивание.
Когда все настройки произведены, нажимайте кнопку Select и проделайте аналогичные действия с оставшимися пунктами меню:
Заключение
Плагин Menu Icons удобен и прост в использовании. Он великолепно интегрируется в интерфейс WordPress UI и интуитивен в использовании. Вдобавок ко всему разработчики планируют в следующих версиях включить несколько новых функций, включая новые библиотеки с иконками и возможность загрузки пользовательских иконок.
Надеюсь, это руководство окажется полезным для вас. Экспериментируйте и вы достигнете результата.
Перевод статьи «How To Display Icons In WordPress Menu » был подготовлен дружной командой проекта .
Хорошо Плохо
Существует несколько причин для создания в WordPress меню с картинками (иконками). Во-первых, это отличный способ сэкономить место, заменив название главной страницы на «домик». Во-вторых, некоторые символы говорят намного больше нежели текстовые значения — кнопки Facebook, Twitter и т.п. И наконец, в-третьих, графические элементы могут сделать навигацию более наглядной за счет добавления изображений, например, в список категорий. Все три варианта вы можете видеть с превьюшке поста слева. А ниже я расскажу как их можно реализовать.
Итак, по сути, есть три принципиально разных метода вставки иконок в меню WordPress:
В первом случае придется немного «покодить», что не всем новичкам под силу. Второй же ориентирован больше на полноценные изображения, а не символьные шрифты. Третий — вообще универсален.
Иконки в WP меню с помощью Font Awesome
Ранее я уже писал детальную статью про использование . В ней найдете примеры кода для добавления символов в заголовки виджета, контент и навигацию. Хотя, последний вариант реализовывался там несколько иным образом нежели в текущем посте. Можете посмотреть, если интересно.
1. Итак, дабы вставить картинку в меню Вордпресс первым делом заходим внутри админки в раздел «Внешний вид» — «Меню». Создать новый элемент в навигацию сайта вы можете через «Страницы» или «Произвольный ссылки».
Какой бы способ вы не выбрали, главное в поле «Текст ссылки» добавить код символа Font Awesome, например, для главной:
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 {font-family: FontAwesome;} |
#menu-item-121 a, #menu-item-122 a {font-family: FontAwesome;}
Здесь двум элементам с ID с номерами 121 и 122 (смотрите в HTML коде) указывается использование символьного шрифта. Возможно, это какой-то старый вариант реализации, т.к. в моем случае ничего кроме подключения скрипта не требовалось. Однако на всякий случай дополнительно привожу эти стили.
Важный нюанс/проблема! Так как текст в данном пукте, по сути, отсутствует, то в мобильной версии навигации строка «Главная» не отобразится. Поэтому, если адаптивное меню в теме создается автоматически, вероятно, придется отказаться от такой реализации в пользу варианта из . При этом тексту в CSS ставите свойство text-indent: -99999px, а отображение иконки задаете в псевдоэлементе before.
WordPress плагин для меню с картинками
2. Этот прием добавляет в пункты новый элемент — класс стилей. Указываем в желаемом объекте название, например, my — menu .
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 ; } |
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 ; } |
li#menu-item-2996 a:before { content: "\f015"; font-family: FontAwesome; padding-right: 7px; }
Все зависит от того какую именно задачу вы хотите решить. WordPress плагин для меню с картинками значительно облегчает работу начинающим пользователям, хотя, возможно, он немного избыточен. Вариант с Font Awesome идеально подойдет, если у вас на сайте уже используется данный скрипт. Подключать его через WP админку проще простого. И наконец третий способ требует от вас небольших знаний верстки либо внимательного применения кода из статьи.
А что вы делаете для вставки картинки или иконки в меню WordPress? Делимся опытом и приемами ниже.