Меню

Как настроить свое меню для wordpress

WordPress.org

Русский

Рубрики

Внешний вид — меню

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

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

Раздел меню доступен через Внешний вид > Меню консоли.

Настройки экрана # Настройки экрана

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

Некоторые элементы, например записи, по умолчанию скрыты.

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

Добавление пунктов в меню # Добавление пунктов в меню

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

  1. Найдите панель под названием Страницы.
  2. На этой панели выберите вкладку Все, чтобы открыть список всех опубликованных в настоящее время страниц на вашем сайте.
  3. Выберите страницы, которые вы хотите добавить, установив флажок рядом с заголовком каждой из них.
  4. Нажмите на кнопку Добавить в меню, расположенную в нижней части этой панели, чтобы добавить выбранные вами элементы в меню, созданное на предыдущем шаге.
  5. Нажмите на кнопку Сохранить меню как только вы добавите все нужные пункты меню.

Ваше пользовательское меню теперь сохранено.

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

Удаление пункта меню # Удаление пункта меню

Создание многоуровневых меню # Создание многоуровневых меню

При планировании структуры вашего меню полезно думать о каждом пункте меню как о заголовке в формальном отчетном документе. В формальном отчете заголовки основных разделов (заголовки уровня 1) расположены ближе всего к левому краю страницы; заголовки подразделов (заголовки уровня 2) смещены немного дальше вправо; любые другие подчиненные заголовки (уровень 3, 4 и т. д.) в том же разделе имеют еще больший отступ вправо.

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

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

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

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

Если ваша текущая тема поддерживает настраиваемые меню, вы сможете добавить новое меню в одну из Область отображения.

  1. Прокрутите вниз окно редактора меню.
  2. В разделе Область отображения установите флажок для того места, где вы хотите разместить свое меню.
  3. Нажмите на кнопку Сохранить меню чтобы сохранить изменения.

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

Перестановка, настройка пунктов меню # Перестановка, настройка пунктов меню

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

Читайте также:  Как настроить микрофон в xiaomi airdots

У каждого пункта меню есть стрелка конфигурации справа от заголовка пункта меню, при нажатии на которую открывается окно конфигурации. Кликните на стрелку второй раз, чтобы закрыть окно конфигурации. Если вы не видите «Цель ссылки», «Классы CSS», «Отношение к ссылке (XFN))» и «Описание», то в разделе Настройки экрана убедитесь, что эти флажки установлены, чтобы их можно было здесь увидеть.

Затем выбор конфигурации:

Текст ссылки

Текст для этого конкретного пункта меню

Атрибут, используемый при отображении метки

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

Отметте флажком, если вы хотите, что бы страница открывалась в новом окне.

Классы CSS (необязательно)

Классы CSS для этого пункта меню

Отношение к ссылке (XFN)

Позволяет автоматически создавать атрибуты XFN, чтобы вы могли показать, как вы связаны с авторами/владельцами сайта, на который вы ссылаетесь.

Описание

Описание будет отображаться в меню, если текущая тема его поддерживает.

Источник



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

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

Кроме этого узнаем о продвинутых настройках пунктов меню, о которых не каждый «бывалый» владелец сайта знает, а так же как вывести меню в сайдбаре (виджете).

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

В админке сайта в боковой консоли наводим мышку на пункт «Внешний вид» и здесь нас интересует пункт «Меню». Кликаем по нему.

Увеличить.
Внешний вид — Меню

Если у вас уже были созданы ранее меню, то они отобразятся в выпадающем списке. Нас интересует создание нового меню. Кликаем на соответствующую ссылку.

Увеличить.
Создать новое меню

Нам предлагают ввести название меню. Это название будет видно только вам в админке и поэтому «обзовите» его как-то понятно. Например «Верхнее меню», «Нижнее меню», «Меню с иконками» и т.п.

Мы создали только что новое меню. Но оно пустое!

Как наполнить меню пунктами и отредактировать

Давайте его наполним. Для этого воспользуемся левым боковым сайдбарам в настройках меню.

Увеличить.
Добавляем пункты меню

Здесь по-умолчанию представлены Страницы, Записи, Рубрики, Произвольные ссылки. Так же могут быть другие таксономии (типы записей/страниц), в зависимости от вашей темы или установленных плагинов.

А теперь на примере. Нам необходимо в верхнем меню разместить пункты:

  • Главная
  • Карта сайта
  • Мы на YouTube
  • Контакты

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

Пункт меню «Мы на YouTube» будет вести на внешний сайт, поэтому необходимо будет создать произвольную ссылку в соответствующем пункте. Указываете путь до вашего канала YouTube и пишите текст ссылки.

