it-swarm.xyz

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

Ниже приведен пример. 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>
6
Ray Gulick

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

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

Зачем?

  • во всем Интернете active стал стандартным классом для активных пунктов меню (помимо этого 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). Используя дочерний селектор (>), вы можете эффективно стилизовать активного родителя и активного потомка любым удобным для вас способом.

7
onetrickpony

Изменено из кода One Trick Pony, так как он не работал для меня с текущей версией 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));
}
4
Nicholas Turbanov

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

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

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

Правка: сделать более ясным, что я имел в виду, неуважительное намерение

4
Dan Gayle

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

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

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

4
Ryan Gibbons

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

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

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

2
EAMann

@Ray Gulick: Ненавижу погружаться, но согласен с @Dan Gale, @EAMann и @ Insanity5902. "Раздувание" не вызывает каких-либо проблем, и позволяет дизайнеру гибко оформить меню.

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

2
MikeSchinkel