it-swarm-id.com

Mengapa Menu Kustom Nav menghasilkan banyak kelas pada item daftar? Bisakah saya mengelola ini entah bagaimana?

Di bawah ini adalah contohnya. 3 kelas terlampir pada setiap item, kecuali item saat ini, yang memiliki 6. Bisakah saya membagi-bagikannya?

<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

Saya menentang mayoritas yang satu ini :)

Ya, ini bisa menjadi ide bagus untuk menghapusnya. Secara pribadi saya hanya menyimpan kelas tipe current-xxx dan menggantinya dengan active, dan active-parent (untuk item induk atau leluhur aktif).

Mengapa?

  • di seluruh web, active telah menjadi kelas standar untuk item menu aktif (di atas itu WP memiliki konvensi penamaan kelas yang tidak konsisten antara 'nama kelasnya sendiri).
  • anda bisa menulis lebih sedikit aturan CSS; bandwidth yang Anda simpan mungkin tidak banyak, tetapi tentu saja membuat file CSS lebih mudah dibaca

Kode yang diperbarui:

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

Pembaruan: Bagi siapa pun yang menggunakan kode ini, kelas active-parent tidak lagi diperlukan (kecuali Anda masih membutuhkan IE 6 dukungan). Dengan menggunakan pemilih anak (>) Anda dapat secara efektif menata orang tua aktif dan anak aktif apa pun yang Anda inginkan.

7
onetrickpony

Dimodifikasi dari kode One Trick Pony karena tidak berfungsi untuk saya dengan versi WP saat ini (3.5.1).

Menambahkan kelas putus-putus sebagai WP sekarang termasuk versi garis bawah dan putus-putus dari kelas hierarki halaman.

Mengubah array_diff -> array_intersect sebagai diff mengembalikan semua kelas bukan daftar yang difilter.

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

Semua kelas itu berguna untuk menghubungkan ke javascript untuk sesuatu seperti superfish, bukan hanya karena IE6.

Juga, tanpa kelas seperti current_page_item, Anda tidak akan dapat menyorot halaman saat ini dalam navigasi.

Fleksibilitas adalah kuncinya. Tambahkan semua kelas, yang unik untuk item unik dalam daftar, memberi desainer akhir banyak fleksibilitas dalam gaya. Tapi saya setuju, itu adalah buttload kelas. Seorang programmer HTML yang layak, desainer dapat melakukan hal yang sama dengan kode jauh lebih sedikit.

EDIT: Buat lebih jelas apa yang saya maksud, tidak ada rasa tidak hormat yang dimaksudkan

4
Dan Gayle

Fungsi wp_nav_menu memberi Anda kemampuan untuk mengubah ID dan Kelas untuk wadah dan menu. Tapi bukan elemen LI.

Jika Anda melihat pada source di mana ia membangun elemen LI (start_el () function); Anda dapat melihatnya menggunakan filter nav_menu_css_class; Filter akan mengambil array yang Anda berikan (string) dan menggunakannya untuk membangun tag kelas.

Catatan: Dari apa yang saya lihat dalam kode, jika Anda memberikan array kosong. Wordpress masih akan menyertakan atribut kelas untuk elemen LI, itu hanya akan kosong.

4
Ryan Gibbons

Saya tidak akan merekomendasikan untuk menguranginya. Ya, markupnya mungkin terlihat membengkak, tapi ini adalah hanya cara Anda dapat benar-benar mempersempit gaya jika Anda ingin situs Anda terlihat bagus, katakanlah, IE6. Perlu diingat bahwa IE6 tidak mendukung banyak penyeleksi secara bawaan (mis. Li.menu-item.current akan rusak dan default menjadi li.current), jadi jika Anda melakukan CSS mewah dan ingin berfungsi dengan IE6, lebih baik untuk memiliki banyak penyeleksi kelas yang tersedia daripada tidak cukup.

Jadi, pada kenyataannya, Anda bisa pare daftar ke class = "menu-item" ... tetapi jika Anda akan pernah memiliki menu dengan lebih dari satu jenis posting, Anda perlu menu- item-type-post_type ... dan jika Anda ingin melakukan pemfilteran yang lebih menarik, Anda akan mendapat manfaat dari menu-item - kelas ## juga.

Ingat, tidak ada yang akan pernah melihat kode aktual di belakang situs Anda, dan memiliki beberapa kelas yang didefinisikan tidak akan merugikan apa pun.

2
EAMann

@ Ray Gulick: Saya benci menyelam tapi saya setuju dengan @Dan Gale, @EAMann dan @ Insanity5902. The "mengasapi" tidak menyebabkan masalah yang dapat disamakan dan memungkinkan seorang desainer untuk tema menu dalam banyak cara yang fleksibel.

Saya ingin tahu mengapa "mengasapi" mengganggu Anda? Saya tahu itu tidak cantik tetapi di sebelahnya tidak ada yang akan melihatnya. Jika ini menyangkut kinerja yang beratus-ratus hal-hal lain untuk diatasi terlebih dahulu seperti mengurangi permintaan HTTP dan mencukur ukuran gambar Anda, yang terakhir mungkin akan memiliki urutan lebih banyak manfaat.

2
MikeSchinkel