Spread the love

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

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

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

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

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

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

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

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

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

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

Что такое WordPress Dashicons?

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

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

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

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

  • Панель управления 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 в Firefox.

Как извлечь максимальную пользу из WordPress Dashicons?

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

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

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

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

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

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

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

3. На серверной части WordPress

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

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

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

Вывод

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

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

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

x