Як це використовувати та отримати максимальну віддачу?

Ікони захоплюють!

Вони здатні швидко спілкуватися з аудиторією, встановлюючи міцний візуальний зв’язок.

Ось чому піктограми широко використовуються всюди, включаючи веб-сайти WordPress.

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

А потім ви будете шукати щось цікавіше, користуючись цим, і знову станете нудьгувати,

І цикл триває і продовжується…

Отже, як ви можете пропустити цей цикл нудьги?

Дашікони – відмінний спосіб!

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

Отже, давайте вивчимо Dashicons і як їх можна ефективно використовувати на своєму веб-сайті WordPress.

Що таке WordPress Dashicons?

Dashicons — це офіційні шрифти значків WordPress, представлені багато років тому у версії 3.8. Ці шрифти круті та дивовижні, якщо ви використовуєте їх на своєму веб-сайті. Це файли SVG найвищої якості, які можна легко масштабувати до будь-якого розміру без пікселізації.

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

Вони класифікували ці піктограми на основі теми, а також ви могли побачити динамічне поле пошуку, яке дозволяє фільтрувати доступні піктограми.

  Як змінити дозволи на камеру та мікрофон сайту в Chrome

Ви можете використовувати ці значки на:

  • Інформаційна панель WordPress
  • Навігаційні меню
  • Сторінки та пости
  • Метадані
  • Елементи редактора
  • Спеціальні плагіни та теми
  • Адмін панелі
  • Інтерфейсний дизайн

Ви помітили, що я повторюю «значки»?

Тут я маю на увазі лише шрифти значків.

Не зображення у вигляді значків.

Так, між ними є різниця.

Давайте це розгадаємо.

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

Шрифти значків і значків зображень дещо схожі, але замість алфавітів у шрифтах значків є векторні символи.

Це стало занадто технічним?

Дозвольте мені це пояснити.

В основному ці шрифти значків нагадують зображення, які можна використовувати для додавання символів на веб-сайт, але не реальне зображення.

Вони дають вам багато переваг.

як?

Дізнайтеся в наступному розділі.

Чому ви повинні їх використовувати?

  • Масштабовані, як тексти, які використовуються на вашому веб-сайті, оскільки вони є шрифтами
  • Легкий, який не впливає на швидкість завантаження вашої сторінки порівняно з зображеннями
  • Можливість встановлення кольору значка за допомогою CSS і додавання додаткових властивостей, таких як колір градієнта, тінь тощо.
  • Чудово заощаджує занадто багато HTTP-запитів, дозволяючи завантажувати всі шрифти одночасно, які можна використовувати на своїх сторінках. Якщо ви використовуєте багато зображень на сайті, вам доведеться робити багато запитів, щоб отримати їх, що збільшує час завантаження сторінки.
  • Легкий у використанні та налаштуванні, ніж зображення. Ви можете додавати впізнавані та креативні символи без необхідності створювати їх щоразу, коли вам потрібна піктограма для відеоплеєра, електронної пошти, музики чи будь-якого іншого.
  • Більша доступність, оскільки вони вбудовані прямо в WordPress

Як їх використовувати?

Використання Dashicons не є ракетобудуванням.

Довірся мені; Я знайомий з обома :0

Просто виконайте кілька кроків, згаданих нижче, щоб розпочати роботу з WordPress Dashicons.

Крок 1. Увімкніть Dashicons на своєму сайті WordPress

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

  Як виправити Surface Pen, який не пише на планшеті Surface

Зробити це:

  • Спочатку перейдіть до Редактора тем/вигляду на інформаційній панелі 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!