it-swarm-vi.tech

Tại sao Menu Nav Nav Custom tạo ra nhiều lớp trong danh sách các mục? Tôi có thể quản lý điều này bằng cách nào đó?

Dưới đây là một ví dụ. 3 lớp được đính kèm với mỗi mục, ngoại trừ mục hiện tại, trong đó có 6. Tôi có thể giảm bớt điều này bằng cách nào đó không?

<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

Tôi đang đi ngược lại với đa số về điều này :)

Vâng, nó có thể là một ý tưởng tốt để tước nó xuống. Cá nhân tôi chỉ giữ các lớp loại current-xxx và thay thế chúng bằng activeactive-parent (đối với các mục gốc hoặc tổ tiên hoạt động).

Tại sao?

  • trên web, active đã trở thành lớp tiêu chuẩn cho các mục menu hoạt động (trên hết WP có các quy ước đặt tên lớp không nhất quán giữa các tên lớp riêng của nó).
  • bạn có thể viết các quy tắc CSS ít hơn; băng thông mà bạn lưu có thể không nhiều, nhưng chắc chắn nó làm cho tệp CSS dễ đọc hơn

Mã cập nhật:

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

Cập nhật: Đối với bất kỳ ai sử dụng mã này, lớp active-parent không còn cần thiết nữa (trừ khi bạn vẫn cần hỗ trợ IE 6). Sử dụng bộ chọn con (>), bạn có thể định kiểu hiệu quả cha mẹ đang hoạt động và con hoạt động theo bất kỳ cách nào bạn muốn.

7
onetrickpony

Được sửa đổi từ mã của One Trick Pony vì nó không hoạt động với tôi với phiên bản hiện tại là WP (3.5.1).

Đã thêm các lớp nét đứt là WP hiện bao gồm cả các phiên bản gạch dưới và gạch ngang của các lớp phân cấp trang.

Đã thay đổi Array_diff -> Array_intersect là diff trả về tất cả các lớp thay vì danh sách được lọc.

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

Tất cả các lớp này là để kết nối hữu ích vào javascript cho một cái gì đó như superfish, không chỉ vì IE6.

Ngoài ra, không có lớp như current_page_item, bạn sẽ không thể đánh dấu trang hiện tại trong điều hướng.

Linh hoạt là chìa khóa. Thêm tất cả các lớp, lớp duy nhất cho các mục duy nhất trong danh sách, cung cấp cho nhà thiết kế cuối rất linh hoạt trong kiểu dáng. Nhưng tôi đồng ý, đó là một lớp học. Một lập trình viên HTML giỏi, nhà thiết kế có thể làm tương đương với ít mã hơn.

EDIT: Làm cho nó rõ ràng hơn những gì tôi muốn nói, không có ý định thiếu tôn trọng

4
Dan Gayle

Hàm wp_nav_menu cung cấp cho bạn khả năng sửa đổi ID và Class cho cả vùng chứa và menu. Nhưng không phải là các yếu tố LI.

Nếu bạn xem qua source nơi nó đang xây dựng các phần tử LI (hàm start_el ()); Bạn có thể thấy nó đang sử dụng bộ lọc nav_menu_css_group; Bộ lọc sẽ lấy mảng bạn cung cấp cho nó (của chuỗi) và sử dụng nó để xây dựng các thẻ lớp.

Lưu ý: Từ những gì tôi thấy trong mã, nếu bạn truyền cho nó một mảng trống. Wordpress vẫn sẽ bao gồm thuộc tính lớp cho phần tử LI, nó sẽ chỉ trống.

4
Ryan Gibbons

Tôi không khuyên bạn nên giảm nó xuống. Đúng, đánh dấu có thể trông cồng kềnh, nhưng đây là chỉ cách bạn thực sự có thể thu hẹp kiểu dáng nếu bạn muốn trang web của mình trông đẹp, giả sử, IE6. Hãy nhớ rằng IE6 không hỗ trợ nhiều bộ chọn (ví dụ: li.menu-item.cản sẽ bị hỏng và mặc định là li.cản), vì vậy nếu bạn đang thực hiện bất kỳ CSS ưa thích nào và muốn nó hoạt động với IE6, tốt hơn để có nhiều bộ chọn lớp có sẵn hơn là không đủ.

Vì vậy, trong thực tế, bạn có thể cắt giảm danh sách xuống class = "menu-item" ... nhưng nếu bạn sẽ có một menu có nhiều hơn một loại bài đăng, bạn sẽ cần menu- item-type-post_type ... và nếu bạn muốn lọc fancier, bạn sẽ được hưởng lợi từ menu-item - lớp ##.

Hãy nhớ rằng, không ai có thể sẽ nhìn thấy mã thực tế đằng sau trang web của bạn và việc có nhiều lớp được xác định sẽ không ảnh hưởng gì.

2
EAMann

@Ray Gulick: Tôi ghét lặn xuống nhưng tôi đồng tình với @Dan Gale, @EAMann và @ Insanity5902. "Sự phình to" không gây ra bất kỳ vấn đề tan nào và cho phép một nhà thiết kế tạo chủ đề cho menu theo nhiều cách linh hoạt.

Tôi tò mò tại sao "phình to" làm phiền bạn? Tôi biết nó không đẹp nhưng bên cạnh sẽ không có ai nhìn thấy nó. Nếu mối quan tâm về hiệu suất là hàng trăm những điều khác cần giải quyết trước chẳng hạn như giảm yêu cầu HTTP và cạo kích thước hình ảnh của bạn thì điều sau có thể sẽ có lợi ích lớn hơn.

2
MikeSchinkel