Создание нескольких меню при использовании темы TwentyTen?

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

1. Создать дочернюю тему на основе темы Twenty Ten.

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

3. Создать новое меню с помощью админ-панели вашего сайта.

4. Связать новое меню и расположение в теме через админ-панель.

5. Вызвать wp_nav_menu() в файле шаблона вашей темы там, где должно отображаться меню.

6. Оформить меню стилями, чтобы оно гармонично вписалось в ваш сайт.

Итак, приступим!

1. Создание дочерней темы

Создание дочерней темы очень просто и даёт преимущество в виде возможности обновлять TwentyTen при выходе новой версии, не беспокоясь о потере ваших изменений.

Да, есть небольшая вероятность, что ваши изменения окажутся несовместимыми с новой версией, и если вы копируете файлы TwentyTen и изменяете их для дочерней темы, вам придётся повторно применять эти изменения. Но это всё равно лучше, чем потерять изменения при обновлении темы.

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

• Настройка темы WordPress без её изменения? (Используйте дочерние темы)

Для примеров в остальной части ответа я назову дочернюю тему "Himanshu".

2. Регистрация расположения меню

Регистрация расположения меню очень проста с использованием функции register_nav_menus() (да, было бы здорово, если бы эта функция называлась register_nav_menu_locations(), но я отвлёкся...)

Для этого примера я создам меню "Footer" (подвал).

В моём примере обратите внимание, как я упоминаю 'primary' в комментарии; это сделано, чтобы показать, как называется расположение меню по умолчанию и что вам не нужно определять его самостоятельно. Также обратите внимание, что я использовал функцию перевода __() и указал имя дочерней темы в качестве домена перевода.

Если вы используете дочернюю тему, вам нужно создать файл functions.php в вашей теме для размещения этой функции. Если же вы изменяете тему, просто найдите functions.php и добавьте код в конец:

register_nav_menus(array(
  //'primary' => __('Primary Menu Area','himanshu'), ==> Primary определён по умолчанию
  'footer'  => __('Footer Menu Area','himanshu'),
));

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

register_nav_menus(array('footer'=>'Footer Menu Area'));

3. Создание нового меню

Теперь создадим меню в подвале. Для этого перейдите к пункту Меню в разделе Внешний вид админ-панели. Нажмите "+", чтобы добавить меню, введите имя меню и затем нажмите "Создать меню":

_{(источник: mikeschinkel.com)}

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

Не забудьте добавить некоторые пункты в меню, иначе оно будет бесполезным. Выберите нужные пункты через админ-панель, добавьте их в меню и сохраните (на моём скриншоте показано добавление только "Страниц", но вы можете комбинировать любые типы пунктов меню, которые предоставляет WordPress):

_{(источник: mikeschinkel.com)}

4. Связывание нового меню и расположения в теме

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

_{(источник: mikeschinkel.com)}

5. Вызов wp_nav_menu() в файле шаблона

Теперь вернёмся к коду. Я скопировал файл footer.php из темы TwentyTen в директорию темы "Himanshu". Вот как выглядят первые 18 строк:

<?php
/**
 * Шаблон для отображения подвала.
 *
 * Содержит закрытие div с id=main и весь контент
 * после него. Вызывает sidebar-footer.php для нижних виджетов.
 *
 * @package WordPress
 * @subpackage Himanshu (на основе Twenty Ten)
 * @since Twenty Ten 1.0
 */
?>
  </div><!-- #main -->

  <div id="footer" role="contentinfo">
    <div id="colophon">

Я вставил вызов wp_nav_menu() вместе с обёрткой HTML сразу после <div id="colophon"> на строке 18, так что строки 13-24 теперь выглядят так:

</div><!-- #main -->

<div id="footer" role="contentinfo">
  <div id="colophon">
    <div id="footernav" role="navigation">
      <?php
        wp_nav_menu(array(
          'container_class' => 'menu-footer',
          'theme_location' => 'footer'
        ));
      ?>
    </div>

Обратите внимание, я выбрал имя обёртки footernav, а внутреннего контейнера — menu-footer, и последовал примеру TwentyTen, установив role="navigation". Однако самая важная часть кода — это 'theme_location' => 'footer', что соответствует названию расположения меню из шага №2.

После выполнения всех шагов у нас получится меню в подвале, которое выглядит так:

_{(источник: mikeschinkel.com)}

6. Оформление меню

Наконец, нам осталось добавить CSS в файл style.css нашей темы, и мы получим меню в подвале, которое выглядит так:

_{(источник: mikeschinkel.com)}

Оформление очень простое — пожалуйста, не судите строго мои дизайнерские навыки, так как я не дизайнер и никогда им не был! Я добавил комментарии в CSS-код, объясняющие, почему я использовал каждый селектор и свойство:

#colophon {
  padding-top:6px;        /* Сдвигаем меню ближе к толстой чёрной линии (в TwentyTen 18px) */
}
#footernav {              /* Используем тот же шрифт, что и в меню TwentyTen */
  font-family: 'Helvetica Neue', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
  font-size:1.1em;        /* Делаем немного больше, чем по умолчанию */
  padding-bottom:6px;     /* Добавляем немного места под меню */
}
#footernav .menu-footer {
  text-align:center;      /* Необходимо для центрирования меню */
}
#footernav ul {
  margin:0 auto;          /* Также необходимо для центрирования меню */
  width:auto;             /* Делаем меню только такой ширины, сколько нужно */
  display:inline;         /* Также помогает сохранить минимальную ширину */
}
#footernav li {
  display:inline;         /* Делаем меню горизонтальным вместо вертикального */
}
#footernav a {
  text-decoration:none;   /* Убираем подчёркивание у ссылок */
  background-color:#ddd;  /* Создаём светло-серый фон для каждого пункта */
  color:black;            /* Делаем текст чёрным для лучшей видимости */
  padding:0.25em 0.5em;   /* Добавляем пространство вокруг пунктов для отображения фона */
  margin:0 0.5em;         /* Добавляем пространство между пунктами */
}
#footernav a:hover {
  background-color:black; /* Подсвечиваем пункт под курсором чёрным */
  color:white;            /* Делаем текст белым для того же пункта */
}

Вот и всё! Заметьте, что это инструмент для дизайнера, поэтому вы или ваш дизайнер можете реализовать меню практически в любом стиле с точки зрения темы; просто вызовите функцию wp_nav_menu(), указав ваши меню и расположения, и всё готово!