Intereting Posts
WordPress, используя get_term, чтобы восстановить слизню, которая не работает должным образом Неустранимая ошибка wp-settings.php в строке 119 Как должен работать WP_Customize_Background_Image_Control? Сортировка определенной таксономии по дате архива с использованием URL-адреса Можно ли обернуть поиск геоданных вокруг WP_Query? Где псевдоним используется в WordPress Фильтрация сообщений по нескольким таксономическим терминам, например, в списке сообщений администратора? Пользователь ограничивается только сообщениями, назначенными текущему пользователю Переместить кучу WooCommerce за пределы содержимого оболочки Настроить сообщение активации учетной записи пользователя Почему комментарии и трекбэки все еще проходят для пользовательских типов сообщений? как установить значение по умолчанию для поля настраиваемого профиля? Как изменить запрос в taxonomy-custom.php для сортировки архивов терминов с помощью настраиваемого мета-поля? Разное количество сообщений в строке в макете Отображение данных из другой базы данных

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

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

Solutions Collecting From Web of "Создание нескольких меню при использовании темы TwentyTen?"

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

  1. Создайте дочернюю тему, основанную на теме «Двадцать десять».

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

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

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

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

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

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

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

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

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

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

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

Для примеров в оставшейся части этого ответа я буду называть детскую тему «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. Создать новое меню

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

Создание меню Nav в WordPress 3.x

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

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

Добавлены опции в меню Nav в WordPress 3.x

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

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

Связывание меню Nav с расположением меню темы в WordPress 3.0

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 и внутреннего footernav menu-footer контейнера, и я последовал примеру TwentyTen и задал role="navigation" . Однако наиболее важным аспектом кода является 'theme_location' => 'footer' который соответствует нашему названному расположению тем в шаге №2.

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

Меню Footer Nav в WordPress 3.x перед стилем

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

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

Меню Footer Nav в WordPress 3.x со стилем

Стиль очень прост, поэтому, пожалуйста, не держите мои ужасные дизайнерские навыки против меня, так как я не дизайнер, и я никогда не угрожал быть одним! Я включил комментарии в 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() ссылаясь на ваши меню и пункты меню, и вы wp_nav_menu() к работе!