Узнайте, как создать липкое меню для основной навигации вашего сайта WordPress! Прикрепленные меню помогают улучшить взаимодействие с пользователем, делая меню вашего сайта более доступным для посетителей. Кроме того, это может помочь улучшить общий вид вашего сайта. Давайте займемся этим!

Содержание

1. Перейдите в редактор сайта.

Первым шагом в этом процессе является переход к «Редактору сайта» в области администрирования WordPress. Редактор сайта доступен для «Блокирования тем» в WordPress, при условии, что вы используете WordPress версии 5.9 или новее.

Чтобы перейти в Редактор сайта, перейдите по ссылке Внешний вид> Редактор (красная стрелка на изображении выше) из главной навигации в области администрирования WP.

Нажмите на область основного содержимого в правой части экрана (обведена голубым цветом и обозначена синей стрелкой на изображении выше). Вы попадете в редактор блоков внутри редактора сайта.

С правой стороны, под вкладкой «Страница», вы увидите строку с надписью «Шаблон» (обведена синим цветом на изображении выше). Нажмите на название/ссылку шаблона (красная стрелка). Затем нажмите «Редактировать шаблон» (зеленая стрелка — иногда «Редактировать шаблон» представляет собой небольшую синюю текстовую ссылку под раскрывающимся списком, в котором отображается имя вашего шаблона).

2. Отредактируйте свой шаблон

Теперь вы окажетесь в редакторе шаблонов домашней страницы вашего веб-сайта. (Если у вас не установлена ​​домашняя страница для вашего сайта, вы можете проверить это руководство по настройке статической домашней страницы для вашего веб-сайта WordPress).

В верхней части шаблона находится основная навигация по вашей странице, также называемая «Заголовком» вашей веб-страницы. Когда вы наведете указатель мыши на этот элемент, вы увидите фиолетовую рамку, очерчивающую его (красная стрелка на изображении выше). Это указывает на то, что данный элемент является «синхронизированный шаблон», это означает, что внесение изменений в один экземпляр шаблона приведет к тому, что изменения будут применены ко всем экземплярам по всему сайту. Нажмите на эту область, чтобы выбрать шаблон синхронизации заголовка.

Если это основной элемент заголовка вашего сайта, теперь вы должны увидеть, что синхронизированный шаблон помечен как «Заголовок» на панели инструментов блока.

3. Добавьте свой заголовок в группу

На панели инструментов блока для выбранного шаблона заголовка щелкните значок «Параметры» (красная стрелка на изображении выше) и выберите «Группировать» (зеленая стрелка). Синхронизированный шаблон будет вложен в групповой блок.

Вы заметите, что на панели инструментов блока теперь есть значок группового блока (синяя стрелка на изображении выше), а контур вокруг основной области навигации теперь синий, а не фиолетовый (красная стрелка).

Обратите внимание, что это может изменить ширину вашего главного меню навигации. Чтобы отрегулировать ширину, наведите указатель мыши на шаблон синхронизации заголовка и щелкните его, чтобы выбрать (красная стрелка).

На панели инструментов блока для шаблона синхронизации заголовка щелкните значок «Выравнивание» (зеленая стрелка) и измените его обратно на желаемую ширину (синяя стрелка — в моем случае я выбрал «Широкая ширина»).

Чтобы вернуться обратно в блок «Группа», нажмите на значок «Выбрать группу» на панели инструментов блока «Заголовок» (розовая стрелка).

Упрощенный WordPress: курс «Как создать мощный веб-сайт» от Davies Media Design

4. Установите для группы значение «Прикреплено».

Выбрав группу, перейдите на вкладку «Блокировать» на боковой панели настроек в правой части экрана (красная стрелка на изображении выше).

Нажмите на пункт меню с надписью «Позиция» (зеленая стрелка). Теперь вы увидите раскрывающийся список с надписью «По умолчанию» (розовая стрелка). Щелкните раскрывающийся список и выберите параметр «Прикрепить» (синяя стрелка).

Перейдите в верхнюю часть редактора и нажмите кнопку «Сохранить» (красная стрелка), затем снова нажмите «Сохранить». Теперь у вас будет главное навигационное меню для вашего веб-сайта WordPress!

5. Оформление липкого меню

Вы можете настроить/стилизовать многие элементы нового липкого меню, но в этом уроке я просто добавлю фон позади группового блока, чтобы меню охватывало всю ширину веб-страницы.

Для этого, выбрав блок «Группа», я перейду на вкладку «Стили» на боковой панели настроек (красная стрелка на изображении выше).

В разделе «Цвет» я нажму параметр «Фон» (синяя стрелка), затем выберу белый образец, чтобы установить белый цвет фона (зеленая стрелка).

Еще раз дважды нажму «Сохранить», чтобы сохранить изменения.

Обратите внимание, что вы всегда можете настроить ширину, высоту или интервал заголовка вашего веб-сайта в разделе «Размеры» с помощью ползунков «Отступы» и «Поля».

Вы можете просмотреть свой сайт, щелкнув значок устройства (красная стрелка), а затем нажав «Просмотреть сайт» (зеленая стрелка).

Вы можете прокрутить свой веб-сайт и увидеть, как липкое меню навигации останется на месте вверху (зеленая стрелка)!

Закончив редактирование липкого меню, нажмите кнопку «Назад» в верхней части редактора (красная стрелка). Вы вернетесь на свою веб-страницу в боковом редакторе.

Чтобы вернуться в область администрирования WP, просто нажмите на логотип в верхнем левом углу.

Вот и все, что касается этого урока! Если вам понравилось, вы можете изучите WordPress с помощью моего углубленного курса по Udemy. Или вы можете проверить другие бесплатные Видеоуроки по WordPress и Справочные статьи WordPress на моем сайте.

Davies Media Design Бесплатные креативные приложения Информационный бюллетень по электронной почте

Подпишитесь на информационный бюллетень DMD

Подпишитесь, чтобы получать новые учебные пособия, обновления курсов и последние новости о ваших любимых бесплатных приложениях для творчества!

Вы успешно подписались!

Pin It на Pinterest