Меню wordpress



Опубликовано

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

Описание всех упоминаемых функций в статье смотрите в Кодексе WordPress.

Содержание статьи

  1. Разметка
  2. Перенос меню на WordPress
  3. Добавление формы поиска в меню
  4. FAQ по меню

Разметка

Итак, в качестве примера предлагаю рассмотреть меню на данном ресурсе:

Меню
Внешний вид навигации

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


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

Разметка демо-примера достаточно банальная и у искушенного специалиста не вызовет особенного интереса (см. «Верстка меню сайта»):

  <nav class="wrap-menu">   <ul id="menu" class="menu">   <li class="current">   <a href="#">Главная</a>   </li>   <li>   <a href="#">HTML/CSS</a>   </li>   <li>   <a href="#">WordPress</a>   </li>   <li>   <a href="#">Справочник</a>   </li>   <li>   <a href="#">О блоге и авторе</a>   </li>   <li class="wrap-search">   <button id="search-btn" class="search-btn"></button>   <form action="#" id="search-form" class="search-form">   <input type="search" id="s" class="s" value="Поиск..." placeholder="Что ищем?">   <input type="submit" value="Ok">   </form>   </li>   </ul>  </nav>  

Для удобства (но необязательно) при дальнейшей работе можно назначить классы элементам <li>


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

Оформление CSS в статье не рассматривается, так что будем считать, что заготовка завершена.

Перенос меню на WordPress

Первый вариант

Подключим поддержку произвольного меню в текущей теме WP, добавив в файл functions.php PHP-код:

  add_theme_support('menus');  /* здесь и далее дескрипторы <?php ?> опущены */  

Заходим в админку, пункт Внешний вид → Меню. В поле Заголовок меню введем любое название:

Заголовок меню
Заголовок меню

Займемся прописыванием пунктов навигации. Как можно заметить, в данном окне предлагается на выбор три варианта пунктов — это произвольные ссылки, страницы и рубрики. Перед формированием произвольного меню важно понимать различие между ними. На страницах отображается статическая информация — к этому понятию у нас подходят пункты «Справочник» и «О блоге и авторе». В то время как в рубриках может быть несколько записей, например несколько статей по верстке в рубрике «HTML/CSS верстка». Произвольная ссылка может быть ссылкой на сторонний ресурс или ссылка на главную страницу вашего ресурса к примеру. Главная страница в WP может показывать как статический контент, так и последние записи (блоговый движок все-таки). Таким образом получаем следующее:


  • Страницы — «О блоге и авторе», «Справочник»
  • Рубрики — «HTML/CSS», «WordPress», «Вебмастеру»
  • Произвольные ссылки — «Главная»

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

Рубрики, страницы и произвольные ссылки
Формируем пункты навигации

Добавляем необходимые пункты в новоиспеченное меню, методом drag&drop расположите их в том порядке, в котором предпочтете нужным. Как видите, WP позволяет настраивать навигацию прямо в админке, без копания в коде. Однако кое-какие манипуляции с шаблоном все-таки надо провести. Зайдем в файл темы, где должна выводиться навигация и воспользуемся функцией wp_nav_menu():

  wp_nav_menu('menu=Название меню'); // в нашем случае menu  

Второй вариант

Существует и другой, более гибкий вариант включения поддержки меню в шаблоне — за это отвечают функции register_nav_menu()


и register_nav_menus(). Отличаются они между собой тем, что первая позволяет зарегистрировать одно меню, а вторая несколько. Код в functions.php выглядит так:

  register_nav_menus(array(   'header_menu' => 'Меню в header',    'sidebar_menu' => 'Меню в sidebar'   ));  

Здесь ключи массива — произвольные названия меню в шаблоне, значения — описания, выводятся в админке WP.

