Работа с меню на WordPress сайте

Меню – один из самых важных элементов на любом сайте. Именно от простоты и удобства навигации зависит, насколько комфортно посетителю будет странствовать по сайту. В WordPress существует 2 вида меню: вертикальное и горизонтальное. В этой статье рассмотрим такие вопросы: Как создать? Как добавить меню в тему, в которой оно не предусмотрено? Вывод меню, создание вложенности страниц, а так же общие настройки в WordPress.

меню wordpress

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

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

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

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

Вывод менюДля организации структуры, изображенной на скрине выше, необходимо было присвоить страницам «Саб 1» и «Саб 2» родительскую страницу «Пример страницы», а так же страницам «Саб саб 1» и «Саб саб 2» родительскую страницу «Саб 1». Я думаю, принцип построения понятен.

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

Что же делать, если тема (шаблон) не поддерживает вывод горизонтального меню?

Случаи отсутствия встроенного меню в тему крайне редки, однако случаются. Обусловлено это тем, что в таких шаблонах просто-напросто не прописана функция вывода меню:

<?php wp_nav_menu(); ?>

Необходимо просто добавить эту строчку в нужное место шаблона, будь то Header , Footer или Sidebar, которые расположены в файлах Header.php, Footer.php, Sidebar.php вашей темы. Стоит сразу же заключить функцию в теги <nav></nav>, эти теги html 5 влияют на оптимизацию сайта, а так же дадут возможность без проблем присвоить стили для меню. То есть так:

<nav><?php wp_nav_menu(); ?></nav>

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

Для примера выложу один вариант черного выпадающего многоуровневого меню - Скачать. Закачав файл, откройте его, скопируйте содержимое и вставьте в файл style.css, расположенный в папке с темой WordPress. Демо меню можно посмотреть тут.

Вертикальное меню WordPress

С горизонтальным меню разобрались, а вот с выпадающим вертикальным…с ним все намного проще, оно реализуется с помощью плагинов. Их достаточно много, вот несколько из них:

  1. JQuery Accordion Menu Widget
  2. JQuery Vertical Mega Menu Widget
  3. JQuery Drill Down Ipod Menu Widget
  4. JQuery Mega Menu Widget

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

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

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

Разработчики WP позаботились о своих юзерах и сделали все, чтобы им было комфортно пользоваться продуктом, поэтому лишних комментариев не будет. Воспользовавшись левой колонкой, можно добавить необходимые пункты в меню. Эти пункты включают в себя:

  1. Страницы;
  2. Произвольные ссылки;
  3. Рубрики.

добавить меню

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

menu

Не забудьте сохранить настройки.

Комментарии к “Работа с меню на WordPress сайте

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

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