it-swarm-tr.com

Özel Nav Menüler neden liste öğeleri üzerinde bu kadar çok sınıf oluşturur? Bunu bir şekilde başarabilir miyim?

Aşağıda bir örnek. Her öğeye ekli 3 sınıf, şu anki öğenin dışında, 6 olan öğeyi. Bunu bir şekilde aşağı indirebilir miyim?

<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

Bu konuda çoğunluğa karşı gidiyorum :)

Evet, soymak iyi bir fikir olabilir. Şahsen ben sadece current-xxx tipi sınıfları tutuyorum ve onları active ile değiştiriyorum.ve ve active-parent (etkin ebeveyn veya ata öğeleri için).

Niye ya?

  • web'de active , aktif menü öğeleri için standart bir sınıf haline gelmiştir (bunun üzerine WP, kendi sınıf adları arasında tutarsız sınıf adlandırma kuralları vardır).
  • daha az CSS kuralı yazabilirsin; kaydettiğiniz bant genişliği fazla olmayabilir, ancak CSS dosyasını daha okunaklı hale getirir

Güncellenen kod:

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

Güncelleme: Bu kodu kullanan herkes için, active-parent sınıfı artık gerekli değildir (hala IE 6 desteğine ihtiyacınız yoksa). Çocuk seçiciyi (>) kullanarak etkin ebeveyni ve etkin çocuğu istediğiniz şekilde etkili bir şekilde biçimlendirebilirsiniz.

7
onetrickpony

One Trick Pony'nin kodundan değiştirildi, çünkü şu anki sürümü içinWP (3.5.1) çalışmadı.

Kesikli sınıfları WP olarak ekledi, artık sayfa hiyerarşi sınıflarının hem altı çizili hem de kesikli sürümlerini içeriyor.

Array_diff -> array_intersect diff olarak değiştirilmiş, filtre uygulanmış liste yerine tüm sınıfları döndürür.

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

Tüm bu sınıflar, yalnızca IE6 nedeniyle değil, süper balık gibi bir şey için javascript'e bağlanmak için faydalıdır.

Ayrıca, current_page_item gibi bir sınıf olmadan, navigasyon içindeki geçerli sayfayı vurgulayamazsınız.

Esneklik anahtardır. Listedeki benzersiz öğeler için benzersiz olan tüm sınıfları ekleyin, son tasarımcıya stil konusunda çok esneklik sağlayın. Ama katılıyorum, bu bir sınıf dersi. İyi bir HTML programcısı olan tasarımcı, eşdeğerini daha az kodla yapabilir.

EDIT: Ne demek istediğimi daha açık hale getirdi, saygısızlık etmek değildi

4
Dan Gayle

wp_nav_menu işlevi, hem kap hem de menü için kimliği ve Sınıfı değiştirebilmenizi sağlar. Fakat LI unsurları değil.

source 'ya LI elemanlarını oluşturduğu yere bakarsanız (start_el () fonksiyonu); Nav_menu_css_class filtresini kullandığını görebilirsiniz; Filtre, verdiğiniz diziyi (dizelerin) alır ve sınıf etiketlerini oluşturmak için kullanır.

Not: Boş bir dizi iletirseniz, kodda gördüğümden. Wordpress hala LI öğesinin sınıf niteliğini içerecek, sadece boş olacak.

4
Ryan Gibbons

Ayrıştırmayı tavsiye etmem. Evet, işaretleme şişkin görünebilir, ancak bu, only yoludur, sitenizin iyi görünmesini istiyorsanız, yani, IE6. IE6'nın birden çok seçiciyi yerel olarak desteklemediğini unutmayın (yani li.menu-item.current bozulur ve li.current'a döner), yani herhangi bir fantezi CSS yapıyorsanız ve IE6 ile çalışmasını istiyorsanız, daha iyi Yeterli sayıda sınıf seçiciye sahip olmak.

Böylece, gerçekte, could listeyi class = "menu-item" olarak sıralayabilirsiniz ... ancak birden fazla gönderi türüne sahip bir menünüz olacaksa, ihtiyacınız olacak menu-item-type-post_type ... ve meraklısı filtreleme yapmak istiyorsanız, menu-item - ## sınıfından da yararlanacaksınız.

Unutmayın, hiç kimse sitenizin arkasındaki gerçek kodu göremez ve birden çok sınıf tanımlanması hiçbir şeye zarar vermez.

2
EAMann

@ Ray Gulick: Dalmaktan nefret ediyorum ama @Dan Gale, @EAMann ve @ Insanity5902 ile aynı fikirdeyim. "Şişirme" herhangi bir somut soruna yol açmaz ve bir tasarımcının menüyü çok esnek bir şekilde temasına sokmasını sağlar.

Neden "şişkinlik" seni rahatsız ediyor? Güzel olmadığını biliyorum ama kimse görmeyecek. HTTP isteklerini azaltmak ve resimlerinizin boyutlarını traş etmek, örneğin büyük olasılıkla daha fazla yarar sağlayacak bir performans söz konusu olduğunda, yüzlerce önce ele alınması gereken diğer şeyler .

2
MikeSchinkel