Trong hầu hết các trường hợp khi tạo kiểu cho menu điều hướng WordPress , bạn có thể chỉ cần thêm các lớp CSS từ bảng quản trị WordPress. Gần đây khi đang làm việc trong một dự án, chúng tôi thấy mình đang rơi vào một tình huống rắc rối. Chúng tôi muốn thêm một lớp tùy chỉnh vào một mục menu cụ thể chỉ trên các trang bài đăng đơn lẻ. Sau khi nhìn xung quanh một lúc, chúng tôi không thể tìm thấy bất kỳ giải pháp nào. Phương sách cuối cùng của chúng tôi là hỏi trên twitter. Otto (@ Otto42) trả lời bằng cách nói rằng nó có thể bằng cách sử dụng bộ lọc, nhưng không có tài liệu cho bộ lọc.
Sau khi xem xét lõi một thời gian, chúng tôi đã tìm ra giải pháp. Những gì bạn cần làm là dán đoạn mã sau vào tệp functions.php của bạn:
//Filtering a Class in Navigation Menu Item
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
if(is_single() && $item->title == 'Blog'){
$classes[] = 'current-menu-item';
}
return $classes;
}
Đoạn mã trên chỉ đơn giản là kiểm tra xem nó có phải là một trang bài đăng duy nhất hay không và tiêu đề mục menu là Blog. Nếu các tiêu chí phù hợp, thì nó sẽ thêm một lớp “Hiện-đơn-mục”. Chúng tôi cần thêm một lớp tùy chỉnh để làm cho nó hoạt động với thiết kế mà chúng tôi đang làm việc này.
Nếu bạn không thể biết được, về cơ bản những gì chúng tôi muốn làm là giữ cho mục blog được đánh dấu trong menu khi người dùng đang xem một bài đăng. Điều này cho phép họ thấy rằng các bài đăng đơn lẻ là một phần của blog. Điều này bình thường không có ý nghĩa, nhưng trong thiết kế mà chúng tôi đang làm việc, nó đã có ý nghĩa.
Nếu bạn đang tuyệt vọng tìm kiếm mã này, chúng tôi hy vọng rằng bài viết này sẽ giúp ích. Bạn cũng có thể kiểm tra các biến $ item khác. Một số ví dụ là: $ item-> ID, $ item-> title, $ item-> xfn
Chỉnh sửa nhanh: Sau khi đăng bài viết này lên twitter, một trong những người dùng của chúng tôi @dbrabyn đã chỉ ra rằng chúng tôi có thể dễ dàng thực hiện điều này với các lớp CSS Body. Ví dụ:
.single #navigation .leftmenublog div{display: inline-block !important;}
Về cơ bản những gì chúng tôi đã làm là thêm một div bổ sung để hiển thị biểu tượng mũi tên vào menu của chúng tôi. Mũi tên này sẽ chỉ được hiển thị nếu lớp được di chuột qua hoặc được chọn. Nếu không, nó được đặt thành hiển thị: không có; Bằng cách sử dụng lớp body, chúng ta chỉ hiển thị phần tử div cho lớp menu cụ thể.