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