Необходимо добавить «активный» класс в пользовательское меню навигации WordPress. - PullRequest
0 голосов
/ 28 июня 2019

Я создаю свое собственное Мега Меню, используя встроенное меню навигации в WordPress. Он прекрасно работает для отображения различного кода для стандартного пункта меню и пункта меню, который имеет мега-меню. но я хочу иметь возможность ссылаться на активный элемент меню и добавлять активный класс в этот элемент списка.

Я просто не уверен, со следующим кодом, что мне нужно поместить куда?

// if there are items in the primary menu
if ( $items = wp_get_nav_menu_items( $menu->name ) ) {
// loop through all menu items to display their content
foreach ( $items as $item ) {
// if the current item is not a top level item, skip it
if ($item->menu_item_parent != 0) {
    continue;
}

// get the ID of the current nav item
$curNavItemID = $item->ID;
// get the custom classes for the item
// (determined within the WordPress Appearance > Menu section)
$classList = implode(" ", $item->classes);
    echo "<li class=\"nav-item {$classList}\">";                     
if ( in_array('has-mega-menu', $item->classes)) {
    echo "<a class=\"nav-link dropdown-toggle\" href=\"{$item->url}\" id=\"navbarDropdown\" role=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">{$item->title}</a>\n";
}
else  {
    echo "<a class=\"nav-link\" href=\"{$item->url}\">{$item->title}</a>";
}

[Изменено]

Я знаю, что нужно добавить что-то после этой строки

$classList = implode(" ", $item->classes);
echo "<li class=\"nav-item {$classList}\">";                     

Что-то для ссылки на текущую страницу

if ( [ ???? current page or current menu ???? ] 
echo "<li class=\"nav-item active {$classList}\">";

Как мне ссылаться на текущую страницу?

Или как мне добавить стандартные классы WordPress ко всем пунктам меню, чтобы я мог ссылаться на это в файлах CSS.


Решение

Я нашел решение.

Я добавил это

// get the current page URL
$actual_link = ( isset( $_SERVER['HTTPS'] ) ? "https" : "http" ) . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

до

// get the ID of the current nav item
$curNavItemID = $item->ID;

, а затем ссылался на него позже, изменив эту строку

echo "<li class=\"nav-item {$classList}\">";

к этому

echo "<li class=\"nav-item ";
if ( $actual_link == $item->url ) {
echo 'active';
}
echo " {$classList}\">";

Класс 'active' теперь добавляется к любому из пунктов меню, URL-адрес которого совпадает с URL-адресом окна браузера. то есть: «текущая страница».

Я уверен, что есть более элегантный способ сделать это - но, похоже, это делает то, что мне нужно.

1 Ответ

0 голосов
/ 28 июня 2019

добавьте это в ваш css файл

ul.nav-menu li.current-menu-item > a {
    color: #f7931d !important;
}
li.current-menu-parent >a, .current-menu-item >a {
    color: #f7931d !important;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...