himanshuvyas
  • 0
Новичок

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

  • 0

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

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

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

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

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

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

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

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

    Итак, давайте продолжим!

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

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

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

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

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

    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. Создайте новое меню

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

    Создание навигационного меню в WordPress 3.x
    (источник: mikeschinkel.com )

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

    Обязательно добавьте какие-нибудь опции в свое меню, иначе от него будет мало толку. Выберите нужные параметры с помощью консоли администратора, добавьте их в свое меню, а затем сохраните (на моем снимке экрана я показываю только выбор «Страницы» для параметров меню, но вы можете смешивать и сопоставлять любые типы параметров меню, которые предоставляет WordPress) :

    Добавлены параметры в меню навигации в WordPress 3.x.
    (источник: mikeschinkel.com )

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

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

    Связывание меню навигации с расположением меню темы в WordPress 3.0
    (источник: mikeschinkel.com )

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

    Теперь нам нужно вернуться к коду. Я сделал копию footer.php из темы TwentyTen и скопировал ее в каталог тем «Himanshu». Вот как выглядят первые 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, последовал примеру TwentyTen и установил role="navigation" . Тем не менее, наиболее важным аспектом кода является то,'theme_location' => 'footer' что он соответствует нашему именованному местоположению темы на шаге № 2.

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

    Навигационное меню нижнего колонтитула в WordPress 3.x до стилизации
    (источник: mikeschinkel.com )

    6. Стиль вашего меню

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

    Навигационное меню нижнего колонтитула в WordPress 3.x со стилем
    (источник: 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() функцию, ссылаясь на ваши меню и расположение меню, и все готово!

    • 0
    • Привет MikeSchinkel, я очень благодарен вам за ваш ответ. Большое спасибо. Но Майк, у меня снова вопрос. Теперь я просто хочу добавить страницы для вторичных меню, как меню по умолчанию. Пример: когда мы создаем страницу, она автоматически размещается в первичных ссылках. Как это возможно для вторичных ссылок?

      • 0
    • @Himanshu Vyas : Нет, вторичные меню не получают ссылки автоматически. Как узнать, какие ссылки ведут в какие меню? Но если вы хотите, чтобы все ссылки были в обоих меню, вам не нужно делать ничего из вышеперечисленного, кроме как скопировать wp_nav_menu вызов header.php и поместить его в свой footer.php или куда угодно еще. Совершенно нормально повторно использовать меню более чем в одном месте темы.

      • 0
    • Спасибо, Майк, теперь у меня есть четкое представление об этом. действительно очень большое спасибо. Я был очень смущен этим. Хорошего дня

      • 0
    • @Himanshu Vyas — Добро пожаловать, рад, что смог помочь. Заранее спасибо за выбор этого ответа в качестве ответа на ваш вопрос; просто нажмите на галочку ниже, чтобы перейти к элементам управления рейтингом вверх/вниз.

      • 0
    • Здравствуйте, Майк, у меня есть еще один вопрос. Я разрабатываю сайт WordPress, и сейчас у меня есть собственная домашняя страница, а другие страницы WordPress по умолчанию. Теперь я хочу добавить еще одну пользовательскую страницу для какой-то целевой страницы. Макет и дизайн этой страницы отличаются. Как я могу добавить это на свой сайт WordPress?

      • 0

Оставить ответ

You must login to add an answer.