Làm thế nào tôi có thể thêm một div xung quanh chứa ul wordpress

Question

Wordpress kết quả đầu ra menu con tôi bên trong tag ul này ...

<ul class="sub-menu"> 

làm thế nào tôi có thể quấn một div đơn giản xung quanh nó?

Tốt hơn là cách thực hiện thông qua hàm functions.php, nhưng jquery cũng có thể hoạt động.

Answer 1

Mặc dù sẽ dễ dàng sử dụng một thứ gì đó như jQuery để bao bọc các thực đơn con của bạn, KHÔNG thực hành tốt để sử dụng jQuery cho mục đích này. Đặt này trong functions.php:

class Child_Wrap extends Walker_Nav_Menu 
{ 
    function start_lvl(&$output, $depth = 0, $args = array()) 
    { 
     $indent = str_repeat("\t", $depth); 
     $output .= "\n$indent<div class=\"custom-sub\"><ul class=\"sub-menu\">\n"; 
    } 
    function end_lvl(&$output, $depth = 0, $args = array()) 
    { 
     $indent = str_repeat("\t", $depth); 
     $output .= "$indent</ul></div>\n"; 
    } 
} 

Tôi giả định rằng thực đơn của bạn đã được tạo ra trong tiêu đề của bạn, vì vậy hãy vào header.php (hoặc bất kỳ tập tin được sử dụng các chức năng wp_nav_menu) và tìm kiếm bất cứ thứ gì bắt đầu với "wp_nav_menu".

Vì tôi không có bất kỳ mã nào để xem, tôi chỉ có thể đoán các đối số mà nó đang sử dụng (nếu có). Nếu nó trông giống hệt như "wp_nav_menu()" không có gì ở giữa dấu ngoặc đơn, sau đó thay đổi nó như sau:

wp_nav_menu(array('walker' => new Child_Wrap())) 

Nếu không, hãy chỉnh sửa câu hỏi của bạn với mã mà thực đơn của bạn đang sử dụng vì vậy tôi có thể giúp bạn thêm nữa.

Answer 2

Trong function.php

class Child_Wrap extends Walker_Nav_Menu 
{ 
    function start_lvl(&$output, $depth) 
    { 
     $indent = str_repeat("\t", $depth); 
     $output .= "\n$indent<div class=\"sub-menu-wrapper\"><ul class=\"sub-menu\">\n"; 
    } 
    function end_lvl(&$output, $depth) 
    { 
     $indent = str_repeat("\t", $depth); 
     $output .= "$indent</ul></div>\n"; 
    } 
} 

Gọi đến chức năng nơi wp_nav_menu của bạn có vị trí. (Ví dụ: header.php)

$defaults = array('container' => 'ul', 'menu_class' => 'scroll', 'menu_id' => 'main-menu-nav' , 'walker' => new Child_Wrap()); 

wp_nav_menu($defaults); 

Nếu bạn muốn làm điều này bằng jquery , bạn có thể làm điều này như sau.Nhưng cách tốt nhất là phương pháp đầu tiên. Ở đây đôi khi hiển thị như trình đơn sai lầm khi tải trang.

jQuery('ul.sub-menu').wrap('<div class="sub-menu-wrapper" />');