Рубрики
WordPress Шаблоны

Навигация в WordPress ч.I. Главное меню.

Здесь будут рассмотрены функции для создания главного меню сайта:

Главное меню WordPress 3.0

Основные достоинства нового меню:

  1. В качестве элементов меню могут быть не только страницы, но также записи, рубрики, метки и произвольные ссылки.
  2. Автоматическая поддержка многоуровневого меню (не требуется дополнительные скрипты для отображения выпадающих элементов нижних уровней).
  3. Удобный интерфейс управления:
Внешний вид -> Меню
Внешний вид -> Меню
Дополнительные опции
Дополнительные опции

Перейдем к рассмотрению основного функционала.

Для начала необходимо определиться – сколько отдельных независимых меню вам понадобиться. Например “главное меню” и “вспомогательное меню”. Для них надо зарегистрировать соответствующие “области”. Для этого воспользуемся функциями: 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' ); // Привязка

В разделе “Внешний вид” -> “Меню” становятся доступными две области:

Области темы WordPress 3
Области темы WordPress 3

Создаем меню и привязываем его  к нужной области:

Привязка меню к области
Привязка меню к области

С помощью функции 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. Главное меню.”

Ладно, помогу еще разок )

По первой картинке.

style.css строка 77, делаем шапку по высоте равной изображению и убираем нижний отступ:

#branding {
  background: #ffffff url(images/sky.png) top left repeat-x;
  height: 165px;
  overflow: hidden;
}

style.css строка 131, убираем верхний отступ:

nav {
  display: block;
  margin: 0px -10px 0 -10px;
  font-size: 14px;
  position: relative;
  padding: 0 30px;
}

По второй картинке.

style.css строка 215, убираем верхний отступ:

.right-sidebar #content {
  width: 650px;
  float: left;
  margin: 0px 0 0 -10px;
}

style.css строка 220, убираем верхний отступ:

.right-sidebar #secondary {
  width: 310px;
  float: right;
  margin: 0px -10px 0 0;
}

СПАСИБО! СПАСИБО! СПАСИБО!

Вы самый отзывчивый программист из всех кого я знаю!

Добрый день.
Вновь обращаюсь к вам за помощью.
Сайт salon-host.ru
У меня два вопроса:
1. При открытии сайта в explorer если кликнуть по полю фона левее от картинки (женщина в цветах) – картинка отодвигается левее на 1 см.
Самое интересное в других браузерах эту ошибка не выдается, по крайне мере визуально.
2. В конце всех страницах сайта показывается дата и время, также кем была создана страница admin (так понимаю, дата и время, когда была создана страница). Как можно это все удалить? Плагин MaxSite Russian Date деактивировала, так как думала, что это он показывал эти данные, -не помогло. :(

Буду рада услышать ваш ответ на заданные вопросы.
Заранее благодарю

1. Проверил в Explorer 11 и в Chrome. Все стабильно, фон никуда не смещается. Другое дело, что фон у вас позиционируется не лучшим образом:

background-position: top left;

Я бы советовал сделать как минимум top center, чтобы картинка была строго по центру. Ну и залить остальной фон розовым цветом, чтобы швов не было видно хотя бы на нижней границе фонового изображения.

2. Это надо редактировать файлы шаблона. Или скрыть с помощью CSS:

.entry-meta {display: none;}

Проверьте, пожалуйста, в Explorer 11, картинка (девушка) двигается на см? У меня она сходит с места, если кликнуть на фон левее от картинки (не выше, не ниже, а именно параллельно от картинки)

А у вас не включен режим совместимости с IE 10?
Если его включить, то картинка действительно смещается…
В родном IE 11 – все ок!

Sorry, за глупость, а где мне включить режим совместимости explorer 11?
И получается, что потенциальные клиенты, если откроют в IE 9, 10 – картинка будет двигаться?

Откройте инструменты разработчика (F12), последний пункт – Эмуляция. Далее см. Режим документов.

что потенциальные клиенты, если откроют в IE 9, 10 — картинка будет двигаться?

В общем, да! Но я бы не сильно за это переживал. Можно исправить, если добавить следующие стили:

#header-image a {
    display: block;
    position: relative;
    height: 270px;
    width: 960px;
    overflow: hidden;
}
#header-image a img {
    position: absolute;
    left: 0; top: 0;
    margin: 0px;
    padding: 0px;
}

Добрый день.
Возникла проблема, с которой не могу справиться.
Имеется меню, и при обычном наведении на подменю – оно (подменю) исчезает. Если совсем быстро передвинуть курсор, то можно успеть. Как это исправить?
Сайт http://salon-host.ru/

Заранее благодарю

День добрый.
Такой эффект возникает, когда имеется зазор между родительским пунктом меню и выпадающим блоком.
Зазор надо убрать. style.css строка 138:

nav ul li {
float: left;
position: relative;
height: 21px;
margin: 0 20px 0px 0;
}

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

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