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

Question

Как получить несколько меню в теме TwentyTen?

Answer 1

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

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

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

3. Создайте новое меню используя консоль администратора вашего веб-сайта.

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

5. Звонить wp_nav_menu() в файле шаблона вашей темы, в которой вы хотите, чтобы появилось меню.

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

Так что давайте продолжим в том же духе!

1.Создайте дочернюю тему

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

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

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

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

Для примеров в остальной части этого ответа я собираюсь вызвать дочернюю тему "Химаншу".

2.Зарегистрируйте Местоположение Темы

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

Я создам "Нижний колонтитул" меню для этого примера.

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

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

register_nav_menus(array(
  //'primary' => __('Primary Menu Area','himanshu'), ==> Primary defined by default
  '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 и скопировал ее в "Химаншу" тематический каталог.Вот как выглядят первые 18 строк:

<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the id=main div and all content
 * after.  Calls sidebar-footer.php for bottom widgets.
 *
 * @package WordPress
 * @subpackage Himanshu (based on 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 и я последовал примеру ТвентиЕна и принялся за дело. role="navigation".Однако, наиболее важным аспектом кода является 'theme_location' => 'footer' который соответствует нашему названному местоположению темы на шаге № 2.

Все эти шаги дают нам меню нижнего колонтитула, которое выглядит следующим образом:

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

6.Оформите свое меню

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

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

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

#colophon {
  padding-top:6px;        /* Move menu closer to thick black line (TwentyTen has 18px) */
}
#footernav {              /* Use same font-family as TwentyTen does for menus */
  font-family: 'Helvetica Neue', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
  font-size:1.1em;        /* Make a little bigger than default */
  padding-bottom:6px;     /* Put some breathing room under the menu */
}
#footernav .menu-footer {
  text-align:center;      /* Needed to center the menu */
}
#footernav ul {
  margin:0 auto;          /* Also needed to center the menu */
  width:auto;             /* Make menu only as wide as needs to be */
  display:inline;         /* Also needed to keep width to a minumum */
}
#footernav li {
  display:inline;         /* Make menu horizontal instead of veritcal */
}
#footernav a {
  text-decoration:none;   /* Remove underlines from links */
  background-color:#ddd;  /* Create a light grey background for each option */
  color:black;            /* Make the items easy to see with text in black */
  padding:0.25em 0.5em;   /* Add space around the items for the background to display*/
  margin:0 0.5em;         /* Add space between the items */
}
#footernav a:hover {
  background-color:black; /* Surround the menu item under the mouse pointer in black */
  color:white;            /* Make the text for the same menu item be white */
}

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