Как создать складное боковое меню в WordPress

Опубликовано: 2022-04-15

Вы хотите создать сворачиваемую боковую панель навигации в WordPress? Из этого туториала вы узнаете, как создать складное меню в WordPress с помощью бесплатного плагина.

Посетители вашего веб-сайта оценят простоту складной навигации. Он не занимает слишком много места на боковой панели. Это идеально подходит для сайтов электронной коммерции, крупных веб-сайтов и любых других сайтов со сложной компоновкой.

Эта статья продемонстрирует, как создать меню боковой панели WordPress, которое сворачивается.

Бадди Х

Оглавление

Что такое сворачиваемое боковое меню? Когда вы должны использовать один?

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

Представьте себе большой сайт электронной коммерции со множеством категорий продуктов и подкатегорий.

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

Таковы преимущества складных блюд. Эти меню упорядочивают свое содержимое в соответствии с отношениями родитель-потомок. Щелчок по родительскому элементу в свернутом меню откроет его, чтобы отобразить все дочернее содержимое для этого родителя.

Читайте также: Тема WordPress для профессионального университета для создания онлайн-образовательной платформы

Для своего мобильного сайта новостное издание Guardian использует упрощенное меню. Расширяемые меню — это сворачиваемые меню, потому что их разделы расширяются по мере того, как посетители нажимают на них.

Сворачиваемые меню по умолчанию скрывают от посетителей сложный контент и информацию. Это проще, чем прокручивать длинный список подкатегорий и категорий.

Давайте теперь посмотрим, как создать свернутую боковую панель на вашем веб-сайте WordPress.

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

С плагином Bellows Accordion Menu вы можете создать боковое меню в WordPress. Меню Bellows Accordion предоставляет шорткод для размещения свернутого списка на любой странице, в публикации или в области виджетов. Это включает в себя вашу боковую панель.

1. Складное боковое меню в WordPress

Складное боковое меню в WordPress.

Сначала установите плагин, а затем активируйте его. За помощью обратитесь к нашему руководству по установке плагина WordPress.

После активации перейдите на страницу меню Внешний вид >> на панели управления WordPress .

2. Создание меню в панели управления WordPress

Создание меню в панели инструментов WordPress.

В поле «Имя менюДобавление страниц в ваше меню WordPress» введите имя для вашего меню. Имя не будет видно посетителям сайта, так как оно предназначено только для справки. Затем вы можете нажать на кнопку «Создать меню».

Затем выберите страницы, которые вы хотите добавить в сворачиваемую навигацию. По умолчанию WordPress отображает только ваши самые последние страницы. Щелкните вкладку «Просмотреть все», чтобы просмотреть полный список страниц вашего сайта.

3. Добавление страниц в ваше меню WordPress

Добавление страниц в ваше меню WordPress.

Вы также можете нажать «Выбрать все». Это преобразует все страницы в складной список.

После того, как вы удовлетворены своим выбором, нажмите кнопку «Добавить в меню» . Вы также можете выбирать сообщения или категории блога и добавлять собственные ссылки. Вы можете найти больше информации в нашем руководстве по добавлению меню навигации в WordPress.

Перетаскивание — отличный способ перемещать веб-страницы после добавления их всех в меню. Это изменит порядок отображения этих страниц в меню свертывания.

Свернуть меню фокусируется на отношениях родитель-потомок. Щелчок по родительскому элементу в раскрывающемся меню покажет весь дочерний контент.

Читайте также: Как сделать местный бизнес выгодным с помощью социального маркетинга влияния?

Перетащите все, что вам нужно, чтобы установить это соединение.

Затем возьмите каждого ребенка на руки и осторожно потяните их вправо. Это позволит вам освободить страницу. Это вставит элемент и сделает его дочерней страницей.

4. Добавление сообщений в меню WordPress

Добавление сообщений в меню WordPress.

Не забудьте нажать кнопку Сохранить изменения, когда закончите.

Теперь мы хотим добавить сворачиваемое боковое меню. Для этого мы будем использовать шорткоды , которые автоматически создает Bellows Accordion.

Перейдите в « Внешний вид» >> «Меню» , чтобы получить шорткод. Если вкладка «Показать все» не выбрана, убедитесь, что она выбрана.

Нажмите на поле «Шорткоды», чтобы выделить все коды. Скопируйте этот код, нажав сочетание клавиш Command + c или Ctrl + c.

Затем вставьте шорткод в виджет. Перейдите в Внешний вид >> Виджеты . Это отобразит все области виджетов в вашей текущей теме. Хотя параметры могут отличаться, большинство тем WordPress включают боковую панель.

5. Настройка складных боковых меню

Настройка сворачиваемых боковых меню.

Нажмите на боковую панель, чтобы развернуть ее. Это расширит раздел.

Нажмите на значок + , чтобы добавить блок. Начните вводить короткие коды. Выберите Блок шорткода, когда он появится.

6. Как добавить виджеты на боковую панель WordPress

Как добавить виджеты на боковую панель WordPress. Вставьте шорткод вашего сворачиваемого меню в этот блок. Нажмите кнопку «Обновить» в верхней части экрана, чтобы опубликовать свое меню.

Теперь при посещении веб-сайта вы должны увидеть новое складное меню навигации на боковой панели.

Это меню по умолчанию можно настроить с помощью плагина Bellows Accordion. Чтобы лучше отразить ваш бренд, вы можете изменить цветовую схему на своем сайте.

Читайте также: 10 лучших советов по ведению блога для студентов колледжа

Вы можете изменить меню по умолчанию, перейдя в « Внешний вид» >> «Меню мехов» на панели управления WordPress.

Это меню содержит все настройки, которые вам понадобятся для персонализации вашего складного обеда. Есть много настроек, которые вы можете изучить. Возможно, вам будет полезно начать с посещения Main Configuration >> Basis Configuration .

7. Настройка внешнего вида складного меню боковой панели WordPress.

Настройка внешнего вида складного меню боковой панели WordPress.

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

Нажмите на вкладку «Макет и положение», чтобы изменить ширину и выравнивание меню.

8. Размещение складных меню на сайте WordPress

Вы можете мгновенно просмотреть свои изменения, отредактировав сворачиваемую боковую панель навигации в WordPress Customizer. Для этого перейдите в «Внешний вид» >> «Настроить» .

Выберите Сильфоны в меню слева.

Настройка складных меню в настройщике WordPress.

Вывод

Брандл

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


Интересное чтение:

Необходимо знать основные и успешные навыки ведения блога

Что такое основная страница? И преимущества SEO-стратегии использования темы

6 лучших сервисов оптимизации скорости WordPress