it-swarm-eu.dev

Proč Custom Nav Menus generuje tolik tříd v položkách seznamu? Můžu to nějak zvládnout?

Níže je uveden příklad. Ke každé položce jsou připojeny 3 třídy, s výjimkou aktuální položky, která má 6. Můžu to nějakým způsobem pare?

<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

Jdu proti většině na tomto :)

Ano, může to být dobrý nápad, jak to odstranit. Osobně si uchovávám pouze current-xxx typové třídy a nahrazuji je active.a active-parent (pro aktivní nadřazené položky nebo položky předků).

Proč?

  • kolem webu, active se stalo standardní třídou pro aktivní položky menu (nahoře má WP nekonzistentní třídní konvence mezi svými vlastními názvy tříd).
  • dostanete méně pravidel CSS; Šířka pásma, kterou ušetříte, nemusí být moc, ale určitě je soubor CSS lépe čitelný

Aktualizovaný kód:

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

Aktualizace: Pro kohokoli, kdo používá tento kód, již není požadována třída active-parent (pokud ještě nepotřebujete podporu IE 6). Pomocí voliče dítěte (>) můžete efektivně vytvořit styl aktivního rodiče a aktivního dítěte způsobem, který chcete.

7
onetrickpony

Upraveno z kódu One Trick Pony, protože pro mě nefungovalo s aktuální verzí WP (3.5.1).

Přidané přerušované třídy jako WP nyní obsahují jak podtržené, tak přerušované verze tříd hierarchie stránek.

Změnil array_diff -> array_intersect jako diff vrátí všechny třídy namísto filtrovaného seznamu.

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

Všechny tyto třídy jsou pro užitečné zaháknutí do javascriptu pro něco jako superfish, ne jen kvůli IE6.

Také bez třídy, jako je current_page_item, byste nebyli schopni zvýraznit aktuální stránku v rámci navigace.

Klíčem je flexibilita. Přidat všechny třídy, jedinečné pro jedinečné položky v seznamu, dát koncovému designérovi hodně flexibility ve stylu. Ale souhlasím, že je to zátěž tříd. Slušný HTML programátor, designér mohl udělat ekvivalent s mnohem méně kódu.

EDIT: Udělal to jasnější, co jsem myslel, bez úcty

4
Dan Gayle

Funkce wp_nav_menu vám dává možnost změnit ID a třídu pro kontejner i nabídku. Ale ne prvky LI.

Pokud se podíváte na source kde se budují prvky LI (start_el ()); Můžete vidět, že používá filtr nav_menu_css_class; Filtr bude mít pole, které mu přidáte (řetězce) a použijete jej k vytvoření tagů třídy.

Poznámka: Z toho, co vidím v kódu, když předáte prázdné pole. Wordpress bude stále obsahovat atribut class pro prvek LI, bude prostě prázdný.

4
Ryan Gibbons

Nedoporučoval bych to rozebrat. Ano, značení by mohlo vypadat nafouklé, ale toto je pouze způsob, jak můžete opravdu zúžit styl, pokud chcete, aby vaše stránky vypadaly dobře, řekněme, IE6. Mějte na paměti, že IE6 nativně nepodporuje více selektorů (tj. Li.menu-item.current se přeruší a implicitně se změní na li.current), takže pokud děláte nějaký luxusní CSS a chcete pracovat s IE6, je to lepší mít k dispozici spoustu voličů tříd než ne.

Takže ve skutečnosti jste mohl pare seznam dolů do class = "menu-item" ... ale pokud budete mít někdy nabídku s více než jedním typem příspěvku, budete potřebovat menu-item-type-post_type ... a chcete-li dělat filtrování, budete těžit také z položky menu - ## class.

Nezapomeňte, že nikdo nikdy neuvidí skutečný kód za vašimi stránkami a definování více tříd nic nebolí.

2
EAMann

@Ray Gulick: Nesnáším se potápět, ale souhlasím s @Dan Gale, @EAMann a @ Insanity5902. "Bloat" nezpůsobuje žádné hnusné problémy a umožňuje designérovi motivovat nabídku mnoha různými způsoby.

Jsem zvědavý, proč vás "bloat" vadí? Vím, že to není hezké, ale nikdo to nikdy neuvidí. Je-li jeho výkonnost znepokojena stovkami jinými věcmi, které je třeba řešit jako první například omezením požadavků HTTP a oholením velikostí obrázků, z nichž druhý bude pravděpodobně mít řádově větší výhodu.

2
MikeSchinkel