Как его использовать и извлечь из этого максимальную пользу?

Как его использовать и извлечь из этого максимальную пользу?

Иконки завораживают!

У них есть возможность быстро общаться с аудиторией, устанавливая сильную визуальную связь.

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

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

А потом будешь искать что-то поинтереснее, пользуясь, и опять надоест,

И цикл продолжается и продолжается…

Итак, как вы можете пропустить этот цикл скуки?

Дашиконы — отличный способ!

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

Итак, давайте рассмотрим Dashicons и то, как вы можете эффективно использовать их на своем сайте WordPress.

Что такое дашиконы WordPress?

Dashicons — это официальные иконочные шрифты WordPress, которые были представлены несколько лет назад в версии 3.8. Эти шрифты классные, и на них приятно смотреть, если вы используете их на своем веб-сайте. Это файлы SVG высшего качества, которые можно легко масштабировать до любого размера без пикселизации.

Поскольку у них есть встроенная поддержка WordPress, потому что они были созданы их собственной командой, вы можете использовать их напрямую, не загружая никаких дополнительных скриптов. Включено около 350 иконочных шрифтов, которые вы можете найти в официальном документе WordPress Developer Resources.

Они классифицировали эти значки на основе темы, плюс вы можете увидеть динамическое окно поиска, которое позволяет фильтровать доступные значки.

Вы можете использовать эти значки на:

  • Панель управления WordPress
  • Меню навигации
  • Страницы и посты
  • Метаданные
  • Элементы редактора
  • Пользовательские плагины и темы
  • Панели администратора
  • Интерфейсный дизайн

Вы заметили, что я продолжаю говорить «иконы»?

Я имею в виду только иконочные шрифты.

Не изображения значков.

Да, между ними есть разница.

Давайте сломаем это.

Разница между изображениями значков и шрифтами значков?

Иконочные шрифты и графические иконки чем-то похожи, но вместо алфавитов в иконочных шрифтах присутствуют векторные символы.

Это стало слишком техничным?

Позвольте мне прояснить это.

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

Они предоставляют вам много преимуществ.

Как?

Узнайте в следующем разделе.

Зачем вам их использовать?

  • Масштабируемы, как тексты, используемые на вашем веб-сайте, потому что они являются шрифтами.
  • Легкий, который не влияет на скорость загрузки вашей страницы по сравнению с изображениями
  • Он может установить цвет значка с помощью CSS и добавить дополнительные свойства, такие как цвет градиента, тень и т. д.
  • Отлично подходит для экономии слишком большого количества HTTP-запросов, позволяя загружать сразу все шрифты, которые вы можете использовать на своих страницах. Если вы используете много изображений на сайте, вам придется делать много запросов на их загрузку, что увеличивает время загрузки страницы.
  • Простота в использовании и настройке по картинкам. Вы можете добавлять отличительные и креативные символы без необходимости воссоздавать их каждый раз, когда вам нужен значок для видеоплеера, электронной почты, музыки или чего-либо еще.
  • Большая доступность, потому что они встроены непосредственно в WordPress.

Как их использовать?

Использование Dashicons — это не ракетостроение.

Поверьте мне; Я знаком с обоими :0

Просто выполните несколько шагов, перечисленных ниже, чтобы начать работу с WordPress Dashicons.

Шаг 1. Включите Dashicons на своем сайте WordPress.

Прежде чем начать, включите Dashicons там, где они вам нужны, например, в теме. Для этого вам нужно добавить несколько кодов в файл function.php.

Сделай это:

  • Сначала перейдите в редактор тем/макетов на панели управления WordPress.
  • Откройте файл function.php.
  • Прокрутите файл до конца и добавьте несколько строк кода, чтобы выровнять сценарии.
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

В приведенном выше примере нужно включить Dashicons на веб-интерфейсе.

Перед редактированием файла functions.php убедитесь, что вы создали дочернюю тему. Это связано с тем, что если вы отредактируете файл темы напрямую, а затем для этой темы появится обновление, оно перезапишет любые изменения, внесенные вами в файл.

Шаг 2. Найдите коды HTML и CSS Dashicon

WordPress.org предлагает библиотеку Dashicons, которая поможет вам найти коды CSS и HTML, относящиеся к каждой иконке. Перейдите в Ресурсы для разработчиков здесь, чтобы найти Dashicons, которые вы хотите использовать, а затем:

  • Нажмите на значок по вашему выбору.
  • Выберите «Копировать CSS» или «Копировать HTML», нажав на него.
  • Теперь вы увидите всплывающее окно. Просто скопируйте код в буфер обмена.
  • Решите, где вы хотите использовать значок, например темы, метаданные, меню навигации и т. д.
  • Вставьте скопированный код в текстовый виджет или текстовый редактор выбранного места.
  • Измените внешний вид значка с помощью пользовательского CSS

Вот и все.

Кроме того, все значки по умолчанию имеют размер 20 пикселей. Вы можете изменить его с помощью элементов CSS из таких опций, как Inspect Element в Google Chrome или FireBug в FireBug.

Как получить максимальную отдачу от WordPress Dashicons?

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

1. Использование меню навигации

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

  • Перейдите в меню/внешний вид из панели управления
  • Скопируйте HTML-коды, предназначенные для значка меню, с WordPress.org.
  • Вставьте его в «Навигационную метку» на панели инструментов.
  • Нажмите кнопку «Сохранить», затем загрузите домашнюю страницу. Он должен отображать крутую и четкую иконку.

2. Использование в посте мета

Вы сможете использовать Dashicons только перед датой, именем автора, тегом или категорией в зависимости от темы и отображаемых данных.

Поскольку вы уже выстроили Dashicons, откройте файл style.css. В противном случае вы также можете выбрать собственный редактор CSS, который не позволит вам потерять ваши изменения после обновления темы. Затем добавьте свой код CSS, найдя подходящий селектор.

3. На фоне WordPress

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

Быстрый совет: создайте шорткод

Чтобы легко использовать Dashicons, вы можете создать для него шорткод. Это полезно, особенно когда вы создаете веб-сайт для своих клиентов, которым было бы легко вставлять дашиконы, не возясь с кодами.

Заключение

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

И знаете, «красота и мозги» — редкое сочетание.

Так что поторопитесь, используйте эти привлекательные дашиконы на своем сайте WordPress!

Поделиться в соцсетях

Читайте также