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 3Trong 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 đề
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
JavascriptNế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