Вы ищете лучшие учебники по работе с навигационными меню WordPress? Навигационные меню WordPress позволяют легко настраивать и управлять меню на вашем сайте. В этой статье мы покажем вам лучшие учебники по освоению навигационных меню WordPress.
Поскольку это длинная статья, мы добавили оглавление для более удобной навигации.
- Начало работы с навигационными меню WordPress
- Добавление иконок социальных сетей в меню WordPress
- Показать разные меню для зарегистрированных пользователей в WordPress
- Добавление условной логики в меню навигации
- Стилизация навигационных меню WordPress
- Добавление иконок изображений в меню навигации в WordPress
- Добавление пользовательских навигационных меню в WordPress
- Добавление меню слайд-панели в темах WordPress
- Создание мобильного отзывчивого меню WordPress
- Добавление полноэкранного отзывчивого меню в WordPress
- Добавление описания с помощью навигационных меню в WordPress
- Как добавить темы в меню навигации WordPress
- Как добавить меню навигации в боковую панель WordPress
- Добавить навигационное меню WordPress в сообщения и страницы
- Добавление ссылок NoFollow в меню навигации WordPress
- 1. Начало работы с меню навигации WordPress
- 2. Добавление иконок социальных сетей в меню WordPress
- 3. Показать разные меню для зарегистрированных пользователей в WordPress
- 4. Добавление условной логики в меню навигации
- 5. Стилизация навигационных меню WordPress
- 6. Добавление иконок изображений в меню навигации в WordPress
- 7. Добавление пользовательских навигационных меню в WordPress
- 8. Добавление меню слайд-панели в темах WordPress
- 9. Создание мобильного отзывчивого меню WordPress
- 10. Добавление полноэкранного отзывчивого меню в WordPress
- 11. Добавление описания с помощью навигационного меню в WordPress
- 12. Как добавить темы в навигационное меню WordPress
- 13. Как добавить меню навигации в боковую панель WordPress
- 14. Добавление навигационного меню WordPress в сообщения и страницы
- 15. Добавление ссылок NoFollow в меню навигации WordPress
1. Начало работы с меню навигации WordPress
В веб-дизайне навигационное меню — это список ссылок, который позволяет посетителям вашего сайта посещать различные страницы и разделы на вашем сайте. Оно помогает пользователям перемещаться по вашему сайту, отсюда и название — навигационное меню.
WordPress поставляется со встроенным инструментом, который позволяет создавать и использовать меню на вашем сайте. Этот инструмент находится по адресу Внешний вид » Меню страница в области администрирования WordPress.
Здесь вы можете создавать меню, добавляя элементы из левой колонки в правую. Вы можете добавить в меню любой пост WordPress, страницу, категории и пользовательские ссылки.
Для получения подробных инструкций смотрите наше руководство для начинающих о том, как добавить меню навигации в WordPress.
2. Добавление иконок социальных сетей в меню WordPress
Меню WordPress также можно использовать для добавления кнопок социальных сетей на ваш сайт. Это позволит вам легко обновлять иконки, переставлять их местами и добавлять новые иконки социальных сетей, когда вы захотите.
Самый простой способ сделать это — использовать плагин Menu Social Icons. Для более подробной информации смотрите наше пошаговое руководство по установке плагина WordPress.
После активации перейдите в раздел Внешний вид » Меню страница. Создайте новое социальное меню, а затем перейдите на вкладку «Пользовательские ссылки» в левой колонке.
Вы увидите значки социальных сетей под текстом ссылки и полями URL. Все, что вам нужно сделать, это нажать на иконку социальной сети и ввести URL вашего социального профиля. Когда вы закончите, нажмите на кнопку Добавить в меню.
Повторите этот процесс для всех профилей социальных сетей, которые вы хотите добавить. После этого выберите местоположение меню и нажмите на кнопку сохранить меню.
Для более подробных инструкций смотрите наше руководство о том, как добавить иконки социальных сетей в меню WordPress.
3. Показать разные меню для зарегистрированных пользователей в WordPress
Если вы управляете сайтом членства WordPress, то вы можете захотеть показывать разные меню для пользователей, вошедших в систему. Вот как вы можете легко добиться этого.
Сначала вам нужно создать два разных меню. Одно для пользователей, вошедших в систему, и одно для пользователей, не вошедших в систему. Вы можете назвать эти меню «Вход в систему» и «Выход из системы».
Далее, вам нужно добавить этот код в функции вашей темы.php файл или плагин для конкретного сайта.
function my_wp_nav_menu_args( $args = '' ) < if( is_user_logged_in() ) < $args['menu'] = 'logged-in'; >else < $args['menu'] = 'logged-out'; >return $args; > add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );
Вот и все. Теперь вы можете проверить свои навигационные меню в действии.
Для более подробных инструкций смотрите наш учебник о том, как показывать разные меню для зарегистрированных пользователей в WordPress.
4. Добавление условной логики в меню навигации
Хотите изменять меню на основе определенных условий? Например, другое меню на главной странице или скрытие элементов в отдельных постах. Вот как этого можно добиться в WordPress.
Сначала вам нужно установить и активировать плагин If Menu.
После активации посетите Внешний вид » Меню экран и нажмите на пункт меню, который вы хотите отредактировать. Вы заметите новую опцию ‘Включить условную логику’.
Отметив эту опцию, вы увидите два выпадающих варианта. Вы можете выбрать показать или скрыть меню, если оно соответствует определенным условиям. Например, скрыть пункт меню, если пользователь является администратором, или показать пункт меню, только если пользователь просматривает один пост.
Для более подробных инструкций смотрите нашу статью о том, как добавить условную логику в меню WordPress.
5. Стилизация навигационных меню WordPress
Ваша тема WordPress управляет внешним видом навигационных меню на вашем сайте. С помощью CSS вы можете настроить внешний вид меню навигации.
Самый простой способ сделать это — использовать плагин CSS Hero. Это премиум плагин WordPress, который позволяет вам настроить любую тему WordPress, не написав ни строчки кода (не требуется HTML или CSS). Смотрите наш обзор CSS Hero, чтобы узнать больше.
Вы также можете придать стиль навигационным меню, написав CSS вручную. Подробные инструкции смотрите в нашем руководстве о том, как стилизовать навигационные меню WordPress.
6. Добавление иконок изображений в меню навигации в WordPress
Многие популярные сайты используют значки изображений рядом со своими навигационными меню, чтобы сделать их более заметными. Вот как вы можете добавить иконки с изображениями в меню навигации в WordPress.
Во-первых, вам нужно установить и активировать плагин Menu Image. После активации перейдите во Внешний вид » Меню. Там вы увидите возможность добавить изображения к каждому пункту существующего меню.
Вы также можете использовать CSS для добавления иконок изображений. Для получения подробных инструкций смотрите наше руководство о том, как добавить иконки с изображениями в меню навигации в WordPress.
7. Добавление пользовательских навигационных меню в WordPress
Большинство бесплатных и премиум тем WordPress поставляются с заранее определенными местами для отображения навигационных меню. Однако вы также можете добавить пользовательские навигационные меню в свои темы.
Сначала вам нужно зарегистрировать ваше новое навигационное меню, добавив этот код в функции вашей темы.php файл.
функция wpb_custom_new_menu() < register_nav_menu('my-custom-menu',__( 'My Custom Menu' )); >add_action( 'init', 'wpb_custom_new_menu' );
Этот код создаст ‘My Custom Menu’ для вашей темы. Вы можете увидеть это, редактируя меню на Внешний вид » Меню страница.
Чтобы отобразить ваше пользовательское меню, вам нужно добавить этот код в вашу тему, где вы хотите отобразить меню.
'my-custom-menu', 'container_class' => 'custom-menu-class' ) ); ?>
Для более подробных инструкций смотрите нашу статью о том, как добавить пользовательские меню навигации в темы WordPress.
8. Добавление меню слайд-панели в темах WordPress
Хотите, чтобы навигационное меню вашего сайта представляло собой слайд-ин панель? Использование слайд-ин панелей делает ваше меню более интерактивным, менее навязчивым и интересным специально для мобильных устройств.
Однако для того, чтобы добавить их, вам потребуется средний уровень понимания JavaScript, тем WordPress и CSS.
Для получения пошаговых инструкций смотрите наше руководство о том, как добавить меню слайд-панели в темы WordPress.
9. Создание мобильного отзывчивого меню WordPress
Большинство тем WordPress являются отзывчивыми и поставляются с навигационными меню, поддерживающими мобильные устройства. Однако, если ваша тема плохо обрабатывает навигационные меню на мобильных устройствах, то это влияет на удобство пользования на мобильных устройствах.
К счастью, есть несколько простых способов добавить отзывчивое меню, готовое к мобильному использованию, без написания кода.
Сначала вам нужно установить и активировать плагин Responsive Menu.
После активации, вам нужно нажать на ‘Responsive Menu’ в панели администратора WordPress, чтобы настроить параметры плагина.
Просто выберите ширину, после которой мобильное отзывчивое меню должно быть видимым. После этого вам нужно выбрать существующее навигационное меню.
Не забудьте нажать на кнопку «Обновить параметры», чтобы сохранить настройки. Вот и все, теперь вы можете посетить свой сайт и изменить размер экрана браузера, чтобы увидеть мобильное отзывчивое меню.
Есть много других способов добавить меню, реагирующее на мобильные устройства. Например, меню, появляющееся с эффектом переключения, меню слайдов и отзывчивое меню выбора. Узнайте больше обо всем в нашем руководстве о том, как создать мобильное отзывчивое меню WordPress.
10. Добавление полноэкранного отзывчивого меню в WordPress
Вы заметили, что некоторые популярные сайты используют полноэкранное навигационное меню?? Обычно это требует некоторого творческого использования JavaScript и CSS. К счастью, вы можете сделать это в WordPress без написания какого-либо кода.
Сначала вам нужно установить и активировать DC — Полноэкранное отзывчивое меню. После активации, вам необходимо посетить Внешний вид » DC Fullscreen Menu страница для настройки параметров плагина.
Здесь вы можете выбрать меню, цвет фона и текста, а также шрифт Google для вашего полноэкранного меню.
Нажмите на кнопку отправить, чтобы сохранить настройки. Теперь вы можете посетить свой сайт, чтобы увидеть полноэкранное отзывчивое меню в действии.
Подробнее об этом читайте в нашем руководстве о том, как добавить полноэкранное отзывчивое меню в WordPress.
11. Добавление описания с помощью навигационного меню в WordPress
Навигационные меню WordPress обычно представляют собой просто текстовые ссылки, отображающие метку ссылки или якорный текст. Что, если вы хотите добавить небольшое описание или теговую строку для каждого пункта вашего навигационного меню??
К счастью, WordPress поставляется со встроенной функциональностью для добавления описания к каждому пункту навигационного меню.
Сначала вам нужно включить пункт описания. Нажмите на кнопку Параметры экрана в правом верхнем углу экрана.
Появится список блоков и опций, которые вы можете включить. Вам нужно установить флажок рядом с пунктом Описание.
Теперь прокрутите вниз и нажмите на пункт меню, чтобы отредактировать его, и вы увидите возможность добавить описание.
Добавьте описание и нажмите на кнопку сохранения меню.
Если ваша тема поддерживает описания меню, то вы сразу же сможете их увидеть. В противном случае вам придется редактировать файлы вашей темы, чтобы показать описания.
12. Как добавить темы в навигационное меню WordPress
Нас часто спрашивают о том, как добавить темы блога в меню навигации в WordPress. Многие новички полагают, что им необходимо создать страницы для каждой темы, чтобы добавить их в меню.
Что вам на самом деле нужно, так это категории. Категории и теги — это встроенные таксономии WordPress, которые позволяют сортировать контент по соответствующим темам.
Добавьте свои статьи в соответствующие категории, а затем перейдите на страницу Внешний вид » Меню страница. Нажмите на вкладку категорий, чтобы развернуть ее, а затем выберите категории, которые вы хотите отобразить в навигационном меню.
Для более подробной информации смотрите нашу статью о том, как добавить темы в навигационные меню WordPress.
13. Как добавить меню навигации в боковую панель WordPress
Темы WordPress обычно имеют навигационные меню сверху или снизу. Однако вы также можете создать и добавить меню в боковую панель WordPress.
Просто посетите Внешний вид » Виджеты страница и добавить виджет ‘Custom Menu’ в боковую панель. Для получения подробных инструкций смотрите наше руководство по добавлению и использованию виджетов в WordPress.
После добавления виджета в боковую панель вы можете выбрать меню из выпадающей опции. Не забудьте нажать на кнопку сохранения, чтобы сохранить настройки.
14. Добавление навигационного меню WordPress в сообщения и страницы
Обычно навигационные меню отображаются в шапке или боковой панели сайта. Однако иногда вы можете захотеть добавить меню внутри поста или страницы WordPress. Вот как это можно сделать.
Сначала вам нужно установить и активировать плагин Menu Shortcode. После активации, отредактируйте пост или страницу, где вы хотите отобразить ваше меню, и добавьте этот шорткод:
[listmenu menu=»Your Menu Name»]
Не забудьте заменить ‘Your Menu Name’ на название вашего собственного навигационного меню. Сохраните или опубликуйте свой пост, а затем нажмите на кнопку предварительного просмотра.
15. Добавление ссылок NoFollow в меню навигации WordPress
Как правило, навигационное меню вашего сайта содержит ссылки на ваши собственные посты и страницы. Однако иногда вам может понадобиться добавить ссылку на внешний сайт.
Многие эксперты SEO рекомендуют добавлять атрибут rel=»nofollow» к внешним ссылкам. Вот как добавить атрибут nofollow к ссылкам в меню навигации WordPress.
Сначала вам нужно посетить сайт Внешний вид » Меню страницу, а затем нажмите на кнопку Параметры экрана в правом верхнем углу экрана.
Это приведет к появлению меню, где вам нужно установить флажки рядом с опциями Link Relationship (XFN) и Link Target.
Теперь нажмите на пункт меню, который вы хотите отредактировать. Вы заметите две новые опции, Link Relationship и Open link in a new window/tab.
Вам нужно ввести nofollow в опции взаимосвязи ссылок. Вы также можете отметить опцию открытия ссылки в новом окне/вкладке, если хотите.
Нажмите на кнопку меню «Сохранить», чтобы сохранить изменения. Теперь эта конкретная ссылка в вашем навигационном меню WordPress будет иметь атрибут rel=»nofollow».
Для получения более подробных инструкций смотрите наш учебник о том, как добавить ссылки nofollow в навигационные меню WordPress.
Надеемся, эта статья помогла найти лучшие учебники по освоению навигационных меню WordPress. Вы также можете посмотреть наш список из 24 обязательных плагинов WordPress для бизнес-сайтов.
Источник: www.wpbeginner.com