Увеличить.
Произвольные ссылки меню

Пункты меню размещены. Но они не в той очередности, что нам нужна.

Увеличить.
Меню почти готово

WordPress позволяет выстраивать структуру меню при помощи перетаскивания пунктов в нужное место (т.н. drag & drop). Просто «схватите» левой клавишей мышки пункт меню и перетяните его на позицию между нужными вам пунктами.А потом отпустите кнопку.

Увеличить.
Перетягиваем пункт меню

Осталось указать что это меню должно отображаться сверху сайта.

Область отображения меню

Обратите внимание на пункт «Область отображения» снизу настроек созданного вами меню.

Увеличить.
Область отображения меню

У данной темы сайта 2 области меню: «Верхнее» и «Нижнее».

Если мы поставим галку напротив «Верхнее», то наше меню там и отобразится.

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

Увеличить.
Сайт с несколькими областями меню

Обычно разработчики тем и плагинов подписывают названия областей так, чтобы было понятно всем.

Нажимаем «Сохранить меню» и все готово. Проверяем у себя на фронте сайта как отобразилось.

Аналогичным образом можете создать меню для подвала (нижнее) с другим набором пунктов.

Как сделать выпадающее меню

Сделаем в только что созданном меню элемент, в котором будет выпадающий список. Например пункт «Рубрики» и в нем наши рубрики.

Создадим произвольный пункт «Рубрики» с знаком решетки # вместо ссылки. Клик по этому пункту у нас не должен никуда вести, т.к. такой страницы общей «Рубрики» просто физически нет на сайте, да и не нужна она.

Читайте также:  Ямал 401 как настроить тарелку

Увеличить.
Создаем пункт Рубрики

Теперь добавляем в меню наши существующие рубрики сайта.

Увеличить.
Добавляем рубрики сайта

Они стали общим списком в конец меню. Нас это не устраивает.

Увеличить.
Рубрики в общем списке

А теперь схватим нужную нам рубрику левой клавишей мыши и перетащим ее прямо под пункт «Рубрики» немного со смещением направо.

Увеличить.
Смешение подпункта меню

Таким образом мы создали иерархию пунктов, оно же выпадающее меню. А в пункте «Прочие материалы» я сделал еще одно вложение, т.е. при наведении мышки на этот пункт появятся еще пункты.

Увеличить.
Создаем сложную структуру меню

Дополнительные опции пунктов меню

Сверху справа есть кнопка «Настройки экрана».

Разберем по порядку.

Цель ссылки

При включении этого пункта появляется возможность указать, что при клике на эту ссылку страница должна открыться в новой вкладке браузера. Если кто знаком с HTML, то эта галка просто добавляет пункту меню target=»_blank»

Увеличить.
Открыть в новой вкладке

Атрибут title

Данный пункт добавляет поле ввода названия вашего пункта меню, которое будет появляться при наведении мышки на него. В разметке html это параметр title=»» у ссылки (привет SEO).

Классы CSS (Классы для li)

Позволяет задать индивидуальный class для элемента li в списке. Используется верстальщиками в целях придания отдельно взятому пункту индивидуального стиля или «повесить» на пункт какой-то сценарий js. Обычному пользователю может никогда не пригодиться.

Отношение к ссылке (XFN)

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

Описание

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

Иконки

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

Увеличить.
Иконки в меню

Достаточно выбрать любую иконку из появляющегося окна.

Увеличить.
Окно выбора иконок

Аналогично выбираем цвет иконки в появляющейся по клику палитре.

Как вывести меню в сайдбаре

Для этого перейдем в боковой консоли админки сайта «Внешний вид» — «Виджеты».

Добавим из списка виджет «Меню навигации» и в его настройках выберем созданное ранее меню.

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

Увеличить.
Меню с иконками

На этом все. Если будут вопросы — не стесняйтесь задавать в комментариях.

Добрый вечер! Помогите пожалуйста мне установить Меню под Темой. У меня меню было под темой.
Теперь все ссылки из меню не под темой, а над темой. Т.е. над картинкой. Как вернуть меню под тему? Напишите пожалуйста. С уважением Галина.




Плагин всплывающих форм 4 типов с гибкой настройкой

Помощник для сайтов в download и «раздающих» нишах

Плагин управления рекламой для увеличения заработка сайта

Управление ссылками на сайте с широким функционалом

Прячет часть контента на мобильниках и увеличивает клики по рекламе

Источник

Произвольное меню в WP 3.0+ (wp_nav_menu)

