Làm cách nào để thêm HTML tùy chỉnh vào wp_nav_menu?

Question

Tôi quen thuộc với WordPress và sử dụng hệ thống menu WordPress. Nhưng tôi đang tìm cách thêm HTML tùy chỉnh vào wp_nav_menu().

Tôi đang cố gắng để tạo ra một thực đơn như thế này:

Chú ý cách trình đơn thả xuống dưới sản phẩm có chứa một hình ảnh và một liên kết. Tôi muốn tái tạo điều này. Tôi đã xem xét một vài plugin, nhưng muốn mã nó.

Tôi không ngại mã hóa cứng hình ảnh và liên kết, nhưng tôi muốn giữ sự linh hoạt của việc sử dụng WordPress để quản lý các menu.

Answer 1

Cách WordPress đi qua các trang menu để hiển thị các mục, đang sử dụng đối tượng khung tập đi. Trong trường hợp này, lớp cụ thể cho đối tượng này được gọi là Walker_Nav_Menu. Bạn có thể tìm thấy nó trong wp-includes\nav-menu-template.php.

Walker_Nav_Menu là một lớp học khá đơn giản. Bạn có thể thấy, cách các liên kết và cấu trúc menu được xây dựng ở đó. Các hàm start_el và end_el được sử dụng để tạo các mục menu. Các hàm start_lvl và end_lvl là dành cho các menu lồng nhau. Trong phương pháp này, chúng tôi sẽ chủ yếu sử dụng start_el và end_el.

Trong bạn functions.php tạo ra một lớp, để mở rộng Walker_Nav_Menu với các phương pháp khá giống với lớp cha mẹ:

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu { 
    function start_el (&$output, $item, $depth = 0, $args = array(), $id = 0) { 
    // Copy all the start_el code from source, and modify 
    } 

    function end_el(&$output, $item, $depth = 0, $args = array()) { 
    // Copy all the end_el code from source, and modify 
    } 
} 

Trong những chức năng, các $item là bạn menu-mục, mà bạn có thể truy vấn nội dung bổ sung theo vào mục menu hiện tại, nếu bạn muốn. Lưu ý rằng tôi không bao gồm start_lvl và end_lvl, nhưng điều đó không quan trọng, vì lớp học của bạn sẽ tự động kế thừa các phương thức lớp cha mẹ, nếu không được ghi đè.

Sau đó, trong các tập tin chủ đề của bạn, bạn có thể gọi wp_nav_menu như thế này:

wp_nav_menu(array(
    'theme_location' => 'main', 
    'container' => false, 
    'menu_id' => 'nav', 
    'depth' => 1, 
    // This one is the important part: 
    'walker' => new Custom_Walker_Nav_Menu 
)); 

WordPress sẽ sử dụng lớp tùy chỉnh và chức năng của bạn, do đó bạn có thể sửa đổi những gì đang đầu ra.