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
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 ,
- ,
- and manually, so you can add your CSS classes manually on these elements.
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ích
Tô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ó
$my_menu_name= ‘your_menu_location_id_name’
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
register_nav_menus[array[
'primary'=>_['PRIMARY MENU'],
'footer'=>_['FOOTER MENU']]];
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ại
Sử dụng get_nav_menu_locations trong câu lệnh điều kiện if để kiểm tra các vị trí
if[$menu_locations= get_nav_menu_locations[]]
get_nav_menu_locations
trả về một mảng các đối tượng menu, do đó hãy kiểm tra xem đối tượng $my_menu_name của $menu_locations có tồn tại khôngif[$menu_locations= get_nav_menu_locations[] && isset[$menu_locations[$my_menu_name]]]
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í menu
Sử dụng hàm
wp_get_nav_menu_object
WordPress để tạo đối tượng menuMột hàm nhận đối tượng vị trí menu
Tôi đã tạo một biến vị trí menu là
$menu_locations.
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
use $menu_locations[$my_menu_name]
Sau đó, hàm
register_nav_menus[array[
0 đếnwp_get_nav_menu_object
Bạn cần khai báo biến đối tượng menu tham chiếu hàm
wp_get_nav_menu_object
register_nav_menus[array[
3Đối tượng
register_nav_menus[array[
4 giúp truy cập ID của từng mục menu như tiêu đề mục và liên kết của mục menuTạo đối tượng để truy xuất từng giá trị mục menu bằng wp_get_nav_menu_items
Truyề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ị
register_nav_menus[array[
5Khai báo một biến chuỗi khởi tạo vùng chứa menu
A menu container here is navigation menu element
register_nav_menus[array[
6Thê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ụ,
register_nav_menus[array[
7Concatenate $list_of_items to ‘
- ’,and add a custom class to ul
register_nav_menus[array[
8Danh 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ọn
Sử 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
- and URL constant to get the link of the menu for anchor tag href attribute.
register_nav_menus[array[
9Truy xuất tên của từng thành phần menu
'primary'=>_['PRIMARY MENU'],
0Truy xuất URL của từng mục có trên menu
'primary'=>_['PRIMARY MENU'],
1Concatenate $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ể
'primary'=>_['PRIMARY MENU'],
2Đóng vòng lặp foreach
Sau đó, thêm $list_of_items với thẻ đóng ul và nav
$list_of_items. = ‘
- and URL constant to get the link of the menu for anchor tag href attribute.
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 echo
tiế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.= ‘
- ;
- ’. ‘. $list_item_title. ‘ ’;
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. php
Bạ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
'primary'=>_['PRIMARY MENU'],
3
'primary'=>_['PRIMARY MENU'],
4
'primary'=>_['PRIMARY MENU'],
5
'primary'=>_['PRIMARY MENU'],
6
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 a
Tô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 a
Stackoverflow 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