Nhựt (WordPress Developer)

Xem thêm
Nhựt
2 năm trước

Menu trong WordPress

WordPress hỗ trợ hệ thống quản trị menu rất lợi hại. Bạn có thể tạo nhiều menu, nhiều thể loại từ dạng danh sách, đa cấp, hay cao cấp hơn là mega menu.

Trước khi tìm hiểu về cách sử dụng menu trong WordPress, mình có hai thuật ngữ rất quan trọng mà cần các bạn phân biệt trong khi sử dụng menu là:

  • Menu: Menu sẽ là những liên kết có sẵn của WordPress hoặc tự tạo.
  • Menu Location: Vị trí hiển thị Menu.

Như vậy bạn có thể tạo ra bao nhiêu Menu tuỳ thích, nhưng chỉ được phép hiển thị một Menu trên mỗi Menu Location.

Sử dụng Menu trong WordPress

Để sử dụng được Menu trong WordPress, bạn phải đăng ký thông qua hàm add_theme_support( 'menus' ) bạn có thể xem lại bài viết này.

Đăng ký Menu Location

Chúng ta sử dụng hàm register_nav_menu() để đăng ký một menu hoặc hàm register_nav_menus() để đăng ký nhiều menu.

Do theme của mình chỉ có một menu, nên mình chỉ cần đăng ký một Menu Location, bổ sung đoạn code sau vào functions.php:

add_action( 'init', 'register_my_menus' );
function register_my_menus() {
    register_nav_menu('primary-menu', 'Primary menu');
}

Trong trang quản trị vào Giao diện -> Menu để xem thành quả:

Menu location trong WordPress

Hiển thị Menu

Sau khi đã đăng ký Menu Location, chúng ta cần hiển thị nó ra giao diện. Bạn có thể tạo menu mới hoặc sử dụng menu đã import của theme unit test data.

Chúng ta sẽ sử dụng hàm wp_nav_menu() để hiển thị menu ra giao diện. Trong trang quản chị vào Giao diện -> Menu chọn menu cần hiển thị và check vào Menu Location muốn hiển thị.

Ở đây mình chọn menu Short của theme unit test data:

Menu WordPress

Cấu trúc menu của template như sau:

Cấu trúc menu của template

Hiển thị như sau:

Nav menu trong WordPress

Để hiển thị menu chúng ta bổ sung đoạn code sau vào file header.php, đúng chổ menu trong template HTML:

Cấu trúc menu WordPress
if ( has_nav_menu( 'primary-menu' ) ) {
    wp_nav_menu( array(
       'theme_location'  => 'primary-menu',
       'container_class' => 'masterpb-container',
       'menu_class'      => 'masterpb-menu col-xs-8',
    ) );
}

Giải thích:

  • has_nav_menu(): kiểm tra Menu Location ‘primary-menu’ có tồn tại menu hay không.
  • wp_nav_menu(): hàm hiển thị menu trong WordPress.
  • theme_location: hiển trị menu đã đăng ký ở vị trí này, trong code là ‘primary-menu’.
  • container_class: class css của thẻ bao bọc menu, mặc định là div.
  • menu_class: class css của menu, mặc định là thẻ ul.

Các giá trị trên, chúng ta cứ phân tích trong template HTML rồi gắn vào thôi.

Nav menu trong WordPress

Tuy nhiên do thiết kế của template không giống với cấu trúc của menu trong WordPress mặc định. Nên chúng ta phải custom lại thông qua Walker_Nav_Menu.

Thay đổi cấu trúc Menu WordPress thông qua Walker_Nav_Menu

Mình phân tích cấu trúc HTML thì biết được submenu của WordPress có class mặc định là '.sub-menu' con submenu của template có class là '.submenu'. Do đó dẫn đến tình trạng hiển thị không đúng với thiết kế.

Trường hợp này có 2 hướng xử lý, 1 là sửa CSS, 2 là sửa cấu trúc menu. Tuy nhiên, do đây là series Hướng dẫn lập trình Theme WordPress, nên mình sẽ dùng cách 2. Chúng ta sẽ sử dụng Walker_Nav_Menu để sửa đổi cấu trúc của menu trong WordPress.

Trước tiên chúng ta tạo file walker-nav-menu.php trong folder includes với nội dung như sau:

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_lvl( &$output, $depth ) {
        $indent = str_repeat( "\t", $depth );
        $output .= "\n$indent<ul class=\"submenu\">\n";
    }
}

Walker_Nav_Menu còn có thể can thiệp sâu vào Menu trong WordPress, tuy nhiên ở bài này mình chỉ cần đổi class của submenu từ '.sub-menu' sang '.submenu' nên chỉ cần đoạn code đơn giản như thế. Mình sẽ có một bài chi tiết về Walker_Nav_Menu.

Tiếp theo bổ sung dòng code bên dưới vào đầu file functions.php:

require_once get_theme_file_path() . '/includes/walker-nav-menu.php';

Sau đó bổ sửa lại hàm wp_nav_menu như sau:

if ( has_nav_menu( 'primary-menu' ) ) {
    wp_nav_menu( array(
        'theme_location'  => 'primary-menu',
        'container_class' => 'masterpb-container',
        'menu_class'      => 'masterpb-menu col-xs-8',
        'walker' => new My_Walker_Nav_Menu()
    ) );
}

Và đây là thành quả:

Walker_Nav_Menu