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

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

Создание меню

Работа с меню у нас находится в главном меню навигации по следующему пути Внешний вид > Меню. Важно отметить, что не стоит и забывать про быстрый переход к меню через панель инструментов, если вы находитесь на внешней стороне сайта (front-end)

Переход к меню

Оказавшись в разделе для создания меню, первым делом нам необходимо дать имя нашему меню, например, Главное и кликом по кнопке Создать, собственно создать это меню

Создание меню

Теперь, после создания меню нам доступны две области: область слева — конструктор, из которого мы будем брать ссылки на те или иные страницы, и область для формирования структуры меню

Создание меню

Важно понимать, что в теме разработчики, по мимо основного меню, могли предусмотреть и вывод других меню, поэтому чтобы ваше меню выводилось в теме там где вы его ожидаете, то необходимо поставить флажок в том или ином чекбоксе, но по крайней мере Основное меню (Primary menu) у Вас должно быть отмечено.

Давайте посмотрим на конструктор меню. Мы видим, что нам доступно для формирования структуры меню ссылки на страницы, записи, рубрики и произвольные ссылки.

menu-4

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

Как добавить в конструктор теги (метки)?

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

Настройки экрана меню

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

Добавление элементов в меню

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

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

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

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

Вывод меню

Многоуровневое меню

Благодаря прекрасной и удобной технологии JavaScript мы с легкостью можем строить сложные отношения, иерархию ссылок нашего меню. Для этого просто зажмите левой клавишей мыши любую ссылку и перетяните (‘drag and drop’ ) ее правее, до того момента как появятся пунктирные линии, которые сигнализируют о вложенности дочерней ссылки в родительскую ссылку (пункт меню).

Создаем многоуровневое меню

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

Как сделать, чтобы ссылка открывалась в новом окне?

Обращаемся к тому же элементу «Настройка экрана», распахиваем кликом его область и отмечаем пункт «Цель ссылки», теперь нам доступна надстройка над каждым элементом в меню:

Открытие ссылки в новой вкладке

Добавление меню на ваш сайт

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

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

Вывод меню с помощью виджета
Вывод меню с помощью виджета

В результате получим следующий результат:

Результат вывода

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

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

Практическая работа №1

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *