Hiển thị thanh menu trong wordpress

Để thêm menu thì vào mục Appearance sau đó chọn menus. Trường hợp không thấy menus hiển thị thì thêm đoạn mã sau vào file functions của theme đang sử dụng 

add_theme_support( 'menus' );

Tiếp theo hãy tạo các menu của bạn. Nếu muốn tạo submenu thì kéo các thanh menu thụt vào trong so với các dòng khác. Khi đã có menu như hình sau thì hãy bắt đầu làm bước tiếp theo

Để hiển thị menu ngoài giao diện người dùng ta dùng đoạn code sau

<?php
			$args = [
				// 'menu' 						=> '',
				// 'container' 				=> 'div',
				// 'container_class' 			=> 'menu-categories-container',
				// 'container_id'				=> '',
				// 'menu_class'				=>'MenuBar clearfix grpelem',
				// 'menu_id'					=>'menu-categories',
                'container'                 => false,
				'echo'						=>true,
				'fallback_cb'				=>'wp_page_menu',
				'before'					=>'',
				'after'						=>'',
				'link_before'				=>'',
				'link_after'				=>'',
				'items_wrap'				=>'<ul id="%1$s" class="%2$s">%3$s</ul>',
				'depth'						=>3,
                'walker'                    => new Custom_Walker_Nav_Menu(),
				'theme_location'			=>'main-menu'
			];
			wp_nav_menu( $args );
		?>

Thành phần items_wrap chúng ta thường vẫn phải thay đổi giữa thẻ ul và thẻ div, bạn cần dựa vào bản html của mình để xem menu của bạn đang dùng thẻ gì để thay vào cho đúng, chỉ thay cái tên thẻ thôi còn các ký hiệu mã hóa để nguyên như trên.

Thành phần walker để chúng ta custom lại menu theo thiết kế của mình, chúng ta tạo class có tên Custom_Walker_Nav_Menu trong file functions hoặc tách file riêng thì require vào file functions. Class này có nội dung như sau

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
    
    
    public function start_lvl( &$output, $depth = 0, $args = null ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"submenu\">\n";
        }
    
    public function end_lvl( &$output, $depth = 0, $args = null ) {
        $output .= '</ul>';
    }
    
    public function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
        $has_children = !empty($item->has_children);
        if ($has_children) {
            $output .= '<li class="menu-item has-submenu">';
        }else{
            $output .= '<li class="menu-item">';
        }
        $output .= '<a href="' . esc_url($item->url) . '">' . esc_html($item->title) . '</a>';
    }
    
    public function end_el( &$output, $item, $depth = 0, $args = null ) {
        $output .= '</li>';
    }

    public function display_element($element, &$children_elements, $max_depth, $depth = 0, $args = null, &$output) {
        
        // Kiểm tra và gắn has_children cho từng mục menu
        $element->has_children = !empty($children_elements[$element->ID]);

        // Gọi phương thức cha để xử lý tiếp
        parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }
}

Trong phương thức start_lvl chúng ta sẽ thay đổi class của submenu, khi sử dụng có thể để nguyên nội dung hàm như vậy, chỉ thay submenu thành class của bạn.

Phương thức end_lvl thường chỉ nối thêm thẻ đóng của thẻ sử dụng ở phương thức start_lvl.

Phương thức start_el kiểm tra menu item có submenu hay không, nếu có thì thêm class has-submenu vào thẻ li

Lưu ý tên các phương thức trong class phải khai báo đúng tên như vậy thì mới ghi đè lên phương thức gốc được.

Đây là kết quả sau khi làm các bước trên.