WordPress как зарегистрировать меню

Меню WordPress: добавление и настройка

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

Структура меню

Во многих случаях структура уже определена спецификой сайта. Каждый типовой пункт меню интернет-магазина обкатан на миллионах торговых площадок и исследован вдоль и поперек программистами, специалистами по SEO и маркетологами. Сходная ситуация и с сайтами строительных компаний или производственных предприятий, бюро переводов или агентства недвижимости.

Чаще всего определиться со структурой можно за считанные минуты. Для этого достаточно посмотреть первые позиции выдачи Google или Яндекс по сайтам сходной тематики. В значительной части оставшихся случаев оптимальной структурой будет перенос в меню элементов иерархической таксономии сайта WordPress – категорий. Пользователю остается только добавить к рубрикам/подрубрикам типовые страницы наподобие «О нас/обо мне» или «Контакты».

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

Иногда оптимальной будет связка двух меню: родительского и дочернего. В этом случае структура зависимого меню определяется «на лету» в зависимости от выбора пункта главного меню. На практике это может выглядеть так: в главном меню перечислены регионы РФ, а дочерняя структура выводится в зависимости от выбранного региона. То есть если мы выбираем «Москва и МО», в дочерней структуре появятся «Королев», «Химки», «Балашиха» и «Волоколамск». А если «Санкт-Петербург и Ленинградская область» – «Волхов», «Всеволжск», «Гатчина» и «Выборг».

Если страниц на сайте очень много, не обязательно добавлять в меню все. Большое количество пунктов и подпунктов может не упростить навигацию, а еще больше ее запутать. Возможно, какие-то страницы удобно группируются по определенным параметрам. Или есть смысл создать дополнительные страницы. Универсальной структуры не существует. Этот вопрос вам придется решать самостоятельно, руководствуясь логикой и спецификой интернет-ресурса. Когда определитесь со структурой, попытайтесь поставить себя на место посетителя вашего сайта WordPress. Подумайте, легко ли пользователю находить нужные пункты и подпункты, можно ли как-то упростить структуру меню.

Создание и редактирование меню в WordPress

В консоли управления на вкладке «Внешний вид» > «Меню» нужно ввести название нового меню в соответствующее текстовое поле, после чего кликнуть по ссылке «Создать меню». Чтобы отредактировать только что созданный элемент интерфейса, кликните по его названию в выпадающем списке, а затем нажмите кнопку «Выбрать».

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

Здесь же можно задать иерархическую структуру с любым уровнем вложенности. Например, пункт «CMS» у нас будет родительским по отношению к подпунктам «Drupal», «Joomla», «WordPress». А названия систем управления содержимым будут, соответственно, дочерними элементами по отношению к «CMS». Если мы решим разбить подрубрику «WordPress» на «Уроки WordPress» и «Обучающее видео», у нас появится еще один уровень вложенности. Тогда подрубрика «WordPress» станет родительской для «Уроков…» и «Обучающего видео», но будет дочерней по отношению к пункту «CMS». Однако учтите, что большой уровень вложенности может не облегчить навигацию, а напротив, запутать ее. Чем сложнее иерархическая структура, тем труднее в ней ориентироваться.

Определившись со структурой, активируем только что созданный элемент интерфейса. В верхней части экрана кликаем по «Управлению областями», выбираем в выпадающем списке название нашего меню, после чего нажимаем на кнопку «Сохранить изменения». Создание и редактирование меню в боковой панели производится с помощью соответствующего виджета.

Функция PHP wp_nav_menu()

Настраиваемое меню регистрируется в файле functions.php функцией register_nav_menu(). Если нужно зарегистрировать несколько меню, используется функция register_nav_menus. Например:

Мы зарегистрировали два меню, верхнее с идентификатором ‘top’ и нижнее с идентификатором ‘bottom’. Теперь можно зайти в консоль управления и добавлять пункты и подпункты на вкладке «Внешний вид» > «Меню» как описано выше. Чтобы вывести созданные нами меню, нужно добавить их в шаблон функцией wp_nav_menu. В нашем случае элемент интерфейса с идентификатором ‘top’ будет выводиться через header.php, а ‘bottom’ – через footer.php. Функция wp_nav_menu может принимать в качестве аргументов 15 различных параметров. Более подробно об этом можно почитать в официальной документации PHP.

