Trong hầu hết các trường hợp khi tạo kiểu menu WordPress, bạn chỉ cần thêm các lớp CSS từ bảng quản trị WordPress. Gần đây trong khi làm việc cho một dự án, chúng tôi thấy mình đang gặp 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 trình đơn cụ thể chỉ trên các trang đăng bài đơn lẻ. Sau khi tìm kiếm xung quanh một lúc, chúng tôi không thể tìm thấy bất kỳ giải pháp. Phương án 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 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 tìm kiếm trong lõi cho một thời gian, chúng tôi tìm ra các giải pháp. Những gì bạn cần làm là dán mã sau vào tệp functions.php của bạn:
// Lọc một Lớp trong Danh mục Điều hướng
add_filter ('nav_menu_css_class', 'special_nav_class', 10, 2);
hàm special_nav_class ($ lớp, $ item) {
if (is_single () && $ item-> title == 'Blog') {
$ classes [] = 'mục trình đơn hiện tại';
}
trả về $ lớp học;
}
Mã trên chỉ đơn giản là kiểm tra nếu nó là một trang đăng bài, và tiêu đề mục trình đơn là Blog. Nếu các tiêu chí được kết hợp, thì nó sẽ thêm một lớp “Current-menu-item”. Chúng ta cần thêm một lớp tuỳ chỉnh để làm cho nó hoạt động với thiết kế này mà chúng ta đang làm việc.
Nếu bạn không thể nói được, về cơ bản điều chúng tôi muốn làm là giữ cho mục blog được đánh dấu trong trình đơn khi người dùng đang ở trên một bài đăng. Điều này cho phép họ thấy rằng các bài đăng duy nhất là một phần của blog. Điều này thông thường không có ý nghĩa, nhưng trong thiết kế mà chúng tôi đang làm việc trên, 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 đã 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 báo 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 CSS Body classes. Ví dụ:
.single #navigation .leftmenublog div (hiển thị: inline-block; quan trọng;}
Về cơ bản những gì chúng tôi đã làm được thêm một div bổ sung để hiển thị một biểu tượng mũi tên để trình đơn của chúng tôi. Mũi tên này sẽ chỉ được hiển thị nếu lớp học đã được hovered, hoặc lựa chọn. Nếu không nó đã được thiết lập để hiển thị: không có; Bằng cách sử dụng lớp cơ thể, chúng tôi chỉ làm cho phần tử div hiển thị chỉ cho lớp trình đơn cụ thể.