Warum generieren benutzerdefinierte NAV -Menüs so viele Klassen auf Listenelementen? Kann ich das irgendwie verwalten?

Question

Unten ist ein Beispiel. 3 Klassen, die an jedes Element angehängt sind, außer dem aktuellen Artikel, der 6 hat. Kann ich das irgendwie einstellen?

<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

Ich gehe gegen die Mehrheit in diesem Fall :)

Ja, es kann eine gute Idee sein, es abzuziehen. Persönlich behalte ich nur die current-xxx Geben Sie Klassen ein und ersetzen Sie sie durch active, und active-parent (für aktive Eltern- oder Vorfahren).

Wieso den?

• rund um das Web, aktiv ist zur Standardklasse für aktive Menüelemente geworden (darüber hinaus hat WP inkonsistente Klassennamenkonventionen zwischen seinen eigenen Klassennamen).
• Sie können weniger CSS -Regeln schreiben. Die Bandbreite, die Sie sparen, ist vielleicht nicht viel, aber sie macht die CSS -Datei sicherlich lesbarer

---

Aktualisierter Code:

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

---

Update: Für alle, die diesen Code verwenden, die active-parent Die Klasse ist nicht mehr benötigt (es sei denn, Sie benötigen noch IE 6 -Unterstützung). Verwenden des untergeordneten Selektors (>) Sie können das aktive Elternteil und das aktive Kind effektiv stylen, was Sie möchten.

Answer 2

Das WP_NAV_MENU Mit der Funktion können Sie die ID und Klasse sowohl für den Container als auch für das Menü ändern. Aber nicht die Li -Elemente.

Wenn Sie sich das ansehen Quelle wo es die Li -Elemente baut (start_el () funktion); Sie können sehen, dass es die Filter nav_menu_css_class verwendet. Der Filter nimmt das Array, das Sie ihm geben, (von Saiten) und verwenden es, um die Klassen -Tags zu erstellen.

Hinweis: Nach dem, was ich im Code sehe, wenn Sie ihm ein leeres Array übergeben. WordPress enthält weiterhin das Klassenattribut für das Li -Element, es ist einfach leer.

Answer 3

Alle diese Klassen dienen zum nützlichen Einbinden von JavaScript für so etwas wie Superfisch, nicht nur wegen IE6.

Auch ohne eine Klasse wie z. current_page_item, Sie könnten die aktuelle Seite innerhalb der Navigation nicht hervorheben.

Flexibilität ist der Schlüssel. Fügen Sie alle Klassen hinzu, einzigartige für einzigartige Elemente in der Liste. Geben Sie dem Enddesigner viel Flexibilität im Styling. Aber ich bin damit einverstanden, das ist eine Buttladung von Klassen. Der Designer, ein anständiger HTML -Programmierer, könnte mit viel weniger Code entsprechen.

Bearbeiten: Machte deutlicher, was ich meinte, keine Respektlosigkeit beabsichtigt

Answer 4

Aus dem Code von One Trick Pony geändert, da er für mich nicht mit einer aktuellen Version von WP (3.5.1) funktioniert hat.

Die gestrichelten Klassen als WP enthält jetzt sowohl unterstrichene als auch gestrichelte Versionen der Seitenhierarchieklassen.

Geändert array_diff -> array_intersect als Diff gibt alle Klassen anstelle der gefilterten Liste zurück.

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

Ich würde es nicht empfehlen, es abzuschieben. Ja, das Markup mag aufgebläht aussehen, aber das ist das nur So können Sie das Styling wirklich eingrenzen, wenn Sie möchten, dass Ihre Website gut aussieht, beispielsweise IE6. Denken Sie daran, dass IE6 mehrere Selektoren nicht nativ unterstützt (dh li.menu-item.current wird nach li.current brechen und standardmäßig). Wenn Sie also ein ausgefallenes CSS machen und möchten, dass es mit IE6 funktioniert, ist es besser viele Klassenauswahlern zur Verfügung zu haben als nicht genug.

Also in Wirklichkeit du könnte Pare die Liste auf class = "Menü-Punkt" ... aber wenn Sie jemals ein Menü mit mehr als einem Post-Typ haben, benötigen Sie ein Menü-Punkt-Typ-Post_Type ... und wenn Sie Wenn Sie eine schickere Filterung durchführen möchten, profitieren Sie auch vom Menü-Element-##-Klasse.

Denken Sie daran, dass wahrscheinlich niemand den tatsächlichen Code hinter Ihrer Website sehen wird und mehrere Klassen definiert werden, wird nichts schaden.

Answer 6

@Ray Gulick: Ich hasse es, einzustimmen, aber ich stimme @dan gale, @eamann und @Insanity5902 zu. Das "Aufblähen" verursacht keine tanbgible Probleme und ermöglicht es einem Designer, das Menü auf viele flexible Weise zu testen.

Ich bin gespannt, warum das "Aufblähen" dich stört? Ich weiß, dass es nicht hübsch ist, aber neben niemand wird es jemals sehen. Wenn es ein Leistungsbedenken ist, das Hunderte von sind Andere Dinge, die zuerst angehen sollten wie das Reduzieren von HTTP -Anfragen und das Rasieren der Größen Ihrer Bilder, von denen letztere wahrscheinlich einen Größenordnungsaufwand haben wird.