Учебники

Как добавить значки в меню WordPress

Как добавить значки в меню WordPress

Функция настраиваемого меню WordPress 3.0+ «уже не такая новая» не только чрезвычайно полезна, но и очень мощна. Я уже написал несколько сообщений о редактировании и настройке меню (например, о том, как выделить текущие ссылки на страницы ), и сегодня я покажу вам, как вы можете добавлять специальные классы в свои темы, чтобы вы могли легко отображать пользовательские значки рядом с вашими ссылками для навигации. .

Добавление значка домашней страницы рядом со ссылкой на домашнюю страницу WordPress

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

Шаг 1. Загрузите классный значок дома

Для предварительного просмотра я просто зашел и загрузил простой значок дома с Finicons.com – ссылка

Шаг 2. Включите классы в меню WordPress

По умолчанию в меню WordPress не отображаются атрибуты «класса» в конструкторе меню, поэтому нажмите «Параметры экрана» и убедитесь, что он установлен.

Как добавить значки в меню WordPress

Шаг 3. Добавьте стиль на ссылку на главную страницу

Теперь вы можете просмотреть или создать ссылку на домашнюю страницу и добавить к ней новый класс. Я добавил класс под названием «значок домашней ссылки».

Как добавить значки в меню WordPress

Шаг 4. Добавьте CSS для значка главного меню

Теперь осталось только добавить CSS в таблицу стилей, чтобы отобразить значок только что созданного класса. Примечание. Убедитесь, что вы добавили значок, загруженный на шаге 1, в папку изображений вашей темы.

Образец CSS

.home-link-icon a{ padding-left: 30px !important; background-image: url(images/home.png); background-position: left; background-repeat: no-repeat; }

Образец изображения

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

Как добавить значки в меню WordPress

Источник записи: https://www.wpexplorer.com

Похожие сообщения
Учебники

Как отображать похожие сообщения по категориям в WordPress

Учебники

Как получить отличный поиск для вашего блога WordPress

Учебники

Как начать успешный блог о еде с WordPress

Учебники

Как вручную загрузить шрифты Google в WordPress