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

Создание, установка и вывод меню на блоге

Во время выхода третей версии WordPress команда разработчиков анонсировала новую функцию для популярной системы – меню. Это стало очень удобно и все теперь пользуются этой функцией. Давайте разберемся, как добавить меню, настроить и вывести на блоге (даже если у Вас старая тема). Если у Вас возникнут вопросы – смотрим видео и задаем вопросы в комментариях.

Подключение меню к теме

Для начала открываем административную панель и переходим во вкладку “Внешний вид”. Далее переходим по ссылке “Редактор” и открываем файл functions.php. Если Вас не нравится редактор WordPress, все те же действия Вы можете повторить подключившись по FTP и зайдя в папку с Вашей темой. В файл functions добавляем следующий код:

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

Хочу обратить внимание, что first – это название Вашего меню. Когда мы будем создавать меню именно так нужно его будет назвать. Функция wp_nav_menu имеет множество параметров, которые Вы можете использовать при выводе, давайте разберем и их:

  • $menu –идентификатор отвечающий за меню – его ID номер, slug или название самого меню.
  • $container – по умолчанию меню с тегами UL включается в контейнер DIV, если Вы используйте данную функцию
  • $container_class – выводит класс контейнера, стандартно его значение  menu-{menu slug}-container, значит, у нас на выводе получится класс menu-first-container.
  • $container_id – так же дополнительно можно назначить контейнеру ID, по умолчанию пусть
  • $menu_class – поможет заменить элемент UL, его значение – menu.
  • $menu_id  – ID для элемента ul, по умолчанию равно значению menu-{slug}
  • $echo –вы можете поставить значение 0, тогда Ваше меню не будет отображаться на блоге
  • $fallback_cb – если меню отсутствует на блоге, то будет выведена функция wp_page_menu.
  • $before – задает текст, который будет выводиться перед ссылкой А, стандартное значение пустое
  • $after – аналогично верхнему пункту, только текст будет выводиться после ссылки A
  • $link_before – поможет вывести любую фразу перед ссылкой, по умолчанию пустует.
  • $link_after – опять аналогично верхнему пункту, только фраза выводится после ссылки.
  • $depth –назначает количество уровней меню (или её иерархии), значение по умолчанию ноль – оно выведет меню полностью
  • $theme_location – локация темы, где будет использовано меню, должна быть активирована через register_nav_menu() для того чтобы пользователь смог ее выбирать

 Примеры использования функции wp_nav_menu

Самый просто способ вывести меню, указанный в кодексе WordPress:

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

Таким образом мы указываем, что название меню first, а так же указываем его класс main-menu, который Вы можете редактировать через файл stye.css

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

Для того, чтобы добавить новое меню перейдите в административную панель и зайдите во вкладку “Внешний вид”. Там вы увидите пункт “Меню”, Вам надо будет перейти именно туда. Если у Вас версия ниже 3.0, то данного пункта у Вас не будет – лично от себя советую обновится.

Добавление нового меню wordpress

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

Правильно настраиваем меню на блоге

  • Название меню. Именно тут нужно ввести название (оно должно совпадать с тем, которое выводится у Вас в шаблоне сайта).
  • Страницы, ссылки, рубрики. Через эту область можно добавить новые пункты меню. Просто ставьте галочки и нажимайте “Добавить в меню”.
  • Параметры меню. Указывают на то, в какую область нужно вывести то или иное меню. Так же Вы можете автоматически добавлять новые страницы верхнего уровня.
  • Иерархия меню. Вы можете мышкой перетянуть пункты меню либо вперед, либо назад, настраивая таким образом вложенность пунктов в Вашем меню.

Если Вы все правильно сделали, то у Вас должно получится, что-то вроде такого:

Готовое меню wordpress

Если у Вас что-то не получилось – посмотрите наш видео урок ниже или же Вы можете задать свои вопросы в комментариях. Вы еще чуть-чуть приблизились к уровню Гуру WordPress! Спасибо за прочтение статьи, мы стараемся для Вас!

Один комментарий к записи Меню WordPress: создание, настройка и вывод на блоге

  1. Кристина:

    Спасибо Вам за урок! Помогли сделать меню

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">