Меню

Как установить иконки в меню wordpress

Иконки в меню WordPress — добавляем вручную и с плагином

Существует несколько причин для создания в WordPress меню с картинками (иконками). Во-первых, это отличный способ сэкономить место, заменив название главной страницы на «домик». Во-вторых, некоторые символы говорят намного больше нежели текстовые значения — кнопки Facebook, Twitter и т.п. И наконец, в-третьих, графические элементы могут сделать навигацию еще нагляднее за счет добавления изображений, например, в списке категорий. Все три варианта вы можете видеть с превьюшке поста слева. А ниже я расскажу как их можно реализовать.

Итак, по сути, есть три принципиально разных метода вставки иконок в меню WordPress:

В первом случае придется немного «покодить», что не всем новичкам под силу. Третий ориентирован больше на полноценные изображения, а не символьные шрифты. Последний — вообще универсален.

Иконки в WP меню с помощью Font Awesome

Ранее я уже писал детальную статью про использование Font Awesome в WordPress. В ней найдете примеры кода для добавления символов в заголовки виджета, контент и навигацию. Хотя, последний вариант реализовывался там несколько иным образом нежели в текущем посте. Можете посмотреть, если интересно.

1. Итак, дабы вставить картинку в меню Вордпресс первым делом заходим внутри админки в раздел «Внешний вид» — «Меню». Создать новый элемент в навигацию сайта вы можете через «Страницы» или «Произвольный ссылки».

Какой бы способ вы не выбрали, главное в поле «Текст ссылки» добавить код символа Font Awesome, например, для главной:

После этого кликаете по кнопке сохранения (про создание меню читаем тут). Проверяете результат на сайте.

2. Если вы используете современную тему, вполне возможно, необходимые скрипты уже подключены к ней, и больше ничего делать не нужно. В противном случае придется самостоятельно подключить данный символьный шрифт на сайт. Для этого добавляем в functions.php следующий код:

Скачивать скрипт не нужно, он грузится прямо с официального сайта сервиса. Там же в разделе Icons сможете посмотреть коды других иконок для WordPress меню (выбирайте бесплатные варианты).

Конечно, при этом для соответствующих пунктов меню надо будет задать шрифт иконок:

#menu-item-121 a, #menu-item-122 a

Здесь двум элементам с ID с номерами 121 и 122 (смотрите в HTML коде) указывается использование символьного шрифта. Возможно, в некоторых макетах данная фишка уже подключена по умолчанию, например, в моем случае никаких дополнительных действий не требовалось. Тем не менее, на всякий случай все равно приведу эти стили.

Важный нюанс с адаптивностью

Поскольку заголовок в пункте меню из примера выше отсутствует, то в мобильной версии текст «Главная» не отобразится. Существует несколько вариантов решения этой задачи:

Иконка домика перед меню (хак)

Преимущество метода в том, что вам не придется создавать новый пункт через WP-админку, ссылка добавляется с помощью php-сниппета, что надо будет разместить в файле функций functions.php:

Преимущество метода в том, что вы можете и не использовать символьный шрифт (если в теме он не подключен), а просто добавить вывод картинки домика.

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

Тут есть парочка нюансов. Фильтр будет применен для меню, привязанного к локации (месту в шаблоне) под названием main_menu, поэтому иконка домика появится только там. Кроме того автоматически считывается заголовок главной страницы (учтите это, если у вас он какой-то специфический). Ну, и как вы сами понимаете, «проблемы» с поддержкой адаптивности, озвученные чуть выше, здесь также надо решать.

Читайте также:  Как установить русификатор для прошоу продюсер

WordPress плагин для меню с картинками

Модуль Menu Image позволяет легко добавлять картинки в меню Вордпресс без каких-либо кодов. Изображения вставляются внутрь тега ссылки через админку. Решение достаточно популярное — 50к активных пользователей, рейтинг 4.9.

После установки все настройки найдете в разделе «Внешний вид» — «Меню». Если быть точным, то они отобразятся в самих элементах меню. Владельцам плагина WPML придется дополнительно зайти в «WPML» — «WP Menus Sync» и кликнуть по ссылке синхронизации. Если у вас его нет, ничего делать не нужно.

