Hướng dẫn cách tạo menu trong WordPress đơn giản

Menu là một thành phần rất quan trọng và không thể thiếu của một website. Menu thường có nhiều dạng, như là menu 1 cấp, menu đa cấp, menu phù hợp kích thước màng hình (menu responsive),… Trong bài này mình sẽ chia sẻ cách để viết menu responsive 1 cấp cho giao diện website wordpress sử dụng bootstraps rất đơn giản.

Trong bài Thiết kế giao diện website với bootstraps mình có nói về phần tạo một menu responsive sử dụng bootstraps rồi. Nếu bạn chưa xem có thể xem lại và tạo cho mình một menu tương tự như thế. Với dạng menu đó nó có thể phù hợp với rất nhiều loại màng hình kích thước khác nhau. Và để tạo một menu có thể tùy chỉnh tốt hãy đọc kỹ bài viết này.

Đăng ký menu location.

Menu location là gì và tại sao phải đăng ký nó, đăng ký nó như thế nào?. Menu location dịch ra có nghĩa là vị trí menu. WordPress cho phép người dùng có thể tạo ra nhiều menu khác nhau ở nhiều vị trí khác nhau. Bạn có thấy một vài website có 2 menu khác biệt thường là nằm trên và dưới website không. Nhưng có một menu thì cần gì. Mình không cho rằng đăng ký menu location là thừa đâu, vì ngoài việc làm website của bạn trông chuyên nghiệp hơn thì điều này sẽ giúp website của bạn mở rộng hơn sau này nữa đấy. Ok dài dòng quá mình bắt tay làm thôi.

Hãy mở file có tên “functions.php” lên và code 2 đoạn sau vào.

Nếu bạn không biết file “functions.php” ở đâu có thể xem lại bài viết Hướng dẫn viết theme wordpress căn bản nhé

add_theme_support( 'menus' );

register_nav_menus(
   array(
       'main-nav' => 'Menu chính' ) );

Giải thích tí:

• Cái “add_theme_support” là để bạn khai báo rằng themes của bạn có hỗ trợ menu. Nó giống việc khai báo website có hỗ trợ post thumbnail trong bài Hướng dẫn viết theme wordpress căn bản mình đã có đề cập. cái “main-nav” là id của menu và “Menu chính” là tên nhé.
• “register_nav_menus” là cái đã để đăng ký vị trí menu, trong mảng array bạn có thể tạo ra nhiều vị trí khác nhau.

Khi làm xong điều trên bạn vào phần Giao diện => Tùy chỉnh => Menu => Vị trí trình đơn, bạn sẽ thấy có một cái menu chính ở đấy.

Bây giờ bạn quay Giao diện => Menu. Bạn tạo một trình đơn tùy ý và chọn Hiển thị vị trí là menu chính sau đó lưu lại.

Đưa menu hiển thị ngoài themes

Hãy xác định vị trí menu của bạn trước khi đưa code vào thay thế nhé.

Bây giờ hãy thay đoạn code trên thành đoạn bên dưới đây nhé

 <ul class="nav navbar-nav">

    <?php 
         $menuLocations = get_nav_menu_locations(); 
         $menuID = $menuLocations['main-nav']; 
         $primaryNav = wp_get_nav_menu_items($menuID); 
       foreach ( $primaryNav as $navItem ) {
          echo '<li> <a href="'.$navItem->url.'" title="'.$navItem->title.'">'.$navItem->title.'</a> </li>';
     }?>
 <!--li><a href="#">Trang chủ</a></li>
 <li><a href="#">Tin tức</a></li>
 <li><a href="#">Về chúng tôi</a></li>
 <li><a href="#">Giới thiệu</a></li>
 <li><a href="#">Liên hệ</a></li-->
 </ul>

Minh comment lại các thẻ li cũ để nó không hiện nữa nhé.

Mình giải thích về đoạn code trên tí nhé, à lưu ý là cách này không thể sử dụng menu đa cấp được đâu nhé.

• $menuLocations: Lấy ra các vị trí của menu.
• $menuID: Tìm ID của menu main-nav mình đã đăng ký ở file “functions.php”
• $primaryNav: sẽ lấy ra các item trong menu được chỉ định ở trên.
• vòng lặp foreach sẽ lấy các item và đưa vào thẻ li các thông tin như link url, và title.

Như vậy là bạn có thể tùy chỉnh được menu của mình ngay trên wp-admin mà không phải can thiệp code nữa rồi nhé. Mà bạn nhớ là cách trên không thể sử dụng được cho menu đa cấp đâu nhé. Nếu muốn sử dụng menu đa cấp bạn hãy sử dụng hàm “wp_nav_menu()” và thiết kế lại bằng css nhé.

Chúc bạn thành công.