2015-08-18 3 views
0

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

<ul class="menu"> 
    <li><a href="#"></a></li> 
    <li><a href="#"></a></li> 
    <li><a href="#"></a></li> 
    <li><a href="#"></a></li> 
</ul> 

Я просто нужно добавить класс, когда пользователь будет на той же странице (тот же самый процесс, чем StackOverflow и «youarehere» класс по меню) , Но я не могу это сделать. спасибо

+2

Если вы Повторное использование стандартного меню WP должно иметь активные состояния. – Aibrean

+0

Я не уверен, что понимаю, о чем вы говорите, можете ли вы быть более конкретным? – GreatHawkeye

ответ

0

Если вы создаете новое меню в бэкэнде Wordpress и применяете его к шаблону через wp nav menu (https://codex.wordpress.org/Function_Reference/wp_nav_menu), тогда класс 'active' применяется автоматически, когда вы находитесь на этой странице/сообщении.

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

Вот список классов CSS, которые вы можете использовать;

https://codex.wordpress.org/Function_Reference/wp_nav_menu#Menu_Item_CSS_Classes

1

Вы должны использовать WP навигации меню для этого, который будет создавать активное состояние. Добавить на функции файла:

function register_my_menu() { 
    register_nav_menu('header-menu',__('Header Menu')); 
} 
add_action('init', 'register_my_menu'); 

Тогда вы называете его в вашей теме:

<?php wp_nav_menu(array('theme_location' => 'header-menu')); ?> 

WordPress также будет генерировать состояния для родителей/предков, как так:

.current-menu-parent 
.current-{object}-parent 
.current-{type}-parent 

.current-menu-ancestor 
.current-{object}-ancestor 
.current-{type}-ancestor 
+0

Спасибо, я дал .current-menu-item стиль, который я хотел, и он сработал. – GreatHawkeye

Смежные вопросы