Menu Image добавляет несколько дополнительных опций:

В разделе FAQ модуля на wordpress.org есть парочка интересных хаков и вопросов. В частности можете удалить/добавить размеры создаваемых картинок в меню.

Данный код удалит стандартный размер 48×48 и подключит вариант с мини иконками 16×16. Остальные сниппеты ищите в описании Menu Image.

Теоретически, вы также можете использовать модуль Max Mega Menu в WordPress дабы не просто добавлять мини-изображения в пункты навигации, но и создавать их исключительно из иконок (кнопки без текста).

Вариант с CSS стилями

Эта возможность подойдет тем, кто плюс-минус нормально ориентируется в верстке.

1. В разделе админки «Внешний вид» — «Меню» в правом верхнем углу открываем «Настройки экрана» и активируем пункт «Классы CSS».

2. Этот прием добавляет в пункты Wodpress меню новый элемент — класс стилей. Указываем в желаемом объекте название, например, mymenu.

3. Затем переходите в раздел «Медиафайлы» и загружаете необходимое для показа изображение.

4. После этого открываете файл стилей шаблона (style.css) и вставляете туда следующий код:

Сохраняете и смотрите результат.

В принципе, как я уже говорил выше, тут есть разные нюансы. Во-первых, можно было бы вообще не создавать новый класс, а просто посмотреть HTML код сайта и прописать стили, например, для #menu-item-121 и т.п. — система автоматически добавляет ID каждому пункту навигации.

Во-вторых, данный пример использования CSS свойства background можно заменить на тот же Font Awesome:

Все зависит от того какую именно задачу вы хотите решить. WordPress плагин для меню с картинками значительно облегчает работу начинающим пользователям, хотя, возможно, он немного избыточен. Вариант с Font Awesome идеально подойдет, если у вас на сайте уже используется данный скрипт. Подключать его через WP админку проще простого. И наконец четвертый способ требует от вас небольших знаний верстки либо внимательного применения кода из статьи.

А что вы делаете для вставки картинки или иконки в меню WordPress? Делимся опытом и приемами ниже.

Источник

Как добавить в WordPress красивые иконки (иконический шрифт)

Чтобы добавлять в текст красивые иконки, такие например:

необходимо установить в WordPress какой-нибудь так называемый иконический шрифт. Такие иконки и называются иконическим шрифтом.

Чтобы начать добавлять иконки в ваши посты, надо сделать следующее:

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

Читайте также:  Как установить задний переключатель на велик

Самые популярные иконические шрифты

Самый популярный шрифт с иконками – это Font Awesome, его мы и будем устанавливать. Другие известные мне иконические шрифты, это: Genericons, IcoMoon, Linearicons.

И есть еще один иконический шрифт, который называется

Dashicons

и который интересен тем, что этот шрифт встроен в WordPress, и его иконки вы можете увидеть в меню админки WordPress. Посмотреть его можно по этой ссылке на официальном сайте WordPress: Dashicons. Да, он красивый, да, он встроен в Вордпресс, но не радуйтесь: использовать его в своих постах на момент написания этой статьи не так уж и просто, если только вы не вставите в файл functions.php вот этот вот код:

Работу этого кода я не проверял, нашел его здесь: Enable Dashicons in WordPress Frontend. Думаю, что все должно работать, так как подобный же код я видел и на других авторитетных сайтах.

– Какого черта? – ругаюсь я, – ведь все было бы так просто. Можно было бы просто вставлять иконки Dashicons в посты и все. Я стараюсь по возможности не трогать functions.php, поэтому лучше уж я установлю плагин для Font Awesome. Надеюсь, что в одном из обновлений WordPress разработчики добавят возможность вставлять Dashicons в посты.

Как установить иконки Font Awesome в WordPress

Есть два способа. Добавить код или установить плагин Better Font Awesome. Я буду использовать плагин, но можно установить Font Awesome, добавив следующий код в functions.php:

