Как использовать иконки Bootstrap в WordPress? –

Bootstrap — один из самых популярных интерфейсных фреймворков, изначально разработанный Twitter. Основной целью фреймворка является создание веб-сайтов, удобных для мобильных устройств, с использованием повторно используемых компонентов. Первоначально Bootstrap предлагал Glyphicons, затем использовал Font Awesome, а теперь предлагает собственный набор иконок, называемый Bootstrap Icons. Вы можете использовать значки Bootstrap на любом из ваших веб-сайтов, включая сайты WordPress. Хорошая часть заключается в том, что вам не нужно использовать базовый фреймворк CSS и JS для использования значков. В этой статье мы объясним, как использовать значки Bootstrap на сайтах WordPress. Если вы хотите узнать больше о Bootstrap, ознакомьтесь с нашими руководствами по Bootstrap 5.

Иконки начальной загрузки

Еще несколько лет назад Font Awesome был настолько популярен, что почти каждый разработчик и владелец веб-сайта использовал его. Первоначально он был разработан для использования с Bootstrap, который по существу заменен бесплатным набором значков Bootstrap. Вы можете использовать значки Bootstrap двумя способами в любом проекте — SVG и веб-шрифты. В случае, если SVG не работает на вашем сайте WordPress, вы можете использовать опцию веб-шрифтов.

Использование иконок в WordPress включает два шага:

• Связывание иконок CSS в заголовке
• Встраивание HTML в контент

Связывание иконок Bootstrap CSS в WordPress

Хотя вы можете загружать и размещать значки на своем сервере, проще всего использовать их ссылку CDN. Вот последняя ссылка CDN для иконок Bootstrap:

Вам нужно вставить эту ссылку в раздел заголовка вашего сайта WordPress. Существует множество бесплатных плагинов для вставки ссылок CSS в заголовок, например Insert Headers and Footers By WPBeginner. Однако этот плагин не дает никакого контроля над вставкой ссылки только на несколько страниц. По умолчанию файл CSS будет загружаться на весь ваш сайт в шапке. Это может не потребоваться, если вы хотите использовать значки только для нескольких сообщений или страниц. В таком случае вы можете использовать плагин Header Footer Code Manager, о котором мы расскажем в этой статье.

• Войдите в панель администратора WordPress и перейдите в раздел «Плагины > Добавить новый».
• Найдите «код заголовка», чтобы найти Менеджер кода верхнего колонтитула плагин.
• Нажмите кнопку «Установить» и кнопку «Активировать», чтобы начать использовать плагин на своем сайте.

Установите плагин Header Footer Code Manager

После активации плагина он добавит новый пункт меню на боковой панели под названием HFCM. Наведите курсор на меню HFCM и выберите опцию «Добавить новый». Вы увидите два раздела — один для управления фрагментом, а затем поле для вставки фактического кода. Заполните следующие данные в первом разделе:

• Имя фрагмента — введите имя для своего фрагмента, например, значки Bootstrap.
• Тип фрагмента — выберите CSS из выпадающего списка.
• Отображение сайта — здесь выберите опцию «По всему сайту» для вставки CSS на весь ваш сайт. В противном случае выберите один из доступных вариантов, таких как конкретные сообщения, страницы, категории, теги, домашняя страница и т. д. Вы увидите дополнительные параметры в зависимости от вашего выбора. Например, при выборе определенных сообщений будет отображаться раскрывающийся список «Список сообщений» для выбора ваших сообщений. Вы можете выбрать один или несколько сообщений, в которых вы хотите отображать значки. Если вы хотите использовать весь сайт, то можно исключить загрузку CSS на определенных постах и ​​страницах, выбрав их из списка исключений.
• Расположение – выберите вариант заголовка.
• Отображение устройства — выберите опцию «Показать на всех устройствах». При необходимости вы можете выбрать только на компьютере или мобильном телефоне.
• Статус – выберите опцию «Активный».

Заполните детали фрагмента

После заполнения всех данных вставьте ссылку CDN в раздел «Snippet/Code».

Добавить CSS-ссылку CDN

Нажмите на кнопку «Сохранить», чтобы применить изменения.

Вставка HTML для иконок

Теперь, когда вы вставили CSS в раздел заголовка, следующим шагом будет встраивание HTML для ваших значков. Подобно иконкам Font Awesome, каждая иконка Bootstrap также имеет кодовую точку и соответствующее имя класса CSS. Ты можешь обратитесь к странице значков чтобы получить полный список имен классов CSS для всех ваших любимых значков. Все, что вам нужно, это встроить код HTML с правильным именем класса CSS значков, используя блок Custom HTML. Вы можете использовать SVG или веб-шрифты, поскольку связанный CSS из CDN допускает оба варианта.

Использование веб-шрифтов

Это самый простой вариант, так как вам нужно знать только имя класса CSS для вашего значка. Например, ниже приведен формат для вставки шрифта значка WhatsApp.

Вы можете изменить размер и цвет, добавив встроенный CSS, как показано ниже:

Вы можете просто вставить этот код в блок Custom HTML.

Вставить веб-шрифт HTML

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

Иконка Bootstrap в опубликованном посте

Вы можете добавить дополнительные значки в тот же блок Custom HTML, чтобы отобразить полный список значков социальных сетей в виде виджета. Если вы хотите добавить гиперссылки к своим значкам, просто оберните значки HTML-тегами привязки. Вы также можете использовать   чтобы добавить пространство между значками. Ниже приведен код социального виджета с иконками Facebook, Twitter, YouTube.

Добавление дополнительных значков

Это будет выглядеть так, как показано ниже на опубликованном посте.

Значки социальных виджетов с использованием значков SVG

Чтобы использовать формат SVG, вам необходимо получить SVG для значков и класс CSS. Вы можете получить это, щелкнув значок на странице значков Bootstrap и скопировав код в разделе «Копировать HTML», как показано ниже.

Скопируйте HTML-код SVG для значка Bootstrap

SVG будет в следующем формате, а размер значка по умолчанию контролируется свойствами ширины/высоты.

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

Теперь вы можете встроить этот код в пользовательский HTML на своем сайте WordPress. Вы можете либо щелкнуть предварительный просмотр, чтобы увидеть значок, либо опубликовать сообщение, чтобы просмотреть значок на странице в реальном времени.

Заключительные слова

Поскольку значки Bootstrap имеют открытый исходный код и доступны бесплатно, вы можете использовать их для украшения своего контента WordPress. Мы рекомендуем использовать вариант веб-шрифта, который требует только имя класса CSS для значков. Однако вы можете использовать SVG, если вам удобно. Обратите внимание: если вы уже используете тему WordPress на основе Bootstrap, ссылка CSS для значков должна быть частью вашей темы, и вам не нужно вставлять ее с помощью плагина.