Чтобы визуально разделить пункты меню, можно задать каждому из них нижнюю или верхнюю границу. В зависимости от того, какую из них вы используете, у вас будет не хватать границы сверху или снизу меню. Это можно исправить, добавив еще одну границу к самому блоку.menu:
Menu a {
border-top: 1px solid blue;
}
.menu {
border-bottom: 1px solid blue;
}
Сейчас ссылки меню выглядят слишком низкими, расположенными близко друг к другу. Если текст каждой ссылки не будет занимать более одной строки, то увеличить их высоту и сохранить при этом текст вертикально по центру можно с помощью свойств height и line-height:
Как видно на анимации, свойство height влияет на высоту ссылки, а межстрочный интервал line-height изменяет уже высоту самой текстовой строки. Обязательно задавайте одинаковые значения для этих двух свойств, если хотите, чтобы текст ссылки был вертикально отцентрирован.
Основная задача при создании горизонтальной навигации - расположить пункты меню в один ряд. Это можно сделать несколькими способами.
Первый вариант - задать пунктам списка свойство display со значением inline либо inline-block:
После этого можно заняться оформлением ссылок. Например, можно сделать такой стиль:
Menu a {
text-decoration: none;
font-family: sans-serif;
color: #5757a0;
display: inline-block;
padding: 10px 20px;
background-color: lavender;
border-bottom: 5px solid #5757a0;
}
Мы добавили фоновый цвет и нижнюю границу для каждой ссылки, а также увеличили ее размеры при помощи внутренних отступов padding . Заметьте, что между пунктами меню есть небольшие промежутки, хоть мы и не добавляли их через стили. Они возникают, потому что браузер так воспринимает символ возврата каретки между закрывающим и открывающим тегами
:Menu li {
float: left;
}
Как видим, промежутков между пунктами уже нет. Все остальные стили работают, как и прежде. Но если вы добавите после навигации другой HTML-элемент (допустим,
), то на него повлияет обтекание и он встанет в один ряд с пунктами меню. Отменить это действие можно, добавив заголовку свойство clear: left . Но при разработке сайта с большим количеством разных страниц может стать сложно следить за тем, нигде ли вы не забыли указать данное свойство. Гораздо легче отменить обтекание со стороны навигации. В этом поможет такая запись:
Menu {
overflow: hidden;
}
Это также поможет вернуть нормальную высоту родителя плавающих элементов. Мы уже говорили об этой проблеме в предыдущих уроках, но тогда мы решали ее через специальный хак с использованием псевдоэлемента:after . Пример выше - это еще один способ решить вопрос с исчезнувшей высотой контейнера.
Примечание:
если вы установите фон для элемента.menu , то вы не увидите его до тех пор, пока не примените к нему overflow: hidden . Логично, ведь как можно увидеть фон элемента, чья высота равна нулю?
В следующем уроке мы более детально расскажем о возможностях селекторов атрибутов, с помощью которых можно задавать
В позапрошлой статье блога я писал про интересное нововведения последней версии wordpress — специальный механизм создания и управления . Теперь стало намного удобнее и проще обычным пользователям создавать различные по сложности меню, которые могут состоять не только страницы или категории блога, но и иметь ссылки на любые URL. Для отображения меню в шаблоне используется специальная функция wp_nav_menu — про нее сегодня и расскажу.
Если в админке wordpress нету раздела меню, то его можно активировать добавлением специального кода в файл functions.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
— задает текст, который выводится перед ссылкой А.
$link_before
— выводит фразу перед текстом ссылки, не задано.
$link_after
— выводится после текста ссылки, тоже пустое.
$depth
— задает количество уровней иерархии для вывода меню, значение по умолчанию 0 выводит все меню целиком.
$walker
— какой-то непонятный пользовательский «walker object», наверное больше понадобится продвинутым разработчикам.
$theme_location
— локация темы, где будет использовано меню, должна быть активирована через register_nav_menu() для того чтобы пользователь смог ее выбирать. Тоже какая-то не совсем понятная настройка, судя по всему, при работе с виджетами.
Примеры использования функции wp_nav_menu
Самый простой код, приведенный в кодексе:
Убираем контейнер DIV из меню
"")); ?>
В принципе, ничего сложного в создании и управлении меню wordpress 3.0 нет. Разработчики значительно упростили процедуру работы и расширили возможности данного элемента навигации. Решение часто используется во множестве задач по шаблону, например, при создании для мобильной и десктопной версией. Чуть позже добавлю еще парочку сниппетов по теме.
P.S. Постовой. Интересный и полезный вебмастерам Блог по SEO , где вы найдете ответы на интересующие вас вопросы по seo.
Компания Aweb уже давно и очень хорошо зарекомендовала себя в области услуг раскрутка сайта , оптимизация и поисковое продвижение в интернете.
Регистрируем и выводим произвольное меню, созданное в панели: «Внешний вид > Меню» (Appearance > Menus)
.
Регистрируем меню
Add_action("after_setup_theme", function(){
register_nav_menus(array("main_menu" => __("Primary menu", "crea"),
"foot_menu" => __("Footer menu", "crea"),));
});
Второй вариант регистрации меню (не знаю, на сколько он правильный, поэтому лучше использовать первый вариант)
If (function_exists("register_nav_menu")) {
register_nav_menus(array("main_menu" => __("Primary menu", "crea"),
"foot_menu" => __("Footer menu", "crea"),));
}
Выводим меню
Второй вариант вывода меню
"menu-header", "theme_location" => "primary")); ?>
Более подробно про регистрацию и вывод меню в шаблоне
Использование
wp_nav_menu(array("theme_location" => "" // (string) Расположение меню в шаблоне. (указывается ключ которым было зарегистрировано меню в функции
"menu" => "", // (string) Название выводимого меню (указывается в админке при создании меню, приоритетнее чем указанное местоположение theme_location - если указано, то параметр theme_location игнорируется)
"container" => "div", // (string) Контейнер меню. Обворачиватель ul. Указывается тег контейнера (по умолчанию в тег div)
"container_class" => "", // (string) class контейнера (div тега)
"container_id" => "", // (string) id контейнера (div тега)
"menu_class" => "menu", // (string) class самого меню (ul тега)
"menu_id" => "", // (string) id самого меню (ul тега)
"echo" => true, // (boolean) Выводить на экран или возвращать для обработки
"fallback_cb" => "wp_page_menu", // (string) Используемая (резервная) функция, если меню не существует (не удалось получить)
"before" => "", // (string) Текст перед каждой ссылки
"after" => "", // (string) Текст после каждой ссылки
"link_before" => "", // (string) Текст перед анкором (текстом) ссылки
"link_after" => "", // (string) Текст после анкора (текста) ссылки
"items_wrap" => "",
"depth" => 0, // (integer) Глубина вложенности (0 - неограничена, 2 - двухуровневое меню)
"walker" => "" // (object) Класс собирающий меню. Default: new Walker_Nav_Menu));
Аргументы параметра $args
theme_location(строка)
Идентификатор расположение меню в шаблоне. Идентификатор, указывается при регистрации меню функцией register_nav_menu().
По умолчанию: ""
menu(строка)
Меню которое нужно вывести. Соответствие: id, слаг или название меню.
По умолчанию: ""
container(строка)
Чем оборачивать ul тег. Допустимо: div или nav.
Если не нужно оборачивать ничем, то пишем false: container => false.
По умолчанию: div
container_class(строка)
Значение атрибута class у контейнера меню.
По умолчанию: menu-{menu slug}-container
container_id(строка)
Значение атрибута id у контейнера меню.
По умолчанию: ""
menu_class(строка)
Значение атрибута class у тега ul.
По умолчанию: menu
menu_id(строка)
Значение атрибута id у тега ul.
По умолчанию: слаг меню
echo(логическое)
Выводить на экран (true) или возвратить для обработки (false).
По умолчанию: true
fallback_cb(строка)
Функция для обработки вывода, если никакое меню не найдено.
Передает все аргументы $args указанной тут функции.
Установите пустую строку » или ‘__return_empty_string’, чтобы ничего не выводилось, если меню нет.
По умолчанию: wp_page_menu
before(строка)
Текст перед тегом в меню.
По умолчанию: ""
after(строка)
Текст после каждого тега в меню.
По умолчанию: ""
link_before(строка)
Текст перед анкором каждой ссылки в меню.
По умолчанию: ""
link_after(строка)
Текст после анкора каждой ссылки в меню.
По умолчанию: ""
items_wrap(строка)
Нужно ли оборачивать элементы в тег ul. Если нужно, указывается шаблон обертки.
По умолчанию: ""
depth(число)
Сколько уровень вложенных друг в друга ссылок показывать. 0 — все уровни.
walker(объект)
Класса, который будет использоваться для построения меню. Нужно указывать объект, а не строку, например new My_Menu_Walker(). По умолчанию: Walker_Nav_Menu(). Как использовать смотрите ниже…
По умолчанию: Walker_Nav_Menu
item_spacing(строка)
Оставлять или нет переносы строк в HTML коде меню. Может быть: preserve или discard
По умолчанию: "preserve"
Пример
Выводить меню, только если оно существует
По умолчанию, если меню нет, то вместо него будут выведены страницы сайта. Но если нужно выводить меню, только в том случае когда оно создано в админ-панели, укажите параметр fallback_cb как "__return_empty_string" :
Wp_nav_menu(array("theme_location" => "primary-menu",
"fallback_cb" => "__return_empty_string"));
Здравствуйте, сегодня опять поговорим о создании меню (вертикальное и горизонтальное) в wordpress через панель управления, а также о том, как вывести его в любом месте вашего сайта с помощью функции wp_nav_menu, все будет намного проще, чем мои ранее написанные руководства по созданию меню.
Скачать исходники для статьи можно ниже
Нижеуказанное руководство основано на моей предыдущей статье –
Однако, здесь мы будем делать все проще (не будем трогать файл functions.php или использовать скрипты, чтобы сделать меню выпадающим), а именно научимся делать вертикальное меню или горизонтальное не выпадающее меню.
Приступим же!
1. Заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Меню”.
Здесь создаем нужное нам меню.
Например, создадим меню из рубрик, но не из всех, а только тех, которые нам нужны и назовем данное меню – “rubrici”, вот так это будет выглядеть:
2. Для вывода меню в wordpress будем пользоваться следующей функцией:
Все просто, в вышеуказанном коде, вместо “имя меню” подставляете название созданного вами меню и вставляете код в любом месте вашего сайта.
Для меню, созданного в нашем примере данная функция будет выглядеть следующим образом:
3. Вставляем меню в нужном месте нашего сайта.
Давайте, например, вставим наше меню “rubrici” в шапку, в самом вверху.
Для примера возьмем стандартную тему wordpress – Twenty Twelve.
Для этого в панели управления wordpress заходим в пункт – “Веншний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем – header.php.
В его коде находим открывающий тег body, а сразу после него идет тег, открывающий блок “page” – вот после него и вставим вывод нашего меню “rubrici” с помощью функции – wp_nav_menu:
...
>