Làm cách nào để thêm một lớp đang hoạt động vào menu WordPress của tôi?

Tôi muốn sửa đổi wp_nav_menu để nó chỉ định mục menu hiện tại lớp .active thay vì lớp mặc định .current-menu-item. Tôi cần cái này để sử dụng lớp .active từ Bootstrap

Đây là những gì tôi có (những thứ bổ sung đến từ WP, vì vậy vui lòng cuộn sang bên phải)

   
item1
   
item2

Và đây là những gì tôi cần

   
item1
   
item2

Tôi muốn đạt được điều này mà không cần sửa đổi ../wp-includes/nav-menu-template.php và không cần sử dụng JS

CẬP NHẬT. Tôi đã tìm thấy câu trả lời ngay trước khi đăng câu hỏi này, nhưng vì tôi gặp khá nhiều khó khăn trong việc tìm ra nó, nên đăng câu hỏi này dưới dạng QA để hy vọng tiết kiệm thời gian cho ai đó

Giải pháp tốt nhất

Chỉ cần dán mã này vào chức năng. tập tin php

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);

function special_nav_class ($classes, $item) {
  if (in_array('current-menu-item', $classes) ){
    $classes[] = 'active ';
  }
  return $classes;
}

Tìm hiểu thêm về wordpress. tổ chức

• Đánh dấu trang hiện tại trong WordPress 3. 0 thực đơn
• Thêm lớp .active vào mục menu đang hoạt động

Giải pháp liên quan

Php – WordPress – Duy trì lớp “hoạt động” trên mục menu chính

nếu bạn muốn trình đơn thả xuống ông bà hoạt động khi mục menu con đang hoạt động, thì bạn có thể kiểm tra trình đơn hiện tại hoặc tổ tiên trang hiện tại. trong trường hợp của bạn, tôi nghĩ việc kiểm tra tổ tiên trên menu hiện tại là thuận lợi nhất

function special_nav_class($classes, $item){
     if( in_array('current-menu-item', $classes) || in_array('current-menu-ancestor', $classes) ){
             $classes[] = 'active ';
     }
     return $classes;
}

Tôi hy vọng điều này sẽ giúp ích, chúc một ngày tốt lành. )

WordPress – Lớp “current-menu-item” được thiết lập tùy chỉnh cho các trang cụ thể trong WP

Bạn có thể sử dụng bộ lọc và kiểm tra xem bạn hiện đang ở trang nào bằng cách sử dụng các câu lệnh có điều kiện và thêm các lớp trước khi menu được hiển thị

Hệ thống menu WordPress cốt lõi xác định trạng thái mục menu hiện tại của mỗi menu (nghĩa là mục nào đang trỏ đến trang hiện đang xem). Nó thêm ba lớp tiêu chuẩn

current-menu-item
current-menu-parent
current-menu-ancestor

Thấy.

Một số chủ đề cố gắng thay thế các lớp này chỉ bằng active. Thật tuyệt khi cố gắng đơn giản hóa, nhưng khi nó thay đổi chức năng cốt lõi mà các plugin khác phụ thuộc vào, nó sẽ gây ra sự cố

Xác định vấn đề

Nói chung, nếu một menu con mở theo mặc định khi mục chính của nó là hiện tại (và bạn chưa bật nó dưới dạng cài đặt UberMenu), thì đây là nguyên nhân. Bạn có thể xác nhận bằng cách kiểm tra đánh dấu và tìm kiếm lớp ubermenu-active trên mục menu đó (chủ đề sẽ thêm lớp active, nhưng UberMenu tự động thêm tiền tố vào đó là ubermenu-)

Hầu hết thời gian, sự cố này xảy ra khi một chủ đề hoặc plugin thêm bộ lọc vào móc nav_menu_css_class. Đây là một ví dụ

function roots_nav_menu_css_class($classes, $item) {
  $slug = sanitize_title($item->title);
  $classes = preg_replace('/(current(-menu-|[-_]page[-_])(item|parent|ancestor))/', 'active', $classes);
  $classes = preg_replace('/^((menu|page)[-_\w+]+)+/', '', $classes);
  $classes[] = 'menu-' . $slug;
  $classes = array_unique($classes);
  return array_filter($classes, 'is_element_empty');
}
add_filter('nav_menu_css_class', 'roots_nav_menu_css_class', 10, 2);

Điều này cũng có thể xảy ra nếu một chủ đề thao túng đầu ra của hàm wp_nav_menu, thông qua bộ lọc `wp_nav_menu` hoặc trực tiếp trong các mẫu chủ đề, thay thế chuỗi bằng str_replace hoặc preg_replace. Đây là thực hành rất xấu

Lưu ý rằng nếu tên lớp xuất hiện trong nguồn trang nhưng không xuất hiện trong DevTools, điều đó cho thấy rằng chúng đã bị xóa qua javascript (điều này rất hiếm gặp)

Giải pháp

Cài đặt UberMenu 3

Trong UberMenu 3, có một cài đặt trong Control Panel > General Settings > Miscellaneous > Disable Menu Item Class Filtering

Nếu các lớp đang được lọc qua bộ lọc nav_menu_css_class, điều này sẽ giải quyết được vấn đề

preg_replace hoặc str_replace

Nếu chủ đề đang chạy thay thế chuỗi trên đầu ra menu, tốt nhất bạn chỉ nên thay thế hệ thống menu của chủ đề bằng Tích hợp thủ công

Javascript

Nếu chủ đề của bạn đang xóa các lớp thông qua javascript, điều này cần được giải quyết bằng cách xóa javascript đó hoặc thay đổi đánh dấu menu để ngăn JS đó áp dụng cho UberMenu

Làm cách nào để thêm lớp đang hoạt động trong Wp_nav_menu trong WordPress?

Làm cách nào để thêm lớp đang hoạt động khi nhấp bằng javascript?

Làm cách nào để thêm lớp đang hoạt động trong menu bằng jQuery?

Tại sao menu chính của tôi không hiển thị trong WordPress?