После ручного кодирования различных типов меню мы завершим меню в этом уроке, охватывающие функциональность пользовательских меню, представленную в версии 3.0. Пользовательские меню позволяют нам свободно создавать меню из панели администратора WordPress, добавляя любую комбинацию страниц, ссылок на категории и других пользовательских ссылок, будь то внутренние ссылки сайта или ссылки на любое другое место в Интернете.
Шаг 1. Создайте файл функций
Чтобы использовать функцию пользовательского меню, нам нужно зарегистрировать специальную функцию PHP, которая включает функцию меню в теме через функцию register_nav_menu . Возможность вставки пользовательских меню не существует по умолчанию в теме. Нам необходимо специально включить эту функцию и создать определенные области меню или «местоположения» с помощью кода, в котором будут появляться наши пользовательские меню.
Как мы увидим позже, регистрация специальных функций станет очень важной при более продвинутой разработке темы. Чтобы зарегистрировать функции в WordPress, нам нужно добавить файл functions.php в файлы нашей темы.
Создать файл функций
Создайте пустой файл с именем functions.php в корневой папке вашей темы
Прежде чем мы что-то сделаем с файлом функций, мы увидим, что « Внешний вид»> «Меню» на панели инструментов довольно стандартный. Нет ссылки на меню, чтобы увидеть.
Шаг 2: зарегистрируйте функцию меню
Теперь мы зарегистрируем пользовательское меню, используя следующую базовую форму функции register_nav_menu .
|
1
|
<?php register_nav_menu( $location, $description );
|
Местоположение будет идентифицирующим именем меню для использования в коде, а описание будет хорошим именем, используемым для отображения описания меню на панели инструментов. Это будет выглядеть примерно так:
|
1
|
<?php register_nav_menu( ‘primary’, ‘Primary Menu’ );
|
«Основной» будет использоваться в коде, который помещает меню в определенную область шаблона (местоположение), а «Основное меню» будет использоваться для выбора местоположения меню в интерфейсе « Внешний вид»> « Редактирование меню» .
После того, как мы зарегистрировали наше меню, мы можем перейти к панели инструментов, чтобы создать меню через редактор меню.
Функция register_nav_menu находится в файле functions.php .
Будьте особенно осторожны, чтобы не оставлять ненужные пробелы после кода функций, так как это может привести к поломке темы.
Как только этот код будет помещен в ваш файл functions.php, снова посетите панель управления и обновите страницу, чтобы увидеть новый пункт меню в разделе «Внешний вид».
Мы можем очистить регистрационный код, как мы это сделали с wp_list_pages, и поместить параметры в массив.
|
1
2
3
4
5
|
<?php register_nav_menu(
array(
‘theme_location’ => ‘bottom_header’
));
?>
|
Использование массивов будет полезно при принятии решения о регистрации нескольких пользовательских меню с дополнительными параметрами (которые появятся чуть позже).
Шаг 3. Создание меню с помощью панели инструментов
Теперь, когда мы зарегистрировали пользовательское меню, мы можем перейти к « Внешний вид»> «Меню», чтобы создать наше первое меню.
Подробное руководство по созданию меню с использованием интерфейса меню смотрите в следующем видео — WP 101 Video Training — Custom Menus.
Интерфейс Menu Creator имеет следующие компоненты:
- Создать новую панель меню в правом верхнем углу, что позволяет создавать множество различных именованных меню
- Панель создания пользовательских ссылок для добавления ссылок на любой URL в меню
- Панель страниц для выбора существующих страниц с вашего сайта в меню
- Панель категорий для добавления ссылок на существующие категории сообщений в меню
Если на вашем сайте есть какие-либо дополнительные типы контента, например, пользовательские типы записей, у них также будет панель для добавления в меню.
Шаг 4: Поместить меню в тему
Размещение пользовательских меню в шаблонах тем требует использования функции wp_nav_menu () . Эта функция обеспечивает местоположение, в котором меню, встроенные в приборную панель, могут быть размещены по умолчанию.
Ниже приведена самая основная форма кода, необходимая для вставки одного меню из созданных меню.
|
1
|
<?php wp_nav_menu();
|
Использование по умолчанию:
Что приводит к следующему HTML
Каков результат?
Во-первых, мы заметили, что наши оригинальные div & ul, которые обернули функцию wp_nav_menu , не являются полностью необходимыми, поскольку функция генерирует свои собственные обертки div и ul. Что нам нужно сделать, это указать класс и / или идентификаторы, которые они будут иметь. Мы сделаем это немного с некоторыми дополнительными параметрами.
Используемая нами функция wp_nav_menu выполняет следующие действия:
- выбирает первое меню, созданное в редакторе меню
- добавляет div обертки, с пользовательским именем класса на основе имени меню, которое мы создали, с добавлением -container
- добавляет контейнер ul внутри контейнера, который имеет класс меню по умолчанию и пользовательский идентификатор на основе имени меню
- создает список элементов меню с пользовательскими классами элементов меню вместо класса элементов страницы
Приведенный ниже визуальный результат обусловлен дополнительными обертками, которые конфликтуют с некоторыми из CSS, которые есть в теме, поэтому нам нужно немного отредактировать разметку и изменить функцию размещения.
Сначала мы добавляем параметр «контейнер» в код размещения, чтобы сообщить ему о создании внешнего контейнера div. Контейнер также может быть сконфигурирован для генерации тега HTML5 «nav» , или со значением «false» можно запретить генерировать любой содержащий элемент. Эти параметры эффективно делают разметку в нашей теме, которая в настоящее время обертывает код размещения меню, избыточной, так что теперь мы можем удалить их. Вот код
|
1
2
3
4
5
|
<?php wp_nav_menu(
array(
‘container’ => ‘div’
)
);
|
Следующий параметр ( ‘container_id’ ) предназначен для указания атрибута ID контейнера div, поэтому он соответствует нашему CSS, который мы уже поместили в тему.
|
1
2
3
4
5
6
|
<?php wp_nav_menu(
array(
‘container’ => ‘div’,
‘container_id’ => ‘menu’
)
);
|
С третьим параметром ( ‘menu_class’ ) мы изменим класс по умолчанию для оболочки ul с ‘menu’ на ‘bottom-menu-list’, так как селектор .menu уже использовался в нашем CSS для стилей запасного меню который мы обсудим чуть позже на уроке.
|
1
2
3
4
5
6
7
|
<?php wp_nav_menu(
array(
‘container’ => ‘div’,
‘container_id’ => ‘menu’,
‘menu_class’ => ‘bottom-menu-list’
)
);
|
Теперь мы можем поместить этот код в тему без тегов div и ul, и сгенерированный HTML должен выглядеть точно так же, как предыдущие функции wp_list_pages и wp_page_menu в нашем предыдущем уроке.
Разница здесь, конечно, в том, что мы можем войти в любое время и добавлять, удалять или изменять любые пункты меню на лету, не меняя код. И вот наш результат.
Итак, теперь, когда у нас есть основы, давайте немного проработаем этого ребенка.
Подбирая темп!
В качестве упражнения мы хотим создать два пользовательских меню, которые мы разместим в разных местах. Один в стандартной позиции, под заголовком, а другой в верхней правой части заголовка.
Шаг 5: Регистрация двух новых пользовательских меню
Используя метод, который мы только что прошли, я собираюсь зарегистрировать два пункта меню. Массивы ваши друзья.
|
1
2
3
4
5
6
|
<?php register_nav_menus(
array(
‘top_header_menu’ => ‘Top Header: Menu at the very top of the header’,
‘bottom_header_menu’ => ‘Bottom Header: Menu Below header Banner’ )
);
?>
|
Это так же, как использование следующих двух строк кода:
|
1
2
3
|
<?php register_nav_menu(‘top_header_menu’,’Top Header: Menu at the very top of the header’);
<?php register_nav_menu(‘bottom_header_menu’,’Bottom Header: Menu Below header Banner’);
|
Просто намного аккуратнее и без повторения функции register_nav_menu , вместо этого мы используем register_nav_menus .
Обратите внимание на «s» в конце нашей функции, используемой для регистрации более одного меню
Я зарегистрировал два меню, top_header_menu и bottom_header_menu . Сейчас мы сосредоточимся только на одном из них — bottom_header_menu , который мы будем заменять существующим кодом wp_page_menu .
Код для регистрации этих меню содержит:
- название расположения меню, как мы будем ссылаться на него в коде при вызове для размещения в теме
- описание меню, которое мы увидим, отражено в административной области панели инструментов, где мы назначаем меню, которые мы строим, местам.
Это поможет нам узнать, где мы размещаем каждое меню. Теперь, как мы делали ранее с нашим первоначальным единственным основным меню, которое мы создали в качестве теста, давайте создадим заголовок «Заголовок» и « Верхний колонтитул» через « Внешний вид»> «Меню» и добавим несколько страниц, предпочтительно разные страницы к каждому. У меня есть некоторые по умолчанию из моего генератора демо-контента.
Мы зарегистрировали их, создали их и добавили в местоположения, чтобы теперь мы могли разместить их в нашей теме.
Шаг 6: Расширение кода размещения
Поскольку мы создали два пользовательских меню, нам понадобится немного больше, чем код размещения по умолчанию, чтобы вставить в нашу тему, чтобы мы могли связать каждое местоположение в теме с местоположением, зарегистрированным через функцию регистрации меню. Нам нужно будет добавить дополнительный параметр в функцию wp_nav_menu () .
Параметр расположения темы.
|
1
|
‘theme_location’ => ‘$menu_name’
|
Параметр theme_location , который должен иметь значение имени местоположения темы, с которым мы хотим связать эту область нашей темы. Имя местоположения темы не должно содержать пробелов, так как оно будет использоваться в кодах функций, которые не требуют пробелов. Имя должно совпадать с именем, указанным при регистрации местоположения в меню.
|
1
2
3
4
5
|
<?php wp_nav_menu(
array(
‘theme_location’ => ‘bottom_header_menu’
));
?>
|
В качестве альтернативы мы могли бы использовать параметр menu, который явно выбирает уже построенное меню из конструктора меню.
Значением этого параметра должно быть имя встроенного меню, Slug или ID. Пример ниже.
|
1
2
3
4
5
|
<?php wp_nav_menu(
array(
‘menu’ => ‘Header Bottom’
));
?>
|
Эти две опции не должны использоваться вместе, так как они неизбежно отменят друг друга в какой-то момент, учитывая, что один из них тянет меню на основе его назначения определенному местоположению, а другой тянет меню на основе имени меню. Некоторые мысли должны пойти на выбор одного или другого.
С параметром ‘theme_location’ можно было бы переназначить меню в разные местоположения, тогда как с параметром ‘menu’ мы ограничены только тем конкретным меню, которое вводится в кодированную область темы.
Давайте пока воспользуемся параметром theme_location , увидев, что мы будем регистрировать два меню, которые мы могли бы захотеть переключать между двумя местоположениями. Я добавлю три параметра, с которыми мы работали ранее, чтобы все было согласованно и было готово для правильного отображения.
|
1
2
3
4
5
6
7
8
|
<?php wp_nav_menu(
array(
‘theme_location’ => ‘bottom_header_menu’
‘container’ => ‘div’,
‘container_id’ => ‘menu’,
‘menu_class’ => ‘bottom-menu-list’
));
?>
|
Который затем берет следующее меню, которое мы создали
Что приводит к следующему, что выглядит идентично тому, что сгенерировал наш исходный код.
Шаг 7: Размещение второго меню
Теперь для того второго меню, которое мы зарегистрировали и назвали top_header_menu .
Мы собираемся разместить меню внутри нашей области заголовка с плавающей вверху справа. Мы будем использовать тот же тип кода для размещения первого меню, но для изменения местоположения темы. Это облегчит нам управление двумя отдельными списками ссылок. Например, верхнее меню заголовка может содержать некоторые общие ссылки, такие как контакт, карта сайта и тому подобное.
Мы будем использовать почти тот же код, что и в первом меню, изменив имя местоположения, чтобы оно соответствовало имени, которое мы использовали при регистрации верхнего меню. Мы также дадим ему уникальный идентификатор контейнера и меню ul класса. Вы заметите дополнительный параметр в конце этого списка. Это параметр для настройки типа резервного меню, которое мы хотели бы использовать.
Резервное меню — это меню, которое появляется, когда меню еще не назначено. Резервный метод по умолчанию — wp_list_pages () , который создаст меню из всех страниц, существующих на сайте в настоящее время. Это не всегда идеально, хотя это может помочь в случаях, когда макет или стиль зависят от меню, присутствующего в определенных темах. В нашем верхнем правом меню мы не хотим, чтобы что-либо появлялось, когда не было назначено ни одного меню, поэтому добавление этого меню является необязательным, но его отсутствие не приведет к поломкам. Для этого мы указываем значение false.
|
1
2
3
4
5
6
7
8
9
|
<?php wp_nav_menu(
array(
‘theme_location’ => ‘top_header_menu’,
‘container’ => ‘div’,
‘container_id’ => ‘top-menu’,
‘menu_class’ => ‘top-menu-list’,
‘fallback_cb’ => ‘false’
));
?>
|
Этот код будет помещен в раздел заголовка, под названием и описанием сайта.
CSS уже существует в теме, чтобы расположить его сверху справа в заголовке. Я включил CSS для меню в конце этого урока.
Это конечный результат
Шаг 8: Исправление кода для старых WP
То, что мы сделали до сих пор с кодом для регистрации функциональности меню, является очень простым и само по себе может быть проблематичным. В некоторых случаях, когда ваша тема может использоваться в более старых версиях WordPress, которые не поддерживают пользовательские меню, вы можете столкнуться с ошибками. Нам нужно добавить слой, чтобы сделать регистрационный код обратно совместимым в случае, если наша тема установлена в более старых версиях WordPress.
Начиная с регистрационного кода меню, которое мы использовали для двух меню
|
1
2
3
4
5
6
|
<?php register_nav_menus(
array(
‘top_header’ => ‘Menu at the very top of the page’,
‘bottom_header’ => ‘Menu Below header Banner’ )
);
?>
|
Мы завернем это условным аргументом , который сначала проверит, поддерживает ли текущая версия WordPress регистрацию меню. Он проверяет, существует ли функция с именем register_nav_menus . Если это так, функция register_nav_menus будет выполнена, если нет, то условный аргумент закончится endif . Мы рассмотрим условные аргументы более подробно чуть позже в этой серии.
Будьте осторожны, чтобы использовать двоеточие в конце первой части функции if и точку с запятой после endif.
|
01
02
03
04
05
06
07
08
09
10
|
<?php if(function_exists(‘register_nav_menus’)) : ?>
<?php register_nav_menus(
array(
‘top_header’ => ‘Menu at the very top of the page’,
‘bottom_header’ => ‘Menu Below header Banner’ )
);
?>
<?php endif;
|
Для получения более подробной информации об условных операторах или операторах if за это время просмотрите этот учебник — PHP для WordPress — Освоение условных операторов и тегов или следующую страницу в кодексе WordPress — codex.wordpress.org/Conditional_Tags
Существует гораздо больше решений для регистрации в пользовательском меню, но этот фрагмент кода охватит вас в подавляющем большинстве случаев, не превращая ваш мозг в кашу. Я надеюсь.
Убедитесь, что код места размещения также ухудшается
Мы должны убедиться, что у нас все еще есть функциональная тема в тех случаях, когда функциональность пользовательского меню не существует. Нам нужно добавить дополнительный условный оператор в наш код размещения ( wp_nav_menu ). Здесь есть несколько уровней, поэтому обратите пристальное внимание. Если мы не добавим этот дополнительный уровень, то в итоге пользователи WordPress до 3.0 получат неприятные ошибки при загрузке этой темы. В результате вы получите пользователей старого WordPress, которые угрожают смолить вас на улице, так что лучше всего вы правильно поняли эту часть.
1. Наш код размещения, как это было ранее
|
1
2
3
4
5
6
7
8
9
|
<?php wp_nav_menu(
array(
‘theme_location’ => ‘top_header_menu’,
‘container’ => ‘div’,
‘container_id’ => ‘top-menu’,
‘menu_class’ => ‘top-menu-list’,
‘fallback_cb’ => ‘false’
));
?>
|
К которому мы добавим аналогичный условный аргумент
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<?php if(function_exists(‘wp_nav_menu’)) : ?>
<?php wp_nav_menu(
array(
‘theme_location’ => ‘top_header_menu’,
‘container’ => ‘div’,
‘container_id’ => ‘top-menu’,
‘menu_class’ => ‘top-menu-list’,
‘fallback_cb’ => ‘false’
));
?>
<?php endif;
|
Само по себе это будет означать, что сайт под управлением более старых версий WordPress просто не будет отображать ничего. Поэтому мы должны добавить дополнительный аргумент к этому условному выражению, чтобы, когда ответ на if (function_exists (‘wp_nav_menu’) возвращался с NO (что означает, что функция не существует), мы можем добавить в аварийное меню, которое работает в WordPress pre 3.0. Вот схема.
|
1
2
3
4
5
6
7
8
9
|
<?php if(function_exists(‘wp_nav_menu’)) : ?>
// we’ll place the custom menu code here if the function does exist
<?php else: ?>
// we’ll place the fallback menu code here if not
<?php endif;
|
К вашему сведению, текст, который следует // в пределах PHP-кода, не будет выполняться или отражаться и действует как комментарии в коде!
И со всей строкой кода вместе
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
<?php if(function_exists(‘wp_nav_menu’)) : ?>
<?php wp_nav_menu(
array(
‘theme_location’ => ‘top_header_menu’,
‘container’ => ‘div’,
‘container_id’ => ‘top-menu’,
‘menu_class’ => ‘top-menu-list’,
‘fallback_cb’ => ‘false’
));
?>
<?php else: ?>
<div class=»menu»>
<ul>
<?php wp_list_pages(‘title_li=&depth=0’);
</ul>
</div>
<?php endif;
|
Это позволяет нам вернуться к старому стилю меню, если используемая версия WordPress не поддерживает регистрацию пользовательских меню.
Стилизация меню
Чтобы учесть все варианты, которые мы включили в наши меню, включая дополнительное верхнее правое меню и запасное меню, которое генерирует код размещения, я включил комбинацию селекторов CSS, чтобы охватить все.
По сути, у нас есть 3 основных контейнера, в которых будут размещаться стандартное, верхнее правое и запасное меню.
- Стандарт — # меню
- Вверху справа — # верхнее меню
- Запасной вариант — .menu
Указанные ниже стили можно найти между строками 100 и 184 файла style.css.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
/* ========================================================== Menu Styles ======= */
#menu, .menu, #top-menu {
height: 30px;
background-color: #0099CC;
display: block;
padding: 10px 0 0 25px;
border-bottom: 1px #698181 solid;
border-top: 1px #698181 solid;
font-family: «Lucida Grande»,»Lucida Sans Unicode»,Tahoma,Verdana,sans-serif;
}
#menu ul,
.menu ul,
#top-menu ul
{
float: left;
display: block;
margin: 0 25px 0 0;
padding: 0;
}
#menu ul li,
.menu ul li,
#top-menu ul li
{
float: left;
margin: 0 16px 0 0;
width: auto;
list-style: none;
position:relative;
}
#menu ul li a,
.menu ul li a,
#top-menu ul li a
{
color: #fff;
text-decoration: none;
}
#menu li a:hover,
.menu li a:hover,
#top-menu ul li a:hover
{
color: #9FF;
text-decoration: underline;
}
#menu ul li ul.children,
#menu ul li ul.sub-menu,
.menu ul li ul.children,
#top-menu ul li ul.sub-menu
{
display:none;
}
#menu ul li ul.children li,
.menu ul li ul.children li,
#menu ul li ul.sub-menu li,
#top-menu ul li ul.sub-menu li
{
float:none;
}
#menu ul li:hover ul.children,
.menu ul li:hover ul.children,
#menu ul li:hover ul.sub-menu,
#top-menu ul li:hover ul.sub-menu
{
display:block;
position:absolute;
top:20px;
margin: 0 16px 0 0;
width: auto;
list-style: none;
background-color:#999;
}
#top-menu {
position:absolute;
top: 0;
right:0;
}
|
Быстрое завершение
- Создайте файл функций для регистрации пользовательских меню
- Создание меню через внешний вид> Меню
- Вставить код размещения меню
- Убедитесь, что меню указывают на нужные места или названия меню
- Убедитесь, что генерируемый HTML совпадает с CSS вашего меню
- Убедитесь, что регистрационный код не нарушает старый WP
- Убедитесь, что ваш код размещения не нарушает старый WP