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


Ниже приведен пример. 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>
 7
Author: Chip Bennett, 2010-08-11

6 answers

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

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

 6
Author: onetrickpony, 2013-12-12 17:40:35

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

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

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

 4
Author: Ryan Gibbons, 2010-08-12 15:51:19

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

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

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

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

 4
Author: Dan Gayle, 2012-06-08 23:07:30

Изменен из кода одного трюкового пони, так как он не работал для меня с текущей версией 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
Author: Nicholas Turbanov, 2013-05-16 12:57:38

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

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

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

 2
Author: EAMann, 2010-08-11 20:12:21

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

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

 2
Author: MikeSchinkel, 2010-08-12 16:15:49