Tự động thêm Danh mục con làm menu phụ trong mục menu Danh mục mẹ

Giả sử bạn tạo danh mục bài viết Lập trình và thêm nó vào thanh menu trang web của bạn. Sau đó, bạn sẽ thêm một số danh mục phụ như PHP, CSS, HTML, JQuery, v.v. trong danh mục Lập trình. Bạn không cần phải thêm chúng theo cách thủ công từ trang Menu (Giao diện -> Menu). Các danh mục phụ này và bất kỳ danh mục con nào trong tương lai của Danh mục lập trình sẽ tự động thêm dưới dạng các mục menu phụ trong mục menu chính Lập trình trên menu chính của trang web của bạn.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách bạn sẽ có được điều này cho trang web của mình.

Thêm danh mục vào menu chính

  1. Điều hướng đến Giao diện -> Trang menu
  2. Nhấp vào hộp Danh mục
  3. Đánh dấu chọn vào (các) hộp kiểm danh mục
  4. Nhấp vào nút Thêm vào Trình đơn
  5. Chọn Vị trí hiển thị nếu bạn chưa chọn
  6. Nhấp vào Menu Lưu
Theo ảnh chụp màn hình, bạn có thể thấy rằng tôi chỉ thêm danh mục chính. Bạn sẽ thực hiện quy trình tương tự và có thể thêm nhiều danh mục mẹ vào menu của mình. Nếu có bất kỳ danh mục phụ nào của danh mục mẹ, nó sẽ tự động thêm dưới dạng các mục menu phụ ở giao diện người dùng.

Ngoài ra, tôi đặt Menu chính của vị trí hiển thị . Bạn có thể chọn một vị trí khác nếu có.

Thêm đoạn mã PHP

Với chương trình PHP, chúng ta sẽ thêm các danh mục con vào (các) mục menu danh mục mẹ. Trong WordPress có một bộ lọc walker_nav_menu_start_el lọc đầu ra bắt đầu của một mục menu. Nó đang chấp nhận 4 tham số:
  1. $ item_output: ( string ) Đầu ra HTML bắt đầu của mục menu.
  2. $ item: ( WP_Post ) Đối tượng dữ liệu mục menu.
  3. $ depth: ( int ) Độ sâu của mục menu. Dùng để đệm lót.
  4. $ args: ( stdClass ) Một đối tượng của các đối số wp_nav_menu () .
Móc bộ lọc như thế này add_filter( 'walker_nav_menu_start_el', 'my_callback_function', 10, 4 );. Bên trong hàm gọi lại, lấy danh sách tất cả danh mục phụ của danh mục mẹ bằng hàm wp_list_categories .

Bạn sẽ thêm mã vào đâu?
Bạn có thể thêm mã vào tệp functions.php của chủ đề hoặc bất kỳ tệp PHP nào của plugin tùy chỉnh của bạn.

Mã đầy đủ

add_filter( 'walker_nav_menu_start_el', 'paulc_add_subcategories_under_parent_category', 10, 4 );
function paulc_add_subcategories_under_parent_category( $item_output, $item, $depth, $args ) {
if( $args->theme_location == 'primary' && $item->object === 'category' && $item->type === 'taxonomy' ) {
$sub_cats = wp_list_categories( [ 'echo' => 0, 'hide_empty' => 1, 'child_of' => $item->object_id, 'title_li' => '' ] );
if( ! empty( $sub_cats ) ) {
$class = "menu-item menu-item-object-{$item->object} menu-item-type-{$item->type}";
$sub_cats = preg_replace( '#<ul\sclass=([^>]*)>#', '<ul class="sub-menu">', $sub_cats );
$sub_cats = preg_replace( '#<li\sclass="([^>]*)">#', '<li class="' . $class . ' $1">', $sub_cats );
$item_output .= '<ul class="sub-menu">' . "\n";
$item_output .= $sub_cats;
$item_output .= '</ul>' . "\n";
}
}

return $item_output;
}

Giải thích mã:

  1. $ args-> theme_location đang kiểm tra vị trí hiển thị. Tôi muốn cho vị trí menu chính. Vì vậy, tôi đang kiểm tra xem có bất kỳ menu nào đang hoạt động ở vị trí chính hay không. "Chính" là slug vị trí. Nó sẽ là duy nhất. Bạn sẽ thay thế slug chính bằng slug vị trí chủ đề của riêng mình, nếu nó khác trong chủ đề của bạn.
  2. Có một mục menu danh mục trong menu? $ item-> biến đối tượng đang kiểm tra nó.
  3. wp_list_categories đang tạo danh sách HTML của các danh mục. Điều này đang nhận một tham số dưới dạng một mảng. Đây là các mục sau đây được sử dụng:
    1. echo: Lưu danh sách danh mục vào một biến để sử dụng trong tương lai. Vì vậy, tham số echo được đặt là false.
    2. hide_empty: Không hiển thị các danh mục phụ không có bất kỳ bài đăng nào. Vì vậy, nó được đặt thành 0.
    3. child_of: Nó đang sử dụng ID danh mục chính.
    4. title_li: Theo mặc định, tiêu đề là Danh mục . Không cần tiêu đề ở đây. Do đó, nó được đặt là null.
  4. Nếu một danh mục có danh mục phụ, tôi sẽ bao bọc danh sách danh mục bằng <ul class="sub-menu"></ul> đánh dấu HTML. Trong Menu WordPress, tất cả các mục menu phụ được gói bằng <ul class="sub-menu"></ul>
  5. Sau đó, trả lại biến $ item_output đã cập nhật