Меню в конструкторах страниц

Конструкторы страниц могут добавлять свои элементы управления меню. В Visual Composer дополнительные элементы находятся в библиотеке Visual Composer Hub. Загрузить их можно кликом по соответствующей иконке навигационной панели во Front-end редакторе. Однажды загруженные элементы автоматически добавляются в коллекцию элементов конструктора.

В конструкторе Elementor добавление настраиваемого меню навигации производится с помощью виджета Elementor Nav. В виджете добавляются эффекты анимации, задаются параметры выравнивания текста, настраивается мобильное меню, задается тип меню (горизонтальное, вертикальное, выпадающее). У каждого конструктора страниц своя специфика. Смотрите документацию к редактору, который используется на вашем сайте WordPress.

Плагины меню

Существует немало плагинов, расширяющих возможности создания меню на сайте WordPress. Например:

• Menu Image: загрузка изображений в меню;
• Max Mega Menu: создание и редактирование мега-меню;
• WooCommerce Menu Extension: вставка ссылок магазина в меню WordPress;
• Superfly Responsive Menu: расширение инструментария навигации WordPress;
• Nextend Accordion Menu: создание и редактирование меню типа «аккордеон»;
• Sticky Menu on Scroll: добавление «липкого» меню.

«Липкое» меню «приклеивается» к верхней части экрана и не уходит из зоны видимости пользователя при прокрутке страницы. «Аккордеон» представляет собой список с раскрывающимся содержимым. С его помощью удобно представлять блоки вопросов и ответов. Max Mega Menu и другие расширения с «Mega Menu» в названии служат для создания и редактирования мега-меню. Этот вариант оптимален при большом количестве категорий и необходимости вставки в меню изображений и иконок.

Superfly Responsive Menu может использоваться и как независимый инструмент, и как расширение стандартного функционала WordPress. Во втором случае вам просто нужно выбрать на странице опций Superfly элементы, ранее созданные на вкладке «Внешний вид» > «Меню» консоли управления. Особенности расширения Superfly Responsive Menu:

• поддержка различных типов меню;
• на 100% респонсивный дизайн;
• добавление кастомного кода HTML, шорткодов, виджетов;
• шрифты Google Fonts, дополнительные настройки параметров текста;
• вставка логотипа, фоновых изображений, иконок;
• расширенные настройки цвета, разделителей, границ;
• интеграция с социальными платформами (Facebook, Instagram, Twitter, Dribbble, Pinterest, Vimeo, YouTube, Skype, email, RSS);
• поддержка до 4 уровней вложенности;
• плавная прокрутка;
• библиотека иконок;
• настройки действий в зависимости от поведения пользователя (по клику, по наведению курсора мыши и так далее);
• расширенная поддержка мобильных платформ;
• красивые эффекты анимации CSS3.

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

Заключение

Вот мы и рассмотрели, как создавать и настраивать меню средствами CMS (административная панель) и с помощью расширений WordPress. Плагины позволяют создавать более сложные конструкции без вмешательства в код. Если вам нужно сделать «липкое» меню, которое всегда будет находиться в видимой части экрана, вставить в меню слайдер, иконки или фоновое изображение, без дополнительных расширений не обойтись. Прежде чем скачивать и устанавливать плагин, есть смысл изучить возможности конструктора. Возможно, в вашем редакторе уже есть необходимые вам функции. Или нужные элементы можно скачать из онлайн-библиотеки, такой как Visual Composer Hub для визуального конструктора страниц Visual Composer.

Источник

Создаем тему WordPress на базе статического HTML: Добавляем меню навигации

Данная статья является 6 из 6 частей цикла « Создаем тему WordPress на базе статического HTML »:

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

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

Что вам потребуется .

Для выполнения заданий этой статьи вам потребуется:

• Редактор по вашему выбору;
• Браузер для проверки результатов;
• Установленный на локальном или удаленном сервере WordPress,;
• Если вы работаете на локальном сервере, вам потребуется MAMP , WAMP или LAMP, чтобы активировать тему WordPress;
• Если вы работаете удаленно, вам потребуется FTP доступ к вашему сайту, плюс права доступа администратора к установленному WordPress;

