Pourquoi les menus personnalisés Nav génèrent tant de classes sur les éléments de la liste? Puis-je gérer cette certaine façon?

Question

Voici un exemple. 3 classes attachées à chaque élément, sauf élément actuel, qui a 6. Puis-je PARÉ cette baisse en quelque sorte?

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

Answer 1

Je vais contre la majorité sur celui-ci:)

Oui, il peut être une bonne idée de dépouiller vers le bas. Personnellement, je suis en ne gardant que les classes de type current-xxx et en les remplaçant par active et active-parent (pour le parent actif ou ancêtre objets).

Pourquoi?

• sur le web, actif est devenu la classe standard pour les éléments de menu actifs (au-dessus de ce WP a des conventions de dénomination classe incompatibles entre ses propres noms de classe).
• vous obtenez moins d'écrire des règles CSS; la bande passante que vous enregistrez peut-être pas beaucoup, mais il est certainement le fichier CSS plus lisible

---

Code Mise à 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 toute personne utilisant ce code, la classe active-parent n'est plus nécessaire (sauf si vous avez encore besoin de soutien IE 6). Utilisation du sélecteur de l'enfant (>), vous pouvez le style efficace parent actif et enfant actif comme vous le souhaitez.

Answer 2

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

Si vous jetez un oeil à la source où on construit les (fonction start_el ()) des éléments de LI; Vous pouvez le voir utilise le nav_menu_css_class filtre; Le filtre prendra le tableau que vous donnez (de chaînes) et l'utiliser pour construire les étiquettes de la classe.

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

Answer 3

Toutes ces classes sont utiles pour crochetage en javascript pour quelque chose comme superfish, pas seulement à cause de IE6.

En outre, sans une classe telle que current_page_item, vous ne seriez pas en mesure de mettre en évidence la page actuelle dans la barre de navigation.

La flexibilité est la clé. Ajouter toutes les classes, les uniques pour des objets uniques dans la liste, donner le concepteur final beaucoup de flexibilité dans le style. Mais je suis d'accord, qui est une buttload des classes. Un programmeur HTML décent, concepteur pourrait faire l'équivalent avec beaucoup moins de code.

EDIT: rendu plus clair ce que je voulais dire, sans manquer de respect prévu

Answer 4

modifié de One Trick Code de poney comme ça n'a pas marché pour moi avec une version actuelle de WP (3.5.1).

Ajout des classes pointillées WP comprend maintenant les deux versions et soulignées pointillées des classes de hiérarchie de pages.

Changé array_diff -.> Array_intersect que les rendements diff toutes les classes au lieu 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));
}

Answer 5

Je ne recommanderais pas à éplucher vers le bas. Oui, le balisage peut sembler pléthorique, mais c'est la que comme vous pouvez vraiment affiner le style si vous voulez que votre site à un bon regard, disons, IE6. Gardez à l'esprit que IE6 ne supporte pas nativement plusieurs sélecteurs (c.-à-li.menu item.current cassera et par défaut à li.current), donc si vous faites une CSS fantaisie et il veut travailler avec IE6, il vaut mieux d'avoir beaucoup de sélecteurs de classe disponibles que pas assez.

Donc, en réalité, vous pourrait réduire la liste à class = « menu-item » ... mais si vous allez avoir jamais un menu avec plus d'un type de poste, vous aurez besoin d'élément de menu type post_type ... et si vous voulez faire un filtrage colombophile, vous bénéficierez du menu item -. ## classe et

Rappelez-vous, personne ne verra probablement jamais le code réel derrière votre site, et ayant plusieurs classes définies ne rien mal.

Answer 6

@Ray Gulick: Je déteste plonger dans mais je suis d'accord avec Gale @ Dan, @EAMann et @ Insanity5902. Le « ballonnement » ne provoque pas de problèmes tanbgible et permet à un concepteur de thème le menu dans beaucoup de façons flexibles.

Je suis curieux de savoir pourquoi les embêtements « ballonnement » vous? Je sais que ce n'est pas joli, mais à côté de personne ne sera jamais le voir. Si c'est une préoccupation de performance qui sont des centaines d'autres choses à première adresse telle que la réduction des requêtes HTTP et raser la taille de vos images dont la dernière aura probablement un ordre de grandeur plus d'avantages.