Как добавить активный класс для текущего пункта меню на странице?

Question

Как добавить активный класс для текущего пункта меню на странице?

6 февр. 2014 г., 16:15:02

Просмотры: 32.6K

Голосов: 4

У меня есть две ссылки: Продукты и Новости.

Когда я нажимаю на Продукты или Новости, открывается архивная страница, содержащая некоторые записи, а когда я нажимаю на запись, открывается отдельная страница этой записи.

В меню я использую этот код для <li>, чтобы добавить класс active, если страница является главной:

<li<?php if(is_home()) {?> class="active"<?php } ?>>

Но я не знаю, как это сделать, когда у меня есть две архивные страницы и две отдельные страницы.

Если я использую if( is_archive() || is_single() ), это добавит класс к обоим пунктам меню.

Буду благодарен за помощь.

Ramon Vasconcelos

171

меню

Комментарии

Как создается ваше меню?

s_ha_dum

6 февр. 2014 г. 16:40:34

@s_ha_dum Я не использовал wp_nav_menu, я создал его самостоятельно в коде

Ramon Vasconcelos

6 февр. 2014 г. 16:59:17

is_archive и is_single должны быть взаимоисключающими. Я бы предложил вам опубликовать больше кода. Почему вы не используете wp_nav_menu?

s_ha_dum

6 февр. 2014 г. 17:01:09

@s_ha_dum Я попробовал использовать wp_nav_menu, он добавляет класс current, но не добавляет этот класс ни для Products, ни для News.

Ramon Vasconcelos

6 февр. 2014 г. 17:08:43

Используйте wp_nav_menu и посмотрите ответ от @BradDalton.

s_ha_dum

6 февр. 2014 г. 17:19:37

Показать остальные 1 комментариев

Все ответы на вопрос

Комментарии

Куда мне нужно вставить этот код? В function.php? И где появится этот класс "products-class"?

Ramon Vasconcelos

6 февр. 2014 г. 16:58:25

Поместите код в конец вашего файла functions.php. Используйте класс в файле style.css вашей дочерней темы.

Brad Dalton

6 февр. 2014 г. 16:59:39

Я имею в виду, куда эта функция добавляет класс в коде? В body?

Ramon Vasconcelos

6 февр. 2014 г. 17:09:52

Добавляет его к пункту навигационного меню, который вы включаете в PHP-код. Условно добавляет его только к пункту меню продуктов, когда вы находитесь на странице архива. Просто измените условные теги в соответствии с вашими потребностями.http://codex.wordpress.org/Условные_Теги

Brad Dalton

6 февр. 2014 г. 17:13:23

Предполагаю, что ваши записи Products и News являются пользовательскими типами записей.
Для обоих условных тегов существуют эквиваленты, специфичные для $post_type:

if (is_post_type_archive('products')) {
   // ...
} elseif (is_post_type_archive(array('news', 'something'))) {
   // ...
} elseif (is_singular('products')) {
   // ...
} elseif (is_singular(array('news', 'something'))) {
   // ...
}

Таким образом, для Products это будет:

if (is_post_type_archive('products') || is_singular('products'))

Для News соответственно.

Ссылки:

tfrommen

9.23K

6 февр. 2014 г. 17:14:16

Brad Dalton 6.97K · Accepted Answer · 2014-02-06T16:36:51Z

Вы можете добавить условные классы для каждого элемента в файле функций вашей дочерней темы:

Вот один из примеров, который вы можете модифицировать под свои нужды.

add_filter('nav_menu_css_class' , 'wpsites_nav_class' , 10 , 2);

function wpsites_nav_class($classes, $item){

if( is_archive() && $item->title == "Products"){     

         $classes[] = "products-class";
 }
 return $classes;

Источник http://codex.wordpress.org/Function_Reference/wp_nav_menu#Adding_Conditional_Classes_to_Menu_Items

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

.products-class {

Ваши CSS-правила
}

Этот CSS-код является условным, основанным на приведенном выше PHP-коде.