web-dev-qa-db-fra.com

Pourquoi les menus de navigation personnalisés génèrent-ils autant de classes sur les éléments de liste? Puis-je gérer cela en quelque sorte?

Voici un exemple. 3 classes attachées à chaque élément, à l'exception de l'élément en cours, qui en contient 6. Puis-je réduire cela d'une manière ou d'une autre?

<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>
menus
6
Ray Gulick

Je vais contre la majorité sur celui-là :)

Oui, ce peut être une bonne idée de le dépouiller. Personnellement, je ne garde que les classes de type current-xxx et les remplace par activeet active-parent (pour les éléments parents ou ancêtres actifs).

Pourquoi?

  • sur le Web, active est devenu la classe standard des éléments de menu actifs (WP possède des conventions de nom de classe incohérentes entre ses propres noms de classe).
  • vous écrivez moins de règles CSS; la bande passante que vous enregistrez peut ne pas être très importante, mais cela rend certainement le fichier CSS plus lisible

Code mis à jour:

// 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();
}

Mise à jour: pour ceux qui utilisent ce code, la classe active-parent n'est plus requise (sauf si vous avez toujours besoin de la prise en charge de IE 6). En utilisant le sélecteur d’enfants (>), vous pouvez appliquer le style que vous voulez au parent et à l’enfant actifs.

7
onetrickpony

Modifié à partir du code de One Trick Pony car il ne fonctionnait pas pour moi avec une version actuelle de WP (3.5.1).

Les classes en pointillés ajoutées en tant que WP incluent désormais les versions soulignées et en pointillés des classes de la hiérarchie des pages.

Modifié array_diff -> array_intersect car diff renvoie toutes les classes à la place de la liste filtrée.

// 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

Toutes ces classes sont utiles pour le javascript en tant que superfish, pas seulement à cause d'IE6.

En outre, sans une classe telle que current_page_item, vous ne pourriez pas mettre en surbrillance la page actuelle dans la navigation.

La flexibilité est la clé. Ajouter toutes les classes, uniques pour les éléments uniques dans la liste, donne au concepteur final beaucoup de souplesse dans le style. Mais je suis d’accord, c’est un fardeau de classes. Programmeur HTML décent, le concepteur pourrait faire l’équivalent avec beaucoup moins de code.

EDIT: fait plus clair ce que je voulais dire, sans manque de respect

4
Dan Gayle

La fonction wp_nav_menu vous permet de modifier l'ID et la classe pour le conteneur et le menu. Mais pas les éléments LI.

Si vous regardez le source où il construit les éléments LI (fonction start_el ()); Vous pouvez voir qu'il utilise le filtre nav_menu_css_class; Le filtre prendra le tableau que vous lui donnez (de chaînes) et l'utilisera pour construire les balises de classe.

Note: D'après ce que je vois dans le code, si vous lui passez un tableau vide. Wordpress inclura toujours l'attribut de classe pour l'élément LI, il sera simplement vide.

4
Ryan Gibbons

@Ray Gulick: Je n'aime pas plonger, mais je suis d'accord avec @Dan Gale, @EAMann et @ Insanity5902. Le "gonflement" ne pose aucun problème tangible et permet au concepteur de thématiser le menu de nombreuses manières flexibles.

Je suis curieux de savoir pourquoi le "ballonnement" vous dérange? Je sais que ce n'est pas joli mais personne ne le verra jamais. S'il s'agit d'un problème de performances qui implique des centaines de autres problèmes à résoudre en premier tels que la réduction des requêtes HTTP et la réduction de la taille de vos images, ces dernières auront probablement un avantage de plus en plus considérable.

2
MikeSchinkel