Вы хотите создать свои навигационные меню WordPress, чтобы изменить их цвет или внешний вид? Хотя тема WordPress заботится о внешнем виде навигационных меню, вы можете легко настроить ее с помощью CSS в соответствии с вашими потребностями. В этой статье мы покажем вам, как создавать навигационные меню WordPress на вашем сайте.
Мы покажем вам два разных метода. Первый метод для начинающих, потому что он использует плагин и не требует никаких знаний кода. Второй метод предназначен для промежуточных пользователей, которые предпочитают использовать CSS-код вместо плагина.
Метод 1: Дизайн навигационных меню WordPress с помощью плагина
Ваша тема WordPress использует CSS для создания навигационных меню. Многие новички не любят редактировать файлы тем или самостоятельно писать код CSS.
Вот тогда плагин в стиле WordPress пригодится. Это мешает вам редактировать файлы тем или писать любой код.
Первое, что нужно сделать, это установить и активировать плагин CSS Hero. Для получения более подробной информации, смотрите наше пошаговое руководство по установке плагина WordPress.
CSS Hero – это премиальный плагин WordPress, который позволяет вам создавать свои собственные темы WordPress без написания одной строки кода (HTML или CSS не требуются). Смотрите наш обзор CSS Hero для получения дополнительной информации.
Пользователи WPBeginner могут использовать этот купон CSS Hero, чтобы получить 34% скидку на свою покупку.
После активации вы будете перенаправлены на получение лицензионного ключа CSS Hero. Просто следуйте инструкциям на экране, и вы будете перенаправлены на ваш сайт всего за несколько кликов.
Затем вам нужно нажать кнопку CSS Hero на панели инструментов администратора WordPress.
CSS Hero предлагает WYSIWYG-редактор (то, что вы видите, это то, что вы получаете). Нажав кнопку, вы получите доступ к своему веб-сайту с плавающей панелью инструментов CSS Hero, видимой на экране.
Вы должны нажать на синий значок вверху, чтобы начать редактирование.
После нажатия на синий значок, наведите курсор мыши на меню навигации, и CSS Hero выделит его, показывая края вокруг него. Когда вы щелкаете по выделенному меню навигации, оно отображает элементы, которые вы можете редактировать.
На приведенном выше снимке экрана показан контейнер из верхнего меню навигации. Предположим, мы хотим изменить цвет фона нашего меню навигации. В этом случае мы выберем верхнюю навигацию, которая влияет на все меню.
CSS Hero теперь будет отображать различные свойства, которые вы можете редактировать, такие как текст, фон, границы, поля, заливка и т. Д.
Вы можете нажать на любое свойство, которое вы хотите изменить. CSS Hero покажет вам простой интерфейс, где вы можете вносить свои изменения.
На скриншоте выше мы выбрали фон, и он показал нам приятный интерфейс для выбора цвета, градиента, изображения и многого другого.
Когда вы вносите изменения, вы можете видеть их вживую в предварительном просмотре темы.
Когда вы будете удовлетворены изменениями, нажмите кнопку Сохранить на панели инструментов CSS Hero, чтобы сохранить изменения.
Лучшее в использовании этого метода – то, что вы можете легко отменить изменения. CSS Hero ведет полную историю всех ваших изменений и может приходить и уходить между этими изменениями.
Способ 2: создание меню навигации WordPress вручную
Этот метод требует ручного добавления пользовательского CSS и предназначен для промежуточных пользователей.
Меню навигации WordPress отображаются в неупорядоченном списке (маркированный список).
В общем, если вы используете стандартный тег меню WordPress, он будет отображать список без ассоциированных классов CSS.
Ваш неупорядоченный список будет иметь имя класса «menu», при этом каждый элемент в списке будет иметь свой собственный класс CSS.
Это может работать, если у вас есть только одна позиция меню. Однако большинство тем имеют несколько мест, где вы можете отображать меню навигации.
Использование только стандартного класса CSS может вызвать конфликты с меню в других местах.
Вот почему вам нужно определить класс CSS и расположение меню. Ваша тема WordPress, вероятно, уже делает это, добавляя навигационные меню, используя следующий код:
