Почему пользовательские меню NAV генерируют так много классов по элементам списка? Могу ли я как -то справиться с этим?

wordpress.stackexchange https://wordpress.stackexchange.com/questions/23

  •  16-10-2019
  •  | 
  •  

Вопрос

Ниже приведен пример. 3 класса, прикрепленные к каждому элементу, за исключением текущего элемента, который имеет 6. Могу ли я как -то это сделать?

<ul id="menu-global-nav" class="sf-menu">
<li id="menu-item-63" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-5 current_page_item menu-item-63"><a href="#">Home</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-30"><a href="#">Services</a>
   <ul class="sub-menu">
   <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-39"><a href="#">Case Studies</a></li>
   <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-38"><a href="#">Story Discovery</a></li>
   </ul>
</li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-32"><a href="#">Company</a></li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-29"><a href="#">Why Case Studies?</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-28"><a href="#">Case Study Showcase</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-27"><a href="#">Resources</a></li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-26"><a href="#">Online Store</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-25"><a href="#">Contact Us</a></li>
</ul>
Это было полезно?

Решение

Я иду против большинства на этом :)

Да, это может быть хорошей идеей, чтобы разбить его. Лично я держу только current-xxx типа классов и замену их на active, а также active-parent (для активных родительских или предков).

Почему?

  • вокруг Интернета, активный стал стандартным классом для активных пунктов меню (в дополнение к тому, что WP имеет непоследовательные соглашения об именах классов между своими собственными именами классов).
  • Вы можете писать меньше правил CSS; пропускная способность, которую вы сохраните, может быть не большой, но это, безусловно, делает файл CSS более читабельным

Обновленный код:

// for custom menus 
add_filter('nav_menu_css_class', 'normalize_wp_classes', 10, 2);

// for the page menu fallback (wp_list_pages)
add_filter('page_css_class', 'normalize_wp_classes', 10, 2);

/**
 * @param  $classes array
 * @param  $item object
 * @return array
 */
function normalize_wp_classes(array $classes, $item = null){

  // old classes to be replaced with 'active'
  $replacements = array(
    'current-menu-item',
    'current-menu-parent',
    'current-menu-ancestor',
    'current_page_item',
    'current_page_parent',
    'current_page_ancestor',
  );

  // if any of the classes above are present,
  // return an array with a single class ('active')
  return array_intersect($replacements, $classes) ? array('active') : array();
}

Обновление: для тех, кто использует этот код, active-parent Класс больше не требуется (если вам не нужна поддержка IE 6). Используя детский селектор (>) Вы можете эффективно стилизовать активного родителя и активного ребенка в любом случае.

Другие советы

А wp_nav_menu Функция дает вам возможность изменить идентификатор и класс как для контейнера, так и для меню. Но не элементы LI.

Если вы посмотрите на источник где он строит функцию Li Elements (start_el ()); Вы можете видеть, что он использует фильтр NAV_MENU_CSS_CLASS; Фильтр возьмет массив, который вы даете (из струн), и использовать его для создания тегов класса.

Примечание. Из того, что я вижу в коде, если вы передаете ему пустой массив. WordPress по -прежнему будет включать атрибут класса для элемента LI, он будет просто пуст.

Все эти классы предназначены для полезного подключения к JavaScript для чего -то вроде Superfish, а не только из -за IE6.

Также без такого класса, как current_page_item, Вы не сможете выделить текущую страницу в навигации.

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

РЕДАКТИРОВАТЬ: Ясно прояснил, что я имел в виду, никакого неуважения не предполагалось

Изменен из кода «Пони Пони», так как он не сработал для меня с текущей версией WP (3.5.1).

Добавлены пунктирные классы, поскольку WP теперь включает в себя как подчеркнутые, так и пунктирные версии классов иерархии страниц.

Изменен array_diff -> array_intersect, поскольку Diff возвращает все классы вместо фильтрованного списка.

// for custom menus
add_filter('nav_menu_css_class', 'normalize_wp_classes', 10, 2);

// for the page menu fallback (wp_list_pages)
add_filter('page_css_class', 'normalize_wp_classes', 10, 2);

/**
 * @param  $classes array
 * @param  $item object
 * @return array
 */
function normalize_wp_classes($classes, $item){

  // old class => new class
  $replacements = array(
    'current-menu-item'     => 'active',
    'current-menu-parent'   => 'active-parent',
    'current-menu-ancestor' => 'active-parent',
    'current_page_item'     => 'active',
    'current_page_parent'   => 'active-parent',
    'current_page_ancestor' => 'active-parent',
    'current-page-item'     => 'active',
    'current-page-parent'   => 'active-parent',
    'current-page-ancestor' => 'active-parent'
  );

  // do the replacements above
  $classes = strtr(implode(',', $classes), $replacements);
  $classes = explode(',', $classes);

  // remove any classes that are not present in the replacements array,
  // and return the result

  return array_unique(array_intersect(array_values($replacements), $classes));
}

Я бы не порекомендовал его оформить. Да, разметка может выглядеть раздутой, но это Только Вы можете действительно сузить стиль, если хотите, чтобы ваш сайт хорошо смотрел, скажем, IE6. Имейте в виду, что IE6 не назначен не поддерживает нескольких селекторов (то есть li.menu-item.current сломается и по умолчанию на Li Чтобы иметь много селекторов класса, чем недостаточно.

Итак, на самом деле вы мог Следите за списком до класса = "меню-пункт" ... но если у вас когда-нибудь будет меню с более чем одним типом поста, вам понадобится меню-тип-post_type ... и если вы Хотите сделать более модную фильтрацию, вы также получите выгоду от класса меню-##.

Помните, что никто, скорее всего, никогда не увидит фактический код за вашим сайтом, и определение нескольких классов ничего не повредит.

@Ray Gulick: Я ненавижу погружаться, но я согласен с @Dan Gale, @Eamann и @unfanity5902. «Раздушение» не вызывает никаких таинственных проблем и позволяет дизайнеру тему меню множеством гибких способов.

Мне любопытно, почему «раздутие» вас беспокоит? Я знаю, что это не красиво, но рядом с никто никогда не увидит этого. Если это забота о исполнении сотни другие вещи, которые нужно в первую очередь решить Например, уменьшение HTTP -запросов и бритье размера ваших изображений, последняя из которых, вероятно, будет иметь на порядок больше пользы.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с wordpress.stackexchange
scroll top