Широко известно, что в WordPress 3.0 добавлена поддержка произвольных меню (настраиваемых меню). Вещь, на мой взгляд, крайне удобная и полезная. Собственно, отсюда и эта статья.

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

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

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

Читайте также:  Как настроить сервер для майнкрафт через хамачи

Заметка: меню работает через таксономию (nav_menu) WordPress, а произвольные (внешние) ссылки, записываются в основную таблицу БД posts. Такой подход более гибкий и динамичный, однако требует постоянной генерации таких меню.

Видео по меню в WordPress

Включаем поддержку произвольных меню (wp_nav_menu)

Для начала нужно зарегистрировать возможность использования произвольных меню и сами меню. Делается это в файле functions.php,с помощью функции register_nav_menu(), так:

Сейчас мы зарегистрировали 2 меню с идентификаторами ‘ top ‘ и ‘ bottom ‘ с соответствующими им названиями. Идентификаторы нужны, чтобы использовать их в теме, для указания того места, где, через функцию вывода wp_nav_menu(), будет выводиться созданное в админке меню. Названия зарегистрированных расположений мы увидим в админке, когда зайдем в раздел Внешний вид -> Меню .

После того, как меню зарегистрированы, идем в админку и создаем свои меню (в данном примере 2 менюшки):

Задаем название меню (меню в шаблоне можно выводить по указанному названию, функцией wp_nav_menu()

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

  • Выбираем где будет расположено меню, так как мы зарегистрировали 2 менюшки, у нас будет 2 варианта: «Верхнее меню» и «Нижнее меню».
  • Поддержка произвольных меню в WordPress включается для каждой темы отдельно, такой строчкой в файле functions.php add_theme_support(‘menus’); Однако, в этой строчке нет необходимости, если мы регистрируем меню. В этом случаем поддержка будет включена автоматически.

    Вывод произвольных меню через функцию wp_nav_menu

    Меню зарегистрированы и созданы, осталось добавить их в шаблон. Делается это функцией wp_nav_menu(), которая может принимать следующие параметры:

    В данном примере в шаблон нужно вставить примерно (зависит от необходимых вам параметров) такие, 2 кода:

    #1. Вывод меню по расположению

    Верхнее меню. Вставляем в шапку шаблона (header.php), там где будет выводится верхнее (top) меню:

    Выведет созданное в админке меню, прикрепленное к расположению «Верхнее меню» с подобной структурой:

    Нижнее меню. Вставляем в подвал шаблона (footer.php), там где будет выводится нижнее (bottom) меню:

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

    Обратите внимание, в первом варианте параметры были переданы через массив (array). Во втором через строку. Оба варианта правильны. Это обычное дело для функций WordPress — параметры можно передавать как массивом, так и строкой (строка потом преобразовывается в массив).

    #2 Выводим меню по названию

    Чтобы вывести меню по его названию можно воспользоваться аргументом ‘menu’. Название указывается, то которое было задано при создании меню в админке. В нашем примере (см. картинку) «Главное меню». Аргумент menu обладает большим приоритетом чем theme_location , а значит, если мы выводим по названию, то параметр theme_location будет игнорироваться.

    Можно указать ID меню, а не название. Так, при изменении названия меню, код останется рабочим. ID меню можно посмотреть в УРЛ во время редактирования меню:

    Уберем обертку Div

    Вы наверное обратили внимание, что меню «оборачивается», часто, ненужным тегом div. Его можно удалить, указав в аргументах для функции wp_nav_menu() пустой параметр ‘container’=>» .

    Изменяем параметры по умолчанию

    Чтобы постоянно не указывать один и те же параметр для вставляемых меню, их можно переопределить в functions.php . Делается это через фильтр wp_nav_menu_args :

    По аналогии, можно создать свои аргументы по умолчанию: $args[‘аргумент’] = ‘значение’ .

    Проверка зарегистрировано ли меню

    В WordPress так же есть, функция условия: has_nav_menu(‘top’) — проверяет было ли зарегистрировано расположение меню top . Если меню не указано, то функция wp_nav_menu() сработает, как wp_list_pages() , но «обворачиватель» div останется, несмотря на то что в аргументах мы его убрали. Решить эту проблему можно так:

    Из всех передаваемых аргументов, непонятным является walker. Для тех, кто хочет разобраться для чего он нужен, читайте раздел в описании функции wp_nav_menu(). Там коротко и ясно описан принцип. Если очень коротко, то с его помощью можно внедриться в процесс генерации меню и изменить его как угодно.

    Включение доп. параметров у меню

    Меню можно настроить, например, можно добавить возможность указывать CSS класс для элемента меню, для ссылки меню. Для этого откройте вкладку «Настройки экрана»:

    Источник