Здесь будут рассмотрены функции для создания главного меню сайта:
Основные достоинства нового меню:
- В качестве элементов меню могут быть не только страницы, но также записи, рубрики, метки и произвольные ссылки.
- Автоматическая поддержка многоуровневого меню (не требуется дополнительные скрипты для отображения выпадающих элементов нижних уровней).
- Удобный интерфейс управления:
Перейдем к рассмотрению основного функционала.
Для начала необходимо определиться — сколько отдельных независимых меню вам понадобиться. Например «главное меню» и «вспомогательное меню». Для них надо зарегистрировать соответствующие «области». Для этого воспользуемся функциями: register_nav_menu() или register_nav_menus(). Первая функция служит для создания единичной области, тогда как вторая создает сразу несколько (в качестве аргумента принимает массив).
Использование:
// Разместить в файле functions.php function register_my_menus() { // Функция нужна для последующей привязки к хукам register_nav_menus( array( 'main_menu' => 'Главное меню', 'secondary_menu' => 'Вспомогательное меню' ) ); // То же самое с помощью register_nav_menu() // register_nav_menu('main_menu', 'Главное меню'); // register_nav_menu('secondary_menu', 'Вспомогательное меню'); } add_action( 'init', 'register_my_menus' ); // Привязка
В разделе «Внешний вид» -> «Меню» становятся доступными две области:
Создаем меню и привязываем его к нужной области:
С помощью функции wp_nav_menu() вставляем меню в шаблон.
Описание:
<?php $args = array( 'theme_location' => , // Привязка к "области темы". Области задаются с помощью функции register_nav_menus() в functions.php. 'menu' => , // Если не задан параметр theme_location, то здесь можно указать: идентификатор (ID), ярлык (slug) или имя того меню, которое необходимо отобразить. 'container' => 'div', // Html-контейнер внутри которого помещается основная разметка меню (<ul>). 'container_class' => , // Класс контейнера. По умолчанию: menu-{ярлык_меню}-container. 'container_id' => , // Идентификатор контейнера. Значение по умолчанию отсутствует. 'menu_class' => 'menu', // Класс элемента <ul>, содержащего основную разметку меню. По умолчанию: menu. 'menu_id' => , // Идентификатор элемента <ul>. По умолчанию: menu-{ярлык_меню}. 'echo' => 1, // Варианты: 1 | 0. По умолчанию: 1. Определяет тип вывода: сразу вывести результат на экран (1) или вернуть для последующей обработки в php (0). 'fallback_cb' => 'wp_page_menu', // Если не указан параметр theme_location, и не найдено ни одного не пустого меню, тогда вызывается указанная функция. По умолчанию: wp_page_menu (описание см. ниже). 'before' => , // Текст для вставки перед ссылкой на элемент меню (перед <a>). 'after' => , // Текст после вставки после ссылки на элемент меню (после </a>). 'link_before' => , // Текст для вставки перед текстом ссылки (после <a>). 'link_after' => , // Текст для вставки после текста ссылки (перед </a>). 'depth' => 0, // Максимально число уровней меню. 0 - без ограничений (по умолчанию). 'walker' => // Позволяет переопределить под себя форму вывода меню, включая html-разметку. В качестве параметра необходимо передать ОБЪЕКТ. Исходный класс объекта создается наследованием от класса Walker или Walker_Nav_Menu. По умолчанию: new Walker_Nav_Menu. ); wp_nav_menu($args); ?>
Чтобы обеспечить вывод двух ранее созданных областей на экран, в шаблон (обычно в header.php) помещаем вызов двух функций wp_nav_menu(). В параметрах указываем соответствующие области темы (theme_location), остальные параметры оставляем без изменений:
<!-- header.php --> <div class="header"> <?php wp_nav_menu( array( 'theme_location' => 'main_menu' ) ); // главное меню. ?> </div><!--header--> <div class="sub-header"> <?php wp_nav_menu( array( 'theme_location' => 'secondary_menu' ) ); // вспомогательное меню ?> </div><!--sub-header-->
Главное меню на основе страниц
wp_page_menu() — функция для построения меню на основе страниц. Доступна с версии 2.7. С появлением WordPress 3.0 устарела, но все еще может быть полезна для создания жесткого меню, привязанного к иерархии страниц.
Использование:
<?php $args = array( 'menu_class' => 'menu', // Класс контейнера (div) в котором находятся элементы меню (ul). 'sort_column' => 'menu_order, post_title', // Сортировка страниц. Значение по умолчанию: 'menu_order, post_title' - сортировка по порядковому номеру и по заголовку в алфавитном порядке. Можно указать любой столбец из таблицы wp_posts. Например: 'post_date' (по дате создания), 'post_modified' (по дате изменения), 'ID' (по идентификатору), 'post_author' (по автору) 'sort_order' => 'ASC', // Определяет порядок сортировки. По возрастанию - ASC (по умолчанию) или по убыванию - DESC. 'depth' => 0, // 0 - вывод всех страниц с сохранением иерархии (по умолчанию). -1 - вывод всех страниц без иерархии. 1 - вывод страниц только первого уровня (без подстраниц). 2,3,4 и т.д - определяет максимальную глубину иерархии (если depth=3, то выводятся только страницы 1-го, 2-го и 3-го уровней). 'include' => , // Идентификаторы страниц, которые необходимо включить в меню. Указываются через запятую: '2,14,456'. По умолчанию включены все страницы. 'child_of' => 0, // Идентификатор страницы (единственный). Вывод всех подстраниц указанной страницы. Выводится все дерево подстраниц. Указанная страница не выводится. 'meta_key' => , // Имя произвольного поля. Используется вместе с meta_value. Вывод только тех страниц, для которых задано соответствующее произвольное поле. 'meta_value' => , // Значение произвольного поля. Используется вместе с meta_key. Вывод только тех страниц, для которых задано соответствующее произвольное поле. 'authors' => , // Идентификаторы авторов. Указываются через запятую: '1,3,4'. Выводятся только страницы указанных авторов. 'exclude' => , // Идентификаторы страниц, которые необходимо исключить из меню. Указываются через запятую: '2,14,456'. 'exclude_tree' => , // Идентификаторы страниц, которые необходимо исключить из меню. В отличие от предыдущего параметра исключает не только указанную страницу, но и все дерево подстраниц. 'echo' => 1, // Варианты: 1 | 0. Определяет тип вывода: сразу вывести результат на экран - 1 (по умолчанию) или вернуть для последующей обработки в php - 0. 'show_home' => 0, // Варианты: 1 | 0 | Строка. Ссылка на главную страницу. 0 - не отображать (по умолчанию). 1 - отображает ссылку с текстом "Главная". Если введена текстовая строка, то она переопределяет текст ссылки. 'link_before' => , // Текст для вставки перед текстом ссылки (после <a>) 'link_after' => // Текст для вставки после текста ссылки (перед </a>). ); wp_page_menu( $args ); ?>
66 ответов к “Навигация в WordPress ч.I. Главное меню.”
Добрый день.
http://sk-beauty.ru/
Между двумя картинка белое поле — не понимаю, как его убрать.
Помогите, пожалуйста
Плиз, не оставьте вопрос без внимания
Ладно, помогу еще разок )
По первой картинке.
style.css строка 77, делаем шапку по высоте равной изображению и убираем нижний отступ:
style.css строка 131, убираем верхний отступ:
По второй картинке.
style.css строка 215, убираем верхний отступ:
style.css строка 220, убираем верхний отступ:
СПАСИБО! СПАСИБО! СПАСИБО!
Вы самый отзывчивый программист из всех кого я знаю!
Добрый день.
Вновь обращаюсь к вам за помощью.
Сайт salon-host.ru
У меня два вопроса:
1. При открытии сайта в explorer если кликнуть по полю фона левее от картинки (женщина в цветах) — картинка отодвигается левее на 1 см.
Самое интересное в других браузерах эту ошибка не выдается, по крайне мере визуально.
2. В конце всех страницах сайта показывается дата и время, также кем была создана страница admin (так понимаю, дата и время, когда была создана страница). Как можно это все удалить? Плагин MaxSite Russian Date деактивировала, так как думала, что это он показывал эти данные, -не помогло. :(
Буду рада услышать ваш ответ на заданные вопросы.
Заранее благодарю
1. Проверил в Explorer 11 и в Chrome. Все стабильно, фон никуда не смещается. Другое дело, что фон у вас позиционируется не лучшим образом:
Я бы советовал сделать как минимум top center, чтобы картинка была строго по центру. Ну и залить остальной фон розовым цветом, чтобы швов не было видно хотя бы на нижней границе фонового изображения.
2. Это надо редактировать файлы шаблона. Или скрыть с помощью CSS:
Проверьте, пожалуйста, в Explorer 11, картинка (девушка) двигается на см? У меня она сходит с места, если кликнуть на фон левее от картинки (не выше, не ниже, а именно параллельно от картинки)
Проверил… Ничего не двигается, где бы ни кликал )
Не могли бы вы написать свой e-mail, я бы выслала картинку. Мой e-mail: ksiu82@mail.ru
А у вас не включен режим совместимости с IE 10?
Если его включить, то картинка действительно смещается…
В родном IE 11 — все ок!
Sorry, за глупость, а где мне включить режим совместимости explorer 11?
И получается, что потенциальные клиенты, если откроют в IE 9, 10 — картинка будет двигаться?
Откройте инструменты разработчика (F12), последний пункт — Эмуляция. Далее см. Режим документов.
В общем, да! Но я бы не сильно за это переживал. Можно исправить, если добавить следующие стили:
Спасибо. Помогло.
Хорошего вечера
Спасибо за помощь и оперативность!
Помогло.
Добрый день.
Возникла проблема, с которой не могу справиться.
Имеется меню, и при обычном наведении на подменю — оно (подменю) исчезает. Если совсем быстро передвинуть курсор, то можно успеть. Как это исправить?
Сайт http://salon-host.ru/
Заранее благодарю
День добрый.
Такой эффект возникает, когда имеется зазор между родительским пунктом меню и выпадающим блоком.
Зазор надо убрать. style.css строка 138: