Подправете менюто на WordPress с икони

Последна актуализация на 18 септември 2020 г.
Соня Ридер
Wordpress - Съвети и уроци
1

Навигацията е много важна част от уебсайта и може лесно да се адаптира в WordPress. В допълнение към шрифта или цвета, иконите могат да се използват и за проектиране на отделни елементи от менюто. Обяснявам стъпка по стъпка как можете да подготвите меню на WordPress с икони, като използвате примера на темата Twenty Fifteen.

1. Създайте дъщерна тема

За да не се загубят промените в таблицата със стилове при актуализиране на тема, първо трябва да създадете дъщерна тема.
Можете да намерите подробни инструкции за това как да направите това в статията ми Създаване на детска тема на WordPress.
Като алтернатива можете, разбира се, да използвате и плъгин или персонализатор за вашия собствен CSS в WordPress.

2. Добавете икони към менюто

Темата Двайсет и петнадесет включва Генерични шрифтове на икони, което ще използвам в това ръководство. Ако искате да използвате менюто на WordPress с икони от друга библиотека с шрифтове, може да се наложи да ги интегрирате предварително.

Ето кратък фрагмент за интегриране на Font Awesome. С над 500 икони този шрифт на икони е много по-обширен и бързо вграден в WordPress. За да направите това, просто добавете следния кодов фрагмент към файла functions.php:

След това можете също да използвате иконите Шрифт Awesome за елементите от менюто. Тогава само CSS стиловете трябва да бъдат адаптирани по различен начин от тези инструкции.

Стъпка 1: Активирайте разширените опции на менюто

В WordPress можете да зададете отделен CSS клас за всеки елемент от менюто. За да направите това, първо трябва да активирате разширените свойства на менюто.
За да направите това, първо отидете на таблото Дизайн> Менюта.
Там ще намерите разширените свойства на менюто, донякъде скрити в панела Настроики на върха.

Сега поставете отметка в квадратчето CSS класове. След това можете да присвоите отделен CSS клас на всяка точка за навигация. И така можете да го оформите и индивидуално.

Стъпка 2: вмъкнете CSS клас

Библиотеката с икони на шрифтове Genericons вече е интегрирана в темата на WordPress Twenty Fifteen. Ето защо използвам тези икони, за да подчертая елементите от менюто.
За елемента от менюто Начало избирам иконата genericon-home. Така че влизам в CSS класове в новото поле: генерикон генерикон-дом

За останалите елементи от менюто можете да покажете наличните икони на уебсайта genericons.com.

Просто кликнете върху желаната икона и след това върху Копирайте HTML. След това ще получите кода за иконата в изскачащ прозорец.
За примерното си меню съм избрал следните икони:

Начало: генерикон генерикон-дом
Контакт: genericon genericon-mail
Блог: genericon genericon-image

Стъпка 3: адаптирайте таблицата със стилове

За да могат иконите да бъдат правилно позиционирани пред елементите на менюто, трябва да се вмъкнат няколко CSS инструкции.
Следните CSS стилове вече са включени във файла style.css.

В зависимост от вашия вкус можете да посочите и цвета на иконите и техния размер.

Завършено меню на WordPress с икони

Добавете икони на менюто на WordPress чрез плъгин/тема

Икони или изображения, разбира се, могат да се добавят и към менютата на WordPress с помощта на приставка! Има някои приставки за това, като Икони на менюто. Това ви позволява да подправите менюто си без CSS.

Но някои теми също позволяват стандартно интегриране на икони. Използвам темата OceanWP и тук мога да добавя икона или снимка в менюто с едно щракване.

OceanWP: Включете икони в менюто с едно щракване

Yoast SEO за WordPress: Инструкции и съвети

Как да подготвим WordPress за GDPR

Използвайте уеб шрифтове локално в WordPress