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

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

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

Перейдите в редактор сайтов WordPress через «Внешний вид»> «Редактор».

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

Нажмите на область содержимого главной веб-страницы в правой части экрана.

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

Отредактируйте свой шаблон WordPress, щелкнув ссылку «Имя шаблона» на боковой панели настроек страницы.

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

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

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

Нажмите на часть шаблона заголовка в верхней части редактора сайта.

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

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

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

Нажмите значок «Три точки» на панели инструментов «Блок» и выберите «Группировать», чтобы сгруппировать заголовок WordPress.

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

Блок заголовка веб-страницы теперь является групповым блоком

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

Нажмите значок «Выравнивание» на панели инструментов блока и выберите «Широкая ширина».

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

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

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

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

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

Перейдите на боковую панель настроек блоков WordPress и выберите «Прикрепить из раскрывающегося списка».

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

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

Нажмите «Сохранить», чтобы сохранить изменения на веб-сайте WordPress.

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

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

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

Нажмите вкладку «Стили» на боковой панели настроек блоков WordPress.

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

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

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

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

Предварительный просмотр прикрепленного заголовка веб-сайта в WordPress, нажав значок предварительного просмотра

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

Когда вы прокручиваете, ваше липкое меню останется в верхней части вашего сайта.

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

Нажмите кнопку «Назад», чтобы вернуться в редактор сайтов WordPress.

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

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

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

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

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

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

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