Добавление класса к активному элементу и его родителю в меню навигации

Question

Добавление класса к активному элементу и его родителю в меню навигации

5 сент. 2013 г., 00:26:51

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

Голосов: 2

Я использую следующий код для добавления названия класса "active" к текущему пункту меню:

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

function add_active_class($classes, $item) {
  if( $item->menu_item_parent == 0 && in_array('current-menu-item', $classes) ) {
    $classes[] = "active";
  }

  return $classes;
}

Это работает отлично, но только для пунктов без выпадающего меню. Если у пункта есть дочерние элементы, то класс active не добавляется к родительскому пункту.

Есть ли способ изменить этот код так, чтобы фильтр добавлял класс "active" как к текущей ссылке, так и к её родителю?

Johann

867

меню фильтры

Комментарии

Вам не нужно этого делать... WordPress уже добавляет классы для этого, такие как current-menu-item или current-ancestor-item... и т.д...

User

5 сент. 2013 г. 00:38:51

Привет @splashingpixels, я знаю, что WordPress добавляет свои собственные классы, но мне конкретно нужно добавить класс с именем "active".

Johann

5 сент. 2013 г. 00:44:01

Можно спросить, почему именно слово active?

User

5 сент. 2013 г. 00:45:30

Спасибо за быстрый ответ. Я разрабатываю тему на основе Bootstrap и его базовых стилей. Наименование классов отличается от WordPress, и я хотел бы создать фильтр перед изменением основных стилей.

Johann

5 сент. 2013 г. 01:00:23

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

Комментарии

Привет @splashingpixels. Я попробовал ваш код, но он, кажется, не работает. Я проверил исходный код, и класс "active" не добавляется.

Johann

5 сент. 2013 г. 01:01:15

Я обновил ответ, попробуйте это..

User

5 сент. 2013 г. 01:07:49

Спасибо @splashingpixels, ты лучший! Безупречный код. Только еще один вопрос, я не знаю, возможно ли это или это ограничение Wordpress. С этим кодом теперь все родительские элементы получают класс "active", когда это необходимо. Есть ли способ, чтобы при клике на элемент выпадающего списка тоже добавлялся класс "active"? То есть чтобы класс "active" добавлялся и к родителю, и к дочернему элементу?

Johann

5 сент. 2013 г. 01:13:05

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

User

5 сент. 2013 г. 01:24:58

Ты лучший, эта проблема решена!

Johann

5 сент. 2013 г. 01:28:56

User 100 · Accepted Answer · 2013-09-05T00:51:08Z

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

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

function add_active_class($classes, $item) {
  $class_names = array( 'current-menu-item', 'current-menu-ancestor', 'current-menu-parent', 'current_page_parent',  'current_page_ancestor' );

  if( $item->menu_item_parent == 0 && in_array( $class_names, $classes) ) {
    $classes[] = "active";
  }

  return $classes;
}

ОБНОВЛЕНИЕ: если вышеуказанный код не работает из-за использования массива в качестве иглы для функции in_array в вашей версии PHP, попробуйте этот вариант:

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

function add_active_class($classes, $item) {

  if( $item->menu_item_parent == 0 && 
    in_array( 'current-menu-item', $classes ) ||
    in_array( 'current-menu-ancestor', $classes ) ||
    in_array( 'current-menu-parent', $classes ) ||
    in_array( 'current_page_parent', $classes ) ||
    in_array( 'current_page_ancestor', $classes )
    ) {

    $classes[] = "active";
  }

  return $classes;
}

Если вы хотите, чтобы любой текущий элемент получал класс active, используйте этот код:

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

function add_active_class($classes, $item) {

  if( in_array( 'current-menu-item', $classes ) ||
    in_array( 'current-menu-ancestor', $classes ) ||
    in_array( 'current-menu-parent', $classes ) ||
    in_array( 'current_page_parent', $classes ) ||
    in_array( 'current_page_ancestor', $classes )
    ) {

    $classes[] = "active";
  }

  return $classes;
}