Далее проследуем в файл шаблона, куда нужно вставить навигацию, и пропишем код:

  wp_nav_menu(array(   'theme_location' => 'header_menu' // расположение меню в теме, вывели header_menu  ));  

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

Области темы
Области вывода навигации

Настройка навигации

Если вы все сделали правильно, навигация появится в вашем проекте, однако скорее всего будет выглядеть неоформленной. Дело в том что движок по умолчанию генерирует свои классы и id. Первый вариант — это изменить правила для элементов в style.css


на «вордпрессовские» (лучше всего через Firebug). Второй — указать в аргументах wp_nav_menu() классы, которые мы хотим видеть. В качестве аргумента функция принимает массив, в котором можно переопределить стандартные настройки:

  wp_nav_menu(array(   'menu' => '', // название меню   'container' => 'div', // контейнер для меню, по умолчанию 'div', в нашем случае ставим 'nav', пустая строка - нет контейнера   'container_class' => '', // класс для контейнера   'container_id' => '', // id для контейнера   'menu_class' => '', // класс для меню   'menu_id' => '', // id для меню  ));  

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

Полученное DOM дерево в Firebug
Полученное DOM дерево в Firebug. Классы и id для <li> сгенерированы WP

Добавление формы поиска в меню

Меню выведено, но остался еще один нюанс — поисковая форма. Первое решение, которое приходит в голову, немного изменить разметку, вынести поиск в отдельный элемент, скажем <div>


, и допилить шаблон:

   <?php wp_nav_menu(array(...)); ?> <!-- навигация -->   <div class="wrap-search">   <!-- поисковая форма -->   </div>  

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

  /* Добавляем поиск */  add_filter('wp_nav_menu_items','add_search', 10, 2);  function add_search($items, $args) {   ob_start();   get_search_form();   $search_form = ob_get_contents();   ob_end_clean();   $items .= '<li class="search-item">' . $search_form . '</li>';   return $items;  }  

А в search-form.php дописываем остальную разметку:

  <button id="search-btn" class="search-btn"></button>  <form action="#" id="search-form" class="search-form">   <input type="search" id="s" class="s" value="Поиск..." placeholder="Что ищем?">   <input type="submit" value="Ok">  </form>  

Теперь все в порядке.

FAQ по меню

Как назначить отдельный стиль для активного пункта меню?

Часто в Сети встречаются меню с выделенными активными пунктами, например с подчеркиванием, другим фоном и т.д. При верстке многие назначают другой стиль пунктам через класс .active


. Однако WP добавляет к активным пунктам класс .current-menu-item, поэтому просто надо переменить название класса на .current в style.css:

  .current-menu-item {   /* стили для активного пункта */  }  

Помощь проекту

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

Рейтинг статьи

verstaka.net

Вывод меню средствами WordPress

В освободившийся контейнер <nav></nav> будем выводить меню, настроенное в админке WordPress. Для достижения поставленной задачи необходимо выполнить следующие три пункта инструкций.


1. Зарегистрировать меню в файле functions.php нашей темы.

Для этого в functions.php мы опишем новую функцию, назовем ее, например, register_my_menus. Данная функция будет запускать стандартный метод register_nav_menus(), описанный в ядре WordPress 3 и выше, регистрирующий позиции меню.

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

В нашей теме было всего лишь одного горизонтальное меню в шапке сайта. Для примера работы с функцией register_nav_menus() я предлагаю зарегистрировать два меню. Одно из них вывести под шапкой, а второе перед подвалом.

Листинг 1. Регистрация двух меню. Файл function.php активной темы WordPress

  function register_my_menus()  {  register_nav_menus  (  array( 'header-menu' => 'header-menu1', 'footer-menu' => 'footer-menu1')  );  }  

В строке 5 листинга 1 мы как раз передаем массив аргументов стандартной функции WordPress register_nav_menus(). В качеств первого аргумента мы регистрируем меню под шапкой блога: ‘header-menu’ => ‘header-menu1’. Зарегистрированная позиция в шаблоне будет носить название header-menu, а в админке WordPress будет представлена как header-menu1. Не пугайтесь, ниже я подробно поясню, что имеется ввиду.


Аналогичным образом второй аргумент ‘footer-menu’ => ‘footer-menu1’ регистрирует позицию для меню над подвалом.

Новая функция register_my_menus(), которую мы создали в листинге 1, должна как-то запускаться. Для этого используем хук init.

Мы уже обсуждали работу с хуками в видокурсе «Разработка плагина для WordPress». Вкратце, хук — это событие генерируемое движком в тот или иной момент. Например, при отображении страницы блога, до отправки заголовков, возникает тот самый хук init, который мы будем использовать. В WordPress сущесвует множество других хуков (хуки возникают при формировании HEAD-части страницы, при отображении меню админки и т.д.) и на каждый из них можно прицепить выполнение той или ной функции. Для запуска функции при возникновении хука используется метод add_action().

В файле functions.php нашей темы мы уже применяли метод add_action для отключения лишнего содержимого раздела HEAD в WordPress. Можно прямо под существующей инструкцией add_action(‘init’, ‘remheadlink’); указать еще одну (см. листинг 2).

Листинг 2. Запуск функции register_my_menus хуком init. Файл functions.php


  if (function_exists('register_nav_menus'))  {  	add_action( 'init', 'register_my_menus' );  }  

Как видно из листинга 2, мы применяем условный оператор «if» для проверки, можно ли в данной версии WordPress использовать функцию регистрации меню — register_nav_menus(). Ведь движок WordPress может быть старым и не поддерживать работу с меню. Метод function_exists() вернет TRUE, если register_nav_menus() знаком данной версии WordPress.

Если WordPress умеет работать с функцией register_nav_menus, выполнится метод add_action( ‘init’, ‘register_my_menus’ ), который, при возникновении хука init запустит функцию register_my_menus (описанную в листинге 1).

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

В нашем случае зарегистрировано два меню: header-menu и footer-menu. Откроем на редактирование файл index.php нашей темы и укажем позиции для вывода наших меню.

Как мы и договаривались,  header-menu будет выводиться под шапкой в блоке <nav></nav>. Для этого используем код листинга 3.

Листинг 3. Указываем место для вывода меню header-menu. Файл index.php активной темы

  <nav>  	<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>  </nav>  

Ну и где-нибудь над подвалом аналогичным образом укажем место отображения footer-menu (см. листинг 4).

Листинг 4. Указываем место для вывода меню footer-menu. Файл index.php активной темы

  <nav>  	<?php wp_nav_menu( array( 'theme_location' => 'footer-menu' ) ); ?>  </nav>  

3. Настройка меню в админке WordPress.

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

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

Рис. 1. Раздел по работе с меню WordPress админки блога.

Наша тема поддерживает два меню (header-menu и footer-menu). Поэтому в соответствующем интерфейсе раздела «Меню» создадим два меню. Одно назовем header-menu-2, второе — footer-menu-2.

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

Рис. 2. Создание меню WordPress.

Созданные меню можно закреплять за позициями, которые носят название header-menu1 и footer-menu1. Именно такие названия для позиций мы регистрировали в листинге 1.

Расстановка зарегистрированных меню на позиции

Рис. 3. Закрепление за позициями соответствующих меню WordPress.

После этого, пользуясь функционалом, представленным на рис. 4., можно добавлять выбранный тип ссылок в меню, открытое на вкладке интерфейса, представленного на рис. 2.

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

Рис. 4. Функционал по добавлению пунктов в меню.

Я добавил в каждое меню по три пункта. При этом, пункты можно смещать (вверх и вниз, влево и вправо). При смещении влево и вправо происходит создание вложенных меню (см. рис. 5 и 6).

Вложенность пунктов меню

Рис. 5. В меню header-menu-2 я создал три пункта. При этом смещением вправо я реализовал следующую последовательность вложений: Мой блог → Еще одна ссылка → Третья ссылка.

Вложенность пунктов меню для выпадающего меню

Рис. 6. Меню footer-menu-2 с вложенностью следующего вида: Ссылка 1 → Ссылка 2, Ссылка 3.

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

Меню уже отображаются на страницах WordPress

Рис. 7. Отображение двух меню на страницах блога.

Рассмотрим HTML-структуру меню header-menu-2.

Листинг 5. HTML-структура меню header-menu-2, сгенерированная WordPress автоматически

  <nav>   <div class="menu-header-menu-2-container">   <ul id="menu-header-menu-2" class="menu">   <li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="http://www.sdelaysite.com">Мой блог</a>   <ul class="sub-menu">   <li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="http://www.sdelaysite.com">Еще одна ссылка</a>   	<ul class="sub-menu">   		<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="http://www.sdelaysite.com">Третья ссылка</a></li>   	</ul>   </li>   </ul>   </li>   </ul>   </div>  </nav>  

Как видно из листинга 5, WordPress неплохо справляется с задачей формирования HTML-кода меню.

Все меню охватываются тегами <ul></ul>, причем заданное название меню участвует в формировании атрибута id (id=»menu-header-menu-2«), поэтому название меню в админке блога должно быть набрано латиницей (см. рис. 2).

Вложенные пункты меню охватываются дополнительными тегами <ul></ul>. На этом факте можно отлично сыграть, при верстке выпадающего меню в WordPress.

www.sdelaysite.com

Добавление меню в WordPress через админ-панель

Шаг 1. Открываем панель администратора. Далее Внешний вид – Меню.

1

Примечание! Основной код Вордпресс позволяет создать меню из нескольких элементов. А именно:

2

Шаг 2. Для создания меню нажимаем Создайте новое меню.

3

Шаг 3. В появившемся поле Название меню введите нужное вам имя, например, Главное меню и подтвердите действие, нажав Создайте новое меню.

4

Шаг 4. Вы создали меню. Следующий этап – это добавление нужных вам рубрик, страниц, записей и меток в меню WordPress. Выбираем пункт, который следует добавить, к примеру, Страницы, и ставим галочку напротив раздела, который хотим сюда добавить. Кликаем на Добавить в меню.

5

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

6

Когда вы добавите и упорядочите все нужные вашему меню страницы, записи и рубрики не забудьте все сохранить, нажав Сохранить меню.

Шаг 5. Чтоб ваше меню отобразилось на сайте WordPress, переходим в Управление областями, выбираем в перечне созданное меню и кликаем на Сохранить изменения.

7

Вот и все. Мы создали меню и разместили его на WordPress сайте.

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

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

8

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

9

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

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

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

10

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

11

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

Добавление произвольной ссылки в меню WordPress

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

Настройка такого рода ссылки делается через меню WordPress. Заходим Внешний вид – Меню – Произвольные ссылки.

12

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

13

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

Как удалить рубрику в меню WordPress?

Бывает, что мы по ошибке создали не нужный пункт меню. Чтобы убрать кнопку какой-то рубрики в созданном меню Вордпресс — выделите ее галочкой, и в разделе Действия, нажмите Удалить.

14

Важно! После удаления рубрику восстановить нельзя.

Как удалить меню WordPress?

Создавать и редактировать меню Вордпресс мы уже научились. Пришло время понять, как удалить меню с сайта, если возникла такая надобность. Это действие можно сделать через админ-панель сайта. Как обычно, идем Внешний вид – Меню. Далее выбираем меню, необходимое удалить.

15

На экране появится окно с настройками. Внизу будет доступна функция Удалить меню.

16

Нажимаете и все, ваше меню удалено и можно приступить к созданию нового.

Как настроить меню в WordPress?

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

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

Для создания нестандартных меню нужно использовать плагины. Так, разместить на сайте меню вертикально поможет плагин «jQuery Vertical Accordion Menu». По умолчанию у данного плагина имеется в арсенале парочка готовых шаблонов, при этом с разными цветами. Кроме этого, он позволяет сделать непростое меню, а раздвижное. Это очень удобно, если ваше меню имеет много подразделов.

17

Установить «jQuery Vertical Accordion Menu» можно через админку, указав название плагина. Установив его, зайдите в раздел Виджеты, выделите виджет плагина и перетащите его в сайдбар. Уже в виджете вы сможете найти все нужные настройки.

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

18

Изменение цвета меню в WordPress

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

19

Чтоб добиться разноцветного результата как на скрине, вам необходимо:

  1. Добавить цвета для стилей в файле style.css для каждого раздела меню отдельно. Для этого прописываем цвет каждого пункта в style.css.

20

  1. Присваиваем CSS классы к разделам меню. В вордпресс открываем Внешний вид – Меню – Настройки экрана и активируем Классы CSS.
  2. Настраиваем для меню классы CSS. Открываем первый пункт меню, вводим greencolor в графе Классы CSS. По такому же принципу добавляем остальные цвета для остальных разделов меню и нажимаем Сохранить.

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

Как добавить строку поиска в меню WordPress?

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

Самым простым способом считается добавление нижеуказанного кода в файл functions.php.

21

В итоге получим:

22

А визуально это будет выглядеть так:

23

Подытожим

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

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

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

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

www.templatemonster.com

Почему важно меню

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

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

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

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

Бесплатные плагины WordPress

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

Меню Max Mega

Когда вы устанавливаете  Max Mega Menu , оно автоматически преобразует существующее меню в мега-меню. С помощью нескольких кликов вы можете полностью преобразовать свое меню в удобное для пользователя, легко доступное меню. Конструктор drag-and-drop помогает создать меню на панели управления, и вы можете увидеть, как меню формируется в режиме реального времени, используя функцию предварительного просмотра.

Плагины WordPress - Max Mega Menu

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

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

Как правило, функция мега-меню — это то, что вы найдете только в премиальных или дополнительных плагинах, но оно доступно бесплатно в Max Mega Menu. 

Для дополнительных функций, таких как поддержка WooCommerce и Easy Digital Downloads, вы можете перейти на платную версию .

Скачать

Responsive Menu

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

Отзывчивое меню

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

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

Чтобы добавить такие функции, как Awesome Font Icons и анимации кнопок, вам необходимо приобрести премиальный плагин .

Скачать

WP Respive Menu

Чтобы преобразовать ваше меню WordPress в скользящее меню, которое идеально подходит для мобильных устройств, вы должны попробовать WP Responsive Menu . Все функции, не необходимые для мобильного меню, могут быть скрыты. Тем не менее, пользователи настольных компьютеров получают доступ к меню по умолчанию с полным списком параметров. Он легко интегрируется с интерфейсом администратора WordPress и содержит множество удобных инструментов для создания меню.

WP Respive Menu

Что делает WP Responsive Menu выдающимся, тот факт, что процесс создания меню упорядочен. Это поможет вам создать красивое и функциональное меню за считанные минуты, используя десятки вариантов, доступных для настройки вашего меню. Для получения дополнительных функций ознакомьтесь с плагином премиум-класса .

Скачать

Nextend Accordion Menu

Аккордеонные меню скользят внутрь и наружу, сводя к минимуму и максимизируя пространство и контент на сайте. Используя меню Accendion Nextend, вы можете создать несколько экземпляров меню аккордеона и добавить его на свой сайт с помощью виджета или короткого кода.

Следующее меню аккордеона

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

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

Скачать

Admin Menu Editor

Admin Menu Editor не создает автоматически меню. Это просто поможет вам вручную отредактировать меню панели инструментов. После установки этого плагина он позволяет скрыть пункты меню, даже от администратора.

Редактор меню администратора

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

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

Скачать

Nav Menu Roles

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

Роли меню

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

Скачать

Responsive Select Menu

Иногда вам может понадобиться поле «Выбор» на мобильном телефоне вместо обычного меню. Responsive Select Menu превращает ваше меню в поле «Выбор» для мобильных устройств. Плагин может работать с любой темой WordPress, поддерживающей меню WordPress 3.

Отзывчивое меню выбора

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

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

Скачать

Плагины Premium

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

UberMenu

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

Меню Uber

Уникальной особенностью UberMenu является то, что он позволяет добавлять в меню дополнительный контент, например, Карты Google. Вы можете получить сетки сообщений в блоге для отображения в меню. Не только это; вы также можете настроить сетку, чтобы вытащить определенный контент, а также избранные изображения. Если вы хотите, вы можете выровнять меню по вертикали или создать несколько UberMenus с независимыми конфигурациями.

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

Подробнее

Hero Menu

Загрузка параметров настройки, которые поставляются с Hero Menu, позволяет вам создавать любое требуемое меню. В этом плагине возможны как типичное меню, так и простое раскрывающееся меню. Для вас легко настроить 650 шрифтов Google, 60 цветовых пресетов и собственный фон. Создание меню легко с помощью редактора перетаскивания.

Меню героя

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

Подробнее

WP Mega Menu Pro

Если вам трудно выбирать между вертикальным и горизонтальным меню, возможно, WP Mega Menu Pro для вас. Этот плагин позволяет вам создавать меню в обоих направлениях. Кроме того, он объединяет 14 шаблонов, позволяющих вам начать работу. Он также включает визуальный построитель drag-and-drop.

WP Mega Menu Pro

Подробнее

Меню пользователя Slick

Slick Menu — отличный выбор для создания многофункциональных сложных мега-меню. Вы можете настроить каждый уровень в меню, используя цвета, фон, изображения, наложения и шаблоны. Slick Menu использует стандартный WordPress Customizer, который поможет вам контролировать ваше меню в режиме предварительного просмотра, даже когда это происходит. Особенность этого плагина — уникальная функция, которая позволяет добавлять видео в элементы меню.

Меню пользователя Slick

Подробнее

WP Floating Menu Pro

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

WP Плавающее меню Pro

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

Подробнее

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

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

freehtmlthemes.ru

Способ 1. Включение поддержки меню в теме WordPress

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

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

Способ 2. Регистрация областей темы

В двух словах, область темы — это такая условная область, которая предназначена для вывода меню. Условная, потому что сама по себе она нигде не выводится. Как всё это происходит по порядку:

  1. Сначала мы регистрируем область темы. После этого у нас сразу появляется функционал меню тут: Внешний вид > Меню. Допустим мы создадим две области темы: «Шапка сайта» и «Левый сайдбар».
  2. Затем, при создании меню мы указываем область темы, в которой хотим отображать данное меню. Также можно указать несколько областей сразу.
  3. И завершающий шаг. В разных частях темы выводим меню, соответствующие разным областям.

Не знаю, насколько понятно я всё это объяснил в теории, но на практике определенно будет легко. Итак, для того, чтобы зарегистрировать область темы, нам понадобится функция register_nav_menus(). Давайте тогда создадим две области, о которых я писал выше: «Шапка сайта» и «Левый сайдбар».

Да, код — в functions.php.

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

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

Переходим во Внешний вид > Меню, указываем в поле название нового меню и нажимаем кнопку Создать меню.

В итоге у нас получилось вот что:

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

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

Всё получилось? Тогда нажимаем кнопку Сохранить меню.

Вы можете удалить или отредактировать (переместить, переименовать) элемент, нажав на стрелку справа (на скриншоте отмечена красным).

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

CSS-классы для отдельных элементов меню, открытие некоторых ссылок в новой вкладке

Как?

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

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

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

Как добавлять в меню записи, таксономии и произвольные типы постов

На предыдущых скриншотах видно, что по умолчанию в меню можно добавлять только страницы, ссылки и рубрики. А если нам надо добавить запись? Конечно, вы можете добавить её через «ссылки», но тогда, если изменится URL записи, у нас появится ошибка 404.

Решение этой задачи есть и оно очень простое.

Записи и метки

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

Таксономии и типы постов

И у тех и у других принцип один и тот же — при регистрации таксономии (register_taxonomy()) или типа поста (register_post_type()) значение параметра функции show_in_nav_menus должно быть true.

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

Вывод меню на сайте

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

Пример 1. Используем для вывода ID / ярлык / название меню

Если вы всё-таки захотите использовать этот первый способ, я рекомендую в качестве параметра задавать только ID меню. Читайте подробнее о том, как узнать ID меню или его ярлык.

В итоге имеем:

Пример 2. Использование зарегистрированных областей темы для вывода меню

На первый взгляд, этот пример может показаться сложнее, потому что сначала нам требуется зарегистрировать область темы (в этом посту мы уже зарегали две области — head_menu (Шапка сайта) и side_menu (Левый сайдбар), затем, при создании меню, нам надо присвоить его одной из этих областей (мы уже создали с вами меню и присвоили его области head_menu) и только после этого мы можем выводить область с содержащимся в ней меню на сайте.

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

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

Функция wp_nav_menu() имеет большое количество параметров, все они описаны в документации этой функции.

Вставляем меню в сайдбар (в виде виджета)

Существует ещё и третий способ вывода меню на сайте — в виде виджета. Для этого переходим во Внешний вид > Виджеты, находим виджет «Произвольное меню» и перетаскиваем его в сайдбар. Если по каким-то причинам у вас не получается это сделать, сначала прочитайте пост про сайдбары в WordPress.

Переделываем меню при помощи волкера

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

Для начала нужно создать класс, у меня это True_Walker_Nav_Menu, код которого я вставил в functions.php текущей темы.

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

Если вам нужны ещё параметры объектов $item, смотрите документацию функции wp_get_nav_menu_items(), которая кстати является ещё одним нестандартным способом вывода меню в WordPress.

Окей, класс вставили, второй шаг — добавить параметр walker в функцию wp_nav_menu(). То есть, если у вас уже используется меню на сайте, не нужно менять его код на тот, который указан тут ниже, надо всего лишь добавить туда ещё один параметр.

Вот и всё, теперь, редактируя класс, вы сможете отредактировать и ваше меню. Всё просто. Если есть вопросы — оставьте их в комментариях, буду рад вам помочь.

misha.blog

Стандартные возможности WordPress

Перейдите в раздел «Внешний вид» — «Меню», нажмите на кнопку «+» и введите заголовок.

создание произвольного меню

Теперь необходимо добавить в него пункты:

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

Произвольные ссылки

Страницы — выберете нужные страницы и нажмите «Добавить в меню».

добавление страниц в меню

Рубрики — отметьте галочками нужные рубрики и тоже нажмите «Добавить в меню».

Добавляем рубрику в меню

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

иерархия

Не забывайте сохранять внесенные изменения.

В темах, которые поддерживают WordPress 3 Menu System присутствует так же опция «Области темы» — это место в шаблоне WordPress, которое специально отведено под меню. Чаще всего оно предназначено для вывода верхнего горизонтального меню блога, которое часто называют «главным». В таком случае достаточно задать «Область темы», и оно автоматически появится на сайте.

Области темы

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

вывод произвольного меню

Сохраните настройки и полюбуйтесь на свое творение.

Верхнее меню WordPress — как отредактировать и удалить

Во многих темах верхнее menu формируется автоматически из публикуемых страниц, которые в основном используются для общей информации — «О блоге», «Полезная информация», «Карта сайта» и так далее. Для этого в файле header.php используется следующий код:

В моей теме оно дублируется еще внизу страницы, поэтому этот же код был и в шаблоне footer.php.

Чем это неудобно:

  • Формируется динамически из всех созданных и опубликованных страниц, хотите вы того или нет. Порой некоторые страницы нужно оставить незамеченными.
  • В некоторых темах под верхнее меню выделяется очень мало места, поэтому в нем отображаются только первые 3-4 пункта, а остальные скрываются под соседним слоем (будь то область контента или логотип). Смотрится это очень некрасиво, да и поисковые системы могут это счесть за преднамеренное сокрытие ссылок от посетителей.

Исправить эти недочеты достаточно легко — нужно просто удалить тот код, что я привел выше и написать следующую конструкцию:

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

  • значением атрибута href — содержит ссылку на нужную страницу;
  • значением между тегами <a></a> — задает текст ссылки.

fairheart.ru


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.