function wpb_load_fa() <
wp_enqueue_style( ‘wpb-fa’, ‘https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css’ );
>
add_action( ‘wp_enqueue_scripts’, ‘wpb_load_fa’ );

Как добавлять иконки Font Awesome в тексты WordPress

Итак, вы установили плагин Better Font Awesome. Как теперь добавлять иконки в посты? Есть два способа:

Использовать кнопку “Вставить иконку”,

которая появится в редакторе WordPress после установки плагина Better Font Awesome и будет выглядеть так:

Этот способ подойдет вам, если вас устроят серые иконки маленького размера. Но мне он не очень понравился, так как в результате в HTML вставляется такой вот код в квадратных скобках: icon name=”apple” unprefixed_class=””, в котором “apple” – это название иконки, а еще добавлено два пустых класса. Т.е. этот плагин добавляет избыточный код, а еще, чтобы поменять цвет и размер иконки, необходимо задавать класс в таблице стилей, что сложно. Поэтому я не использую этот способ, а использую следующий способ попроще.

Вставлять HTML-код с названием иконки

Надо просто скопировать его и вставить в HTML-код нашей странички. Это действительно самый легкий способ!

Как изменить размер иконки Font Awesome

Чтобы изменить размер иконки Font Awesome, необходимо добавить код размера в HTML-код иконки (обязательно в то же место, как указано ниже – перед закрывающими кавычками class):

Таким образом, добавив код fa-3x, мы увеличили нашу иконку в три раза:

Как изменить цвет иконки Font Awesome

Для изменения цвета нашей иконки добавим в код иконки код стиля с указанием цвета:

В качестве кода цвета можно использовать любой из кодов цветов, указанных на сайте: htmlcolorcodes.com/color-names/, при этом можно использовать как названия цветов на английском языке, так и их коды, указанные там же.

Читайте также:  Как установить wifi адаптер pci

Таким образом, после добавления style=”color:green” наша иконка стала зеленой:

Дополнительные возможности иконок Font Awesome

С иконками Font Awesome можно сделать еще много красивых и интересных вещей. Какие еще есть возможности, можно посмотреть по этой ссылке: fontawesome.io/examples/.

Заключение

С одной стороны, когда разберешься, то не так уж все и сложно, а с другой стороны, очень хотелось бы, чтобы появилась возможность просто копировать и вставлять нужные иконки, а потом менять их размер и цвет так же, как размер и цвет обычного шрифта без правки HTML-кода.

Может быть, это реализовано в одном из плагинов? А может, вы знаете более простой способ добавлять иконки? Если да, то поделитесь, пожалуйста, в комментариях.

Я много лет пользовался плагином Better Font Awesome, но потом оказалось, что он “сжирает” почти 1,5 секунды скорости загрузки на каждой странице сайта (даже на тех странцах, где не использовался иконический шрифт!). Теперь я сам не использую его и вам не рекомендую.

Иконическими шрифтами я больше не пользуюсь, но если бы и стал использовать, то в первую очередь попробовал бы Dashicons, но обязательно проверил бы как использование этого шрифта влияет на скорость загрузки сайта. Также можно попробовать все-таки использовать Font Awesome, но без плагина.

Пост опубликован 6 февраля 2017, обновлен 13.07.2020.

Источник

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

Приветствую вас, дорогие друзья!

В данной статье я покажу один очень простой способ добавления иконок в меню сайта, работающего на WordPress.

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

Навигация по статье:

Плагин для добавления иконок в меню WordPress

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

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

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

Теперь переходим на сайт и смотрим, что у нас получилось:

При наведении на определенный пункт иконка так же изменяет свой цвет.

Плагин для добавления изображений в меню WordPress

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

Для этой цели тоже есть соответствующий плагин для WordPress, который называется Menu Image.

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

В результате использования данного плагина можно получить вот такое простое и интересное меню для сайта на WordPress с картинками.

Если сюда подключить ещё немного фантазии, то можно получить очень привлекательное и оригинальное меню.

Видеоинструкция

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

Спасибо за то, что посетили мой сайт! До встречи в следующих статьях!

Источник

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

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