Ниже приведен пример. 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
(для активных элементов родителя или предка).
Зачем?
Обновленный код:
// 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). Используя дочерний селектор (>
), вы можете эффективно стилизовать активного родителя и активного потомка любым удобным для вас способом.
Изменено из кода 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));
}
Все эти классы предназначены для полезного использования javascript для чего-то вроде superfish, а не только из-за IE6.
Кроме того, без такого класса, как current_page_item
, вы не сможете выделить текущую страницу в навигации.
Гибкость является ключом. Добавьте все классы, уникальные для уникальных элементов в списке, предоставьте конечному дизайнеру большую гибкость в оформлении. Но я согласен, что это классная нагрузка. Приличный программист HTML, дизайнер мог бы сделать то же самое с гораздо меньшим количеством кода.
Правка: сделать более ясным, что я имел в виду, неуважительное намерение
Функция wp_nav_menu дает вам возможность изменить идентификатор и класс как для контейнера, так и для меню. Но не элементы LI.
Если вы посмотрите на source , где он строит элементы LI (функция start_el ()); Вы можете видеть, что он использует фильтр nav_menu_css_class; Фильтр возьмет массив, который вы ему дадите (из строк), и использует его для построения тегов класса.
Примечание: из того, что я вижу в коде, если вы передадите ему пустой массив. Wordpress по-прежнему будет включать атрибут класса для элемента LI, он будет просто пустым.
Я не рекомендовал бы очищать это. Да, разметка может выглядеть раздутой, но это only способ, которым вы действительно можете сузить стиль, если вы хотите, чтобы ваш сайт выглядел хорошо, скажем, в IE6. Имейте в виду, что IE6 изначально не поддерживает множественные селекторы (т.е. li.menu-item.current сломается и по умолчанию будет li.current), поэтому, если вы делаете какой-то модный CSS и хотите, чтобы он работал с IE6, лучше иметь много доступных селекторов классов, чем недостаточно.
Итак, на самом деле, вы могли бы сократить список до class = "menu-item" ... но если у вас когда-нибудь будет меню с несколькими типами записей, вам понадобится menu- item-type-post_type ... и если вы захотите сделать более интересную фильтрацию, вы также получите пользу от пункта меню - ## class.
Помните, что никто, вероятно, никогда не увидит фактический код вашего сайта, и определение нескольких классов ничего не повредит.
@Ray Gulick: Ненавижу погружаться, но согласен с @Dan Gale, @EAMann и @ Insanity5902. "Раздувание" не вызывает каких-либо проблем, и позволяет дизайнеру гибко оформить меню.
Мне любопытно, почему "наворот" беспокоит тебя? Я знаю, что это не красиво, но рядом никто никогда не увидит. Если речь идет о производительности, то есть о сотнях других вещах, которые необходимо решить в первую очередь таких как сокращение HTTP-запросов и сокращение размеров ваших изображений, последние из которых, вероятно, будут иметь на порядок большую выгоду.