Tuỳ chỉnh menu Wordpress với Class Walker_Nav_Menu

Khi thêm menu vào theme WordPress bằng hàm register_nav_menu và hiển thị với wp_nav_menu, menu sẽ có cấu trúc mặc định với các menu con nằm trong thẻ <ul> có class sub-menu và mỗi thẻ <li> sẽ có class riêng.

Walker_Nav_Menu

Phương thức start_lvl()

• Được sử dụng để hiển thị các thẻ bắt đầu cho cấu trúc của một cấp độ mới trong menu (ví dụ: <ul class="sub-menu">).
• $output: Chuỗi này được sử dụng để thêm nội dung vào phần hiển thị ra bên ngoài.
• $depth: Xác định cấp độ hiện tại của menu, với cấp độ 0 là cấp cao nhất.
• $args: Chứa các tham số được truyền vào từ hàm wp_nav_menu().

Phương thức end_lvl()

• Được sử dụng để hiển thị các thẻ kết thúc cho cấu trúc của một cấp độ mới trong menu (ví dụ: </ul>).
• $output: Chuỗi này được sử dụng để thêm nội dung vào phần hiển thị ra bên ngoài.
• $depth: Xác định cấp độ hiện tại của menu, với cấp độ 0 là cấp cao nhất.
• $args: Chứa các tham số được truyền vào từ hàm wp_nav_menu().

Phương thức start_el()

• Được sử dụng để hiển thị đoạn bắt đầu của một phần tử trong menu (ví dụ: <li id="menu-item-5">).
• $output: Chuỗi này được sử dụng để thêm nội dung vào phần hiển thị ra bên ngoài.
• $data_object: Chứa dữ liệu của các phần tử trong menu.
• $depth: Xác định cấp độ hiện tại của menu, với cấp độ 0 là cấp cao nhất.
• $args: Chứa các tham số được truyền vào từ hàm wp_nav_menu().
• $current_object_id: ID của phần tử menu hiện tại.

Phương thức end_el()

• Được sử dụng để hiển thị đoạn kết thúc của một phần tử trong menu (ví dụ: </li>).
• $output: Chuỗi này được sử dụng để thêm nội dung vào phần hiển thị ra bên ngoài.
• $data_object: Chứa dữ liệu của các phần tử trong menu.
• $depth: Xác định cấp độ hiện tại của menu, với cấp độ 0 là cấp cao nhất.
• $args: Chứa các tham số được truyền vào từ hàm wp_nav_menu().
• $current_object_id: ID của phần tử menu hiện tại.

Để tùy biến cấu trúc menu trong WordPress mà không phải chỉnh sửa trực tiếp mã nguồn, bạn có thể tạo một lớp mới kế thừa từ Walker_Nav_Menu. Cụ thể, bạn sẽ tạo lớp VNEngineer_Nav_Walker của riêng mình, kế thừa từ Walker_Nav_Menu, và tùy chỉnh lại các phương thức như start_lvl(), start_el(), v.v., để thay đổi cấu trúc hiển thị theo ý muốn.

Toàn bộ mã của lớp Walker_Nav_Menu có thể được xem từ dòng 10 đến dòng 191 trong tập tin /wp-includes/nav-menu-template.php của mã nguồn WordPress. Việc xem xét các đoạn mã này sẽ giúp bạn hiểu cách thức hoạt động của nó và dễ dàng thực hiện các tùy chỉnh cần thiết cho lớp mới của mình.
Lưu ý rằng khi tùy biến lớp Walker_Nav_Menu, bạn chỉ cần khai báo lại những phương thức mà bạn muốn thay đổi. Không cần phải khai báo lại toàn bộ các phương thức của lớp gốc. Tuy nhiên, nếu bạn quyết định tùy chỉnh một phương thức, bạn phải viết lại nó chính xác như đã được định nghĩa trong /wp-includes/nav-menu-template.php. Bất kỳ sai sót hoặc thiếu sót nào trong việc khai báo phương thức sẽ dẫn đến lỗi trong quá trình thực thi.

Với các menu đơn giản từ 1 đến 2 cấp độ, bạn có thể sử dụng Walker_Nav_Menu và wp_nav_menu để tùy chỉnh thông qua các tham số như class và các thẻ bao HTML. Tuy nhiên, nếu bạn cần làm việc với menu đa cấp phức tạp, có cấu trúc thẻ và thuộc tính phức tạp, thì cách tốt hơn là sử dụng hàm để lấy thông tin mảng dữ liệu của các menu đã cấu hình trong admin. Từ đó, bạn có thể tùy chỉnh và tạo giao diện menu theo nhu cầu của mình một cách linh hoạt hơn. Xem thêm bài viết: Lấy mảng dữ liệu các mục menu trong Wordpress

• Wordpress
• PHP