it-swarm.dev

Warum generieren benutzerdefinierte Navigationsmenüs so viele Klassen für Listenelemente? Kann ich das irgendwie hinbekommen

Unten ist ein Beispiel. Jedem Artikel sind 3 Klassen beigefügt, außer dem aktuellen Artikel mit 6 Klassen. Kann ich das irgendwie reduzieren?

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

Ich gehe gegen die Mehrheit in diesem Fall :)

Ja, es kann eine gute Idee sein, es auszuziehen. Persönlich behalte ich nur die current-xxx-Typklassen und ersetze sie durch active, und active-parent (für aktive übergeordnete oder übergeordnete Elemente).

Warum?

  • im Web wurde active zur Standardklasse für aktive Menüelemente (darüber hinaus bestehen in WP inkonsistente Klassennamenskonventionen zwischen den eigenen Klassennamen).
  • sie müssen weniger CSS-Regeln schreiben. Die Bandbreite, die Sie einsparen, ist zwar nicht sehr hoch, macht die CSS-Datei jedoch besser lesbar

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 jeden, der diesen Code verwendet, ist die Klasse active-parent nicht mehr erforderlich (es sei denn, Sie benötigen noch Unterstützung für IE 6). Mit dem Child-Selector (>) können Sie das aktive Elternteil und das aktive Kind nach Belieben gestalten.

7
onetrickpony

Geändert von One Trick Ponys Code, da es mit einer aktuellen Version von WP (3.5.1) nicht funktioniert hat.

Die gestrichelten Klassen wurden hinzugefügt, da WP jetzt sowohl unterstrichene als auch gestrichelte Versionen der Seitenhierarchieklassen enthält.

Geändertes 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));
}
4

All diese Klassen sind für das nützliche Einbinden in Javascript für etwas wie Superfish gedacht, nicht nur wegen IE6.

Ohne eine Klasse wie current_page_item könnten Sie die aktuelle Seite in der Navigation nicht hervorheben.

Flexibilität ist der Schlüssel. Fügen Sie alle Klassen hinzu, eindeutige für eindeutige Elemente in der Liste, und geben Sie dem Enddesigner viel Flexibilität bei der Gestaltung. Aber ich stimme dir zu, das ist eine Fülle von Klassen. Als anständiger HTML-Programmierer könnte der Designer das Gleiche mit viel weniger Code tun.

EDIT: Es wurde klarer, was ich meinte, keine Missachtung beabsichtigt

4
Dan Gayle

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

Wenn Sie sich das Verzeichnis source ansehen, in dem die LI-Elemente erstellt werden (Funktion start_el ()); Sie können sehen, dass der Filter nav_menu_css_class verwendet wird. Der Filter nimmt das Array, das Sie ihm geben (von Zeichenfolgen) und verwendet es, um die Klassen-Tags zu erstellen.

Hinweis: Nach dem, was ich im Code sehe, übergeben Sie ihm ein leeres Array. Wordpress wird weiterhin das Klassenattribut für das LI-Element enthalten, es wird nur leer sein.

4
Ryan Gibbons

Ich würde es nicht empfehlen, es zu reduzieren. Ja, das Markup sieht möglicherweise aufgebläht aus, aber dies ist die only Methode, mit der Sie das Styling wirklich eingrenzen können, wenn Ihre Site beispielsweise im IE6 gut aussehen soll. Denken Sie daran, dass IE6 nicht automatisch mehrere Selektoren unterstützt (dh li.menu-item.current wird unterbrochen und standardmäßig li.current verwendet). Wenn Sie also ausgefallenes CSS verwenden und möchten, dass es mit IE6 funktioniert, ist es besser viele Klassenselektoren zur Verfügung zu haben als nicht genug.

In Wirklichkeit könnten Siedie Liste auf class = "menu-item" reduzieren ... aber wenn Sie jemals ein Menü mit mehr als einem Beitragstyp haben möchten, benötigen Sie menu-item-type-post_type ... und wenn Sie eine schickere Filterung durchführen möchten, profitieren Sie auch von der menu-item-## -Klasse.

Denken Sie daran, dass wahrscheinlich niemand den eigentlichen Code hinter Ihrer Site sehen wird, und dass das Definieren mehrerer Klassen nichts schadet.

2
EAMann

@ Ray Gulick: Ich hasse es einzutauchen, aber ich stimme mit @ Dan Gale, @ EAMann und @ Insanity5902 überein. Das "Aufblähen" verursacht keine tanbgible Probleme und ermöglicht einem Designer, das Menü auf viele flexible Arten zu thematisieren.

Ich bin gespannt, warum dich das "Aufblähen" stört. Ich weiß, dass es nicht schön ist, aber niemand wird es jemals sehen. Wenn es um die Leistung geht, die Hunderte von anderen Dingen, die zuerst angegangen werden müssen wie das Reduzieren von HTTP-Anforderungen und das Rasieren der Größe Ihrer Bilder, von denen letztere wahrscheinlich eine Größenordnung mehr Nutzen haben werden.

2
MikeSchinkel