Іконки – це чудовий інструмент!
За їх допомогою можна швидко налагодити зв’язок з аудиторією, створюючи міцний візуальний контакт.
Саме тому піктограми активно застосовуються всюди, включно з веб-сайтами на WordPress.
Крім того, використання однієї і тієї ж теми на вашому сайті протягом тривалого часу може стати нудним. Це цілком природно.
Згодом ви починаєте шукати щось більш цікаве, захоплюєтеся цим, а потім знову відчуваєте нудьгу.
І цей цикл повторюється безкінечно…
Отже, як же уникнути цієї замкнутої петлі?
Dashicons – це чудове рішення!
Вони можуть надати вашому сайту естетичної привабливості та допомогти виділитися. Крім того, це дозволить вам уникнути зайвих зусиль і перевантаження сайту непотрібними зображеннями, які сповільнюють його завантаження.
Тож давайте розглянемо Dashicons і дізнаємося, як їх можна ефективно використовувати на вашому веб-сайті WordPress.
Що таке WordPress Dashicons?
Dashicons – це офіційні шрифти іконок WordPress, які з’явилися ще у версії 3.8. Ці шрифти є чудовими та корисними для використання на веб-сайті. Вони представляють собою SVG-файли найвищої якості, які можна легко масштабувати до будь-якого розміру без втрати чіткості.
Оскільки вони мають вбудовану підтримку WordPress (адже їх створила сама команда 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!