Заправте меню WordPress іконками Webtimiser
- Останнє оновлення 18 вересня 2020 р
- Соня Рідер
- Wordpress - Поради та підручники
- 1
Навігація є дуже важливою частиною веб-сайту і може бути легко адаптована в WordPress. На додаток до шрифту або кольору, піктограми також можна використовувати для оформлення окремих пунктів меню. Як можна обробити меню WordPress іконками, я пояснюю поетапно на прикладі теми двадцять п’ятнадцять.
1. Створіть дочірню тему
Щоб зміни в таблиці стилів не втрачалися при оновленні теми, спочатку слід створити дочірню тему.
Ви можете знайти детальні вказівки про те, як це зробити, у моїй статті Створення дитячої теми WordPress.
Крім того, ви можете, звичайно, також використовувати плагін або модифікатор для власного CSS в WordPress.
2. Додайте піктограми до меню
Тема Двадцять п'ятнадцять включає в себе Значки шрифтів, які я буду використовувати в цьому посібнику. Якщо ви хочете використовувати меню WordPress з піктограмами з іншої бібліотеки шрифтів, можливо, вам доведеться їх інтегрувати заздалегідь.
Ось короткий фрагмент для інтеграції Font Awesome. Маючи понад 500 піктограм, цей шрифт набагато ширший і швидко вбудовується в WordPress. Для цього просто додайте такий фрагмент коду до файлу functions.php:
Потім ви також можете використовувати значки Font Awesome для елементів меню. Тоді лише стилі CSS повинні бути адаптовані інакше, ніж ці інструкції.
Крок 1: Активуйте розширені параметри меню
У WordPress ви можете призначити окремий клас CSS кожному пункту меню. Для цього спочатку потрібно активувати розширені властивості меню.
Для цього спочатку перейдіть на панель інструментів Дизайн> Меню.
Там ви знайдете розширені властивості меню, дещо приховані на панелі Варіанти на вершині.
Тепер поставте прапорець Класи CSS. Потім кожній навігаційній точці можна призначити окремий клас CSS. І тому ви можете також оформити його індивідуально.
Крок 2: вставте клас CSS
Бібліотека шрифтів значків Genericons вже інтегрована в тему WordPress Twenty Fifteen. Ось чому я використовую ці піктограми для виділення пунктів меню.
Для пункту меню Дім я вибираю піктограму genericon-home. Тож я вводжу класи CSS у новому полі: генерикон генерикон-дім
Для інших пунктів меню ви можете переглянути доступні піктограми на веб-сайті genericons.com.
Просто натисніть на потрібну піктограму, а потім далі Скопіюйте HTML. Потім ви отримаєте код значка у спливаючому вікні.
Для свого прикладу меню я вибрав такі значки:
- Головна: genericon genericon-home
- Контакт: genericon genericon-mail
- Блог: genericon genericon-image
Крок 3: адаптуйте таблицю стилів
Щоб піктограми були правильно розміщені перед пунктами меню, потрібно вставити кілька інструкцій CSS.
Наступні стилі CSS тепер включені у файл style.css.
Залежно від вашого смаку, ви також можете вказати колір піктограм та їх розмір.
Завершено меню WordPress з піктограмами
Додайте значки меню WordPress за допомогою плагіна/теми
Звичайно, іконки або зображення можна додавати в меню WordPress за допомогою плагіна! Для цього є кілька плагінів, наприклад піктограми меню. За допомогою нього ви можете приправити своє меню без будь-якого CSS.
Але деякі теми також дозволяють стандартно інтегрувати піктограми. Я використовую тему OceanWP, і тут я можу клацнути піктограму або зображення в меню одним клацанням миші.
OceanWP: Клацніть у меню піктограми клацанням миші
Yoast SEO для WordPress: інструкції та поради