Cách thêm lớp trong menu WordPress li a
|
Một chức năng WordPress wp_nav_menu xuất ra một danh sách không có thứ tự, liệt kê các mục và neo của menu trong tài liệu HTML Show
Các ul, li và “a” đi kèm với các lớp WordPress CSS Điều này có thể phá hủy cấu trúc thiết kế HTML vì các lớp không có quy tắc nào được viết theo kiểu. tập tin css Vì vậy, bạn buộc phải viết lại mã CSS bằng cách sử dụng các lớp và id do wp_nav_menu mang lại Sẽ là một ý tưởng tồi nếu bạn định tạo nhiều điều hướng với các bố cục khác nhau  It is possible to use wp_nav_menu to add a custom class to ul, li and a(anchor tag) by creating function in functions.php file, and use get_nav_menu_locations, wp_get_nav_menu_object and wp_get_nav_menu_items to get the title for each list item. The function allows to add CSS classes to Tôi sẽ hiển thị toàn bộ mã về cách tôi đã sử dụng thủ thuật để thêm nhiều menu điều hướng trên trang chỉ mục Điều hướng đầu tiên sử dụng wp_nav_menu với các lớp WordPress Nhưng điều hướng thứ hai thì khác vì tôi đã thêm lớp tùy chỉnh của riêng mình vào tất cả các mục của wp_nav_menu Nếu tôi không thể thêm lớp tùy chỉnh của mình vào ul, li và a, neo, bố cục điều hướng thứ hai sẽ giống với điều hướng đầu tiên Làm cách nào để thêm lớp vào tất cả các mục trong danh sách và các thẻ neo của nó?Để thêm tên lớp của bạn cho các thành phần điều hướng như danh sách không có thứ tự, yêu cầu mã phải được viết trong các hàm. php Vậy ngay bây giờ bạn sẽ thao tác với file này và làm theo quy trình sau Tạo một chức năng mới và gọi nó là bất kỳ tên nào bạn thíchTôi đã tạo một hàm có tên là hàm của tôi my_custom_menu_class() Tạo một chức năng mô tả để dễ dàng tham khảo Mặc du. bất kỳ kiểu đặt tên chức năng nào cũng có thể được sử dụng Bên trong chức năng của bạn, khai báo tên của vị trí menu mà bạn muốn danh sách các mục của nó
Bạn có thể lấy tên vị trí của menu trong trang quản trị WordPress tại Giao diện->Menu Có một danh sách các vị trí menu có nhãn “VỊ TRÍ HIỂN THỊ” Mỗi vị trí menu có các hộp kiểm để đưa ra lựa chọn Thật không may, tên menu bạn thấy không thể hoạt động ở đây Điều cần thiết là một chỉ mục của tên menu cụ thể Đó là chỉ mục được sử dụng để đăng ký tên của menu bạn nhìn thấy trên trang menu Để tìm chỉ mục của một menu cụ thể, hãy tìm hàm register_nav_menus Trong chức năng của tôi. php, register_nav_menus trông như thế này
Vì vậy, phần chính là chỉ mục của MENU CHÍNH và chân trang là chỉ mục của MENU FOOTER Do đó, nếu tôi khai báo my_menu_name, tôi sẽ đặt my_menu_name= ‘primary’ Kiểm tra các vị trí menu đã chọn nếu chúng tồn tạiSử dụng get_nav_menu_locations trong câu lệnh điều kiện if để kiểm tra các vị trí
Nếu các menu vị trí tồn tại, điều này sẽ đưa bạn đến bước tiếp theo Truy xuất một menu cụ thể bằng cách tạo một đối tượng menu từ vị trí menuSử dụng hàm Một hàm nhận đối tượng vị trí menu Tôi đã tạo một biến vị trí menu là Vì vậy, bạn cần lấy một vị trí menu do đó sử dụng mảng $menu_locations để truy cập MENU CHÍNH (bất kỳ menu nào) Do đó, để có được vị trí menu đã chọn Sau đó, hàm Bạn cần khai báo biến đối tượng menu tham chiếu hàm
Đối tượng Tạo đối tượng để truy xuất từng giá trị mục menu bằng wp_get_nav_menu_itemsTruyền vào term_id bằng cách sử dụng đối tượng $the_menu Mỗi mục danh sách menu sử dụng ID để truy xuất một số giá trị
Khai báo một biến chuỗi khởi tạo vùng chứa menuA menu container here is navigation menu element
Thêm thuộc tính lớp CSS tùy chỉnh của bạn vào thẻ điều hướng nếu bạn có Ví dụ, Concatenate $list_of_items to ‘’,and add a custom class to ul
Danh sách không có thứ tự là nơi chứa nhiều mục danh sách của menu Bạn nên lặp lại toàn bộ vùng chứa để lấy giá trị của mọi mục menu Tạo vòng lặp foreach để truy cập từng mục trong menu đã chọnSử dụng đối tượng $items_in_menu để lấy tên mục danh sách và liên kết của menu Use $items_in_menu title constant to get the name of item
Truy xuất tên của từng thành phần menu
Truy xuất URL của từng mục có trên menu
Concatenate $list_of_items with and as well as $list_item_title.Ngoài ra, hãy thêm lớp tùy chỉnh của bạn vào cả thẻ li và thẻ neo Nhưng hãy nhớ viết $menu_item_url trong thuộc tính anchor href cho URL của mục menu cụ thể
Đóng vòng lặp foreachSau đó, thêm $list_of_items với thẻ đóng ul và nav $list_of_items. = ‘’ Ghi chú. Nối các phần tử này bên ngoài vòng lặp foreach Xuất $list_of_items bằng echotiếng vang $list_of_items Điều này sẽ hiển thị HTML sau khi một phương thức được cấy vào trang chỉ mục WordPress và các trang khác Một mã hoàn chỉnh của chức năng này sẽ thêm lớp tùy chỉnh vào ul và a là… hàm my_custom_menu_class(){ $my_menu_name= ‘your_menu_location_id_name’; if($menu_locations= get_nav_menu_locations() && isset($menu_locations[$my_menu_name])){ $the_menu= wp_get_nav_menu_object( $menu_locations[$my_menu_name]); $items_in_menu = wp_get_nav_menu_items($the_menu ->term_id); $list_of_items = ‘ $list_of_items.= ‘
foreach((array)$items_in_menu as $key => $menu_item_values) { $list_item_title = $menu_item_values->title; $menu_item_url = $menu_item_values->url; $list_of_items.= ‘ } $list_of_items. = ‘ }khác{ echo 'không tồn tại vị trí menu như vậy, vui lòng tạo một vị trí mới'; } tiếng vang $list_of_items; } Triển khai my_custom_menu_class() trong chỉ mục. phpBạn cũng có thể thực hiện insingle. php, trang. php và các tệp khác của WordPress Gọi chức năng mà bạn muốn menu hiển thị trong tệp tương ứng Việc thực hiện phương pháp được thực hiện khác nhau mở chỉ mục. php Sau đó, đi đến phần mà bạn sẽ triển khai một menu Vì vậy, hãy viết đoạn mã sau
Sau đó Mở trình duyệt Bạn sẽ thấy menu của mình với một lớp tùy chỉnh Nguồn của trang khi điều hướng sẽ hiển thị mã HTML cho điều hướng với một lớp tùy chỉnh Đây là những gì tôi muốn nói Lớp tùy chỉnh của tôi cho li là “darasa_langu” Nhân tiện, blog sử dụng localhost tại thời điểm viết bài này Tại sao tôi chưa sử dụng trực tiếp wp_nav_menu để thêm lớp vào ul aTôi muốn có một thực đơn rất linh hoạt Một menu cho phép tôi tự do thêm các lớp trên bất kỳ phần tử HTML nào bên trong điều hướng wp_nav_menu sẽ cần thêm các lớp bằng cách sử dụng các phần tử mảng Điều này sẽ khiến tôi gặp khó khăn khi viết một menu rất tùy chỉnh Nói chung, kỹ thuật này hoạt động trên tất cả các phiên bản WordPress Và nó rất dễ thực hiện Tôi đã đọc một giải pháp khác để giải quyết vấn đề này nhưng tôi không thích chúng Các đối số wp_nav_menu khó hiểu Kiểm tra wp_nav_menu, tìm hiểu kỹ Bạn sẽ biết cách sử dụng chức năng này để tùy chỉnh các lớp menu khó như thế nào Tìm giải pháp khác ở đâu để thêm lớp vào li aStackoverflow có thể cung cấp cho bạn các giải pháp khác Nhưng có vấn đề khi dựa vào StackOverflow Một số câu trả lời của StackOverflow quá cũ Một số câu trả lời đã hơn sáu tuổi Vì vậy, các mã có thể không xuất kết quả mong đợi Điều này là do WordPress cập nhật hệ thống mỗi lần Do đó, Bạn phải kiểm tra mọi giải pháp được đăng trên đó Tuy nhiên, hầu hết các câu trả lời đều có thể hoạt động nếu bạn thực hiện một số thay đổi Do đó, hiểu cách thức hoạt động của các chức năng WordPress là điều tối quan trọng Và wordpress chính thức. org cho phép người dùng bình luận Một số ý kiến có câu trả lời Nhưng giải pháp tôi đã đăng ở đây hoạt động tốt, hãy dùng thử và tận hưởng nó Phần kết luậnĐể thêm custom class vào ul, li và a có thể không cần dùng wp_nav_menu. Bạn có thể thêm nó bằng cách kết hợp các chức năng của WordPress Việc sử dụng các hàm get_nav_menu_locations, wp_get_nav_menu_object và wp_get_nav_menu_items giúp linh hoạt thêm lớp vào bất kỳ thành phần nào bên trong vùng chứa điều hướng Làm cách nào để thêm lớp trong sử dụng Wp_nav_menu() trong WordPress?Thêm lớp trên li bằng wp_nav_menu()
Lớp CSS trong WordPress là gì?Cascading Style Sheets (CSS) là một trong những ngôn ngữ quan trọng nhất trong thiết kế web. Thực hiện các chỉnh sửa CSS cho trang web của bạn cho phép bạn tùy chỉnh giao diện, bố cục, phông chữ, màu sắc, v.v. CSS cung cấp khả năng kiểm soát hoàn toàn hơn đối với giao diện trang web của bạn so với chủ đề của bạn – và không khó để làm việc với nó. |