1. Регистрация меню навигации

Чтобы зарегистрировать меню навигации, необходимо использовать функцию register_nav_menu() , которую нужно будет добавить в файл functions.php вашей темы.

Так как наша тема еще не содержит этого файла, можно начать как раз с его создания.

В папке темы создайте новый пустой файл с именем functions.php .

Откройте этот файл и добавьте в него следующий код:

Вы только что создали первую функцию вашей темы, похвалите себя!

Функция, которую вы создали, называется wptutsplus_register_theme_menu() , я добавила в начале ее названия префикс wptutsplus , чтобы обеспечить уникальность имени и чтобы избежать конфликта с любыми другими функциями, которые будут зарегистрированы плагинами, добавленными вами позже.

Данная функция включает в себя функцию WordPress register_nav_menu() , которая создает меню навигации. Ваша функция будет выполняться с помощью обращения действия init , это означает, что WordPress будет запускать функцию при инициализации.

Обратите внимание : подобные функции необходимо активировать через корректные обращения, иначе они не будут работать.

Функция register_nav_menu() имеет два параметра:

Один из этих параметров включает местоположение меню на странице. В данном случае мы обозначили расположение, как ‘primary’ . Позже мы добавим это в файл header.php , чтобы WordPress корректно выводил меню.

Вторым параметром является описание меню. В данном случае ‘Main Navigation Menu’ . Это название будет отображаться в разделе « Меню » панели администрирования.

2. Настройка меню навигации

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

На текущий момент его содержание далеко еще не идеально, но мы собираемся изменить это:

Создавая страницы, сообщения и другой контент, вы можете добавить их в свое меню навигации с помощью этого раздела. Я собираюсь добавить две новые страницы: « Блог » и « О себе ».

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

Сделав это, возвращаемся в раздел « Меню » для редактирования самого меню, добавляем в него новые страницы. После того, как вы перетащите в меню новые страницы, нажмите на кнопку « Создать меню ». Новое меню будет создано.

В самом конце, проверьте ‘Main Navigation Menu’ в настройках темы, чтобы убедиться, что этот элемент будет отображаться, как главное меню, которое вы только что зарегистрировали и сохранили.

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

3. Добавляем меню к нашей теме

На данный момент только что созданное меню еще не отображаться на вашем сайте, чтобы это произошло, вы должны добавить меню в файл заголовка.

Откройте файл header.php вашей темы и найдите в нем следующий код:

И замените его таким кодом:

Теперь мы добавили в нашу тему меню навигации, которое вы зарегистрировали, через использование функции wp_nav_menu() , указав для ‘theme-location’ значение ‘primary’ (местоположение, указанное при регистрации меню).

Все эти изменения видны в меню навигации моего сайта:

Заключение: Меню может располагаться не только в шапке сайта!

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

Важно отметить, что меню не обязательно должно находиться в шапке сайта.

Его можно вставить в разных местах, в том числе:

• В боковой панели — это может быть один из разделов меню для одного из разделов сайта или список подстраниц текущей страницы;
• Подвал — меню страниц или наиболее часто используемые страницы «мелким шрифтом»;
• Ниже основного меню навигации — раздел меню непосредственно под главным меню навигации.

Вы можете добавить меню в разных местах вашего сайта одним из трех способов.

Я перечислила их в порядке возрастания сложности:

• создать дополнительные меню с помощью раздела панели администрирования « Меню », а затем использовать виджет « Собственное Меню » для вывода его в любом месте вашей темы, там, где есть область виджетов;
• создать дополнительные меню с помощью раздела панели администрирования « Меню », а затем добавить его в код вашей темы так, как мы сделали выше. В этом случае вы добавляете дополнительный параметр в массив через вызов функции wp_nav_menu() , указывая для параметра ‘menu’ название меню, которое задается при его создании;
• зарегистрировав несколько меню с помощью функцию register_nav_menus() и добавив их в соответствующем месте в вашей теме, как описано выше.

Можете попробовать каждый из этих способов.

Редакция Перевод статьи « Creating a WordPress Theme from Static HTML: Adding Navigation »

Источник