02 cách tạo menu trong WordPress đơn giản và hiệu quả nhất

WordPress từ lâu đã nổi tiếng là hệ thống quản trị nội dung (CMS) thân thiện với người dùng, giúp việc xây dựng và điều hướng trang web trở nên trực quan và dễ dàng hơn bao giờ hết. Một trong những yếu tố quan trọng ảnh hưởng đến trải nghiệm người dùng chính là hệ thống menu – công cụ điều hướng giúp khách truy cập nhanh chóng tìm thấy nội dung họ cần. Vậy làm sao để tạo menu trong WordPress mà không cần phải là lập trình viên? Hoặc nếu bạn đã quen với code, liệu có thể tùy biến sâu hơn? Bài viết này sẽ hướng dẫn bạn chi tiết hai cách đơn giản nhưng cực kỳ hiệu quả để tạo menu trong WordPress.

Cách 1: Tạo menu trong WordPress mà không cần biết code

Nếu bạn là người mới bắt đầu hoặc đơn giản là không muốn đụng tới dòng code nào, thì đây chính là cách phù hợp nhất. Hãy cùng thực hiện từng bước:

Bước 1: Đăng nhập vào trang quản trị WordPress

Đầu tiên, bạn cần đăng nhập vào hệ thống quản trị của WordPress thông qua đường dẫn dạng: https://tên-miền-của-bạn.com/wp-admin. Tại đây, hãy nhập tên người dùng và mật khẩu rồi nhấn “Đăng nhập”.

Bước 2: Truy cập Appearance (Giao diện) > Menus (Menu)

Sau khi đăng nhập thành công, bạn sẽ nhìn thấy bảng điều khiển (Dashboard). Từ menu bên trái, chọn mục Giao diện (Appearance) > Menu (Menus) để bắt đầu quá trình tạo menu mới.

Bước 3: Tạo một menu mới

Trong giao diện quản lý menu, bạn sẽ thấy một khung tạo menu. Hãy nhập tên cho menu vào ô “Tên menu” (Menu Name) rồi nhấn nút Tạo menu (Create Menu). Bạn có thể đặt tên tùy ý, miễn không trùng với tên các menu đã tồn tại trước đó.

Bước 4: Thêm và sắp xếp các mục trong menu

1. Thêm mục vào menu:
   Ở cột bên trái, bạn sẽ thấy các lựa chọn như Trang (Pages), Bài viết (Posts), Danh mục (Categories) và Liên kết tùy chỉnh (Custom Links). Đánh dấu vào những mục bạn muốn thêm, sau đó nhấn Thêm vào menu (Add to Menu).
   
2. Sắp xếp thứ tự:
   Bạn có thể kéo-thả các mục menu để sắp xếp lại theo ý muốn. Nếu muốn tạo menu con (submenu), chỉ cần kéo mục đó xuống dưới và lệch về bên phải so với mục mẹ.
   
3. Chọn vị trí hiển thị:
   Nhấn vào Quản lý vị trí (Manage Locations) và chọn vị trí mà bạn muốn menu xuất hiện – có thể là ở đầu trang (header), cuối trang (footer), hoặc sidebar tùy vào giao diện bạn đang sử dụng.
   

Bước 5: Lưu menu

Cuối cùng, nhấn vào nút Lưu menu (Save Menu) ở góc dưới để hoàn tất quá trình. Vậy là bạn đã có một menu hoàn chỉnh mà không cần đụng đến dòng mã nào!

Cách 2: Tạo menu trong WordPress bằng code PHP

Đối với những người đã quen với lập trình hoặc muốn kiểm soát hoàn toàn giao diện và chức năng của menu, việc tạo menu bằng code là giải pháp tối ưu.

Bước 1: Đăng nhập vào hệ quản trị WordPress

Thao tác tương tự như bước 1 trong cách làm không dùng code.

Bước 2: Mở phần mềm soạn thảo mã và tạo tệp PHP mới

Bạn có thể dùng các công cụ như Visual Studio Code (VS Code) để viết mã. Mở ứng dụng, nhấn Ctrl + N để tạo tệp mới, sau đó Ctrl + S để lưu với tên như custom-menu.php. Mọi mã PHP nên được bao trong cặp thẻ <?php … ?>.

Bước 3: Khai báo hàm đăng ký menu

Trong tệp functions.php của theme (hoặc trong plugin bạn tạo), thêm đoạn mã sau để đăng ký các vị trí menu:

function custom_theme_menus() {

    register_nav_menus(

        array(

            ‘primary-menu’ => __( ‘Primary Menu’ ),

            ‘footer-menu’  => __( ‘Footer Menu’ )

        )

    );

}

add_action( ‘after_setup_theme’, ‘custom_theme_menus’ );

Bước 4: Hiển thị menu trong template

Sau khi bạn đã đăng ký các vị trí menu trong file functions.php ở bước trước, thì menu đó vẫn chưa tự động hiển thị ra giao diện trang web. Bạn cần phải đưa đoạn mã hiển thị menu vào file giao diện (template) như header.php, footer.php, hoặc bất kỳ file nào bạn muốn menu hiển thị.

Cách thực hiện chi tiết:

Bước 4.1: Mở file template muốn hiển thị menu

Thông thường, menu chính sẽ nằm trong file header.php, vì đó là phần đầu trang xuất hiện ở mọi trang của website.

• Mở thư mục theme của bạn: wp-content/themes/tên-theme-của-bạn/
  
• Tìm và mở file header.php (hoặc footer.php, nếu bạn muốn đặt menu ở chân trang)
  

Bước 4.2: Thêm đoạn mã sau vào vị trí bạn muốn menu hiển thị:

<?php

    wp_nav_menu(

        array(

            ‘theme_location’  => ‘primary-menu’, // Tên vùng menu đã đăng ký ở bước 3

            ‘menu_class’      => ‘menu-class’, // Tên lớp CSS cho menu (bạn tự đặt)

            ‘container_class’ => ‘container-class’, // Lớp bao quanh menu (tùy chọn)

        )

    );

?>

Giải thích từng dòng:

• theme_location => ‘primary-menu’: Đây là tên vùng menu mà bạn đã đăng ký trong file functions.php. Nếu bạn đặt tên là ‘header-menu’, bạn phải sửa đúng tên ở đây.
  
• menu_class => ‘menu-class’: Đây là tên class CSS để bạn có thể tùy chỉnh giao diện menu (không bắt buộc, bạn có thể bỏ qua).
  
• container_class => ‘container-class’: Là lớp CSS cho phần bọc bên ngoài menu – giúp bạn điều chỉnh bố cục dễ dàng hơn.
  

Ví dụ cụ thể:

Giả sử bạn muốn tạo menu chính ở phần đầu trang, đoạn code thêm vào header.php sẽ trông như sau:

<nav class=”main-nav”>

    <?php

        wp_nav_menu(

            array(

                ‘theme_location’  => ‘primary-menu’,

                ‘menu_class’      => ‘menu-main’,

                ‘container_class’ => ‘menu-container’

            )

        );

    ?>

</nav>

Sau đó, bạn có thể dùng CSS để chỉnh sửa giao diện:

.menu-main {

    list-style: none;

    display: flex;

    gap: 20px;

}

.menu-main li a {

    text-decoration: none;

    color: #333;

}

Ghi nhớ:

• Nếu bạn không thấy menu hiển thị, hãy kiểm tra tên theme_location có khớp với tên bạn đã đăng ký không.
  
• Hãy chắc chắn menu đã được gán cho đúng vị trí trong Giao diện > Menu > Quản lý vị trí (Manage Locations).

Bước 5: Lưu và kiểm tra kết quả

Lưu tệp bằng Ctrl + S. Sau đó, truy cập trang web để xem menu đã được hiển thị đúng chưa. Nếu không xuất hiện, hãy kiểm tra lại tên vị trí menu trong đoạn mã có trùng khớp với tên đã đăng ký ở bước 3 hay không.

Lưu ý:
Chỉ khi hiểu cấu trúc theme WordPress, bạn mới có thể linh hoạt chèn menu vào đúng vị trí mong muốn.

Câu hỏi thường gặp (FAQs)

Làm thế nào để xóa một menu trong WordPress?

Vào Giao diện > Menu, chọn menu muốn xóa, sau đó nhấn Xóa menu (Delete Menu). Xác nhận bằng cách chọn “OK”.

Tôi có thể đổi tên menu không?

Hoàn toàn được! Truy cập vào menu cần đổi, chỉnh sửa ô “Tên menu” và nhấn Lưu menu (Save Menu).

Làm sao thêm biểu tượng cho mục menu?

Hãy cài plugin Menu Icons, sau đó tại mỗi mục menu sẽ xuất hiện biểu tượng ngôi sao – nơi bạn có thể chọn biểu tượng từ Dashicons, Font Awesome hay SVG.

Một menu có thể xuất hiện ở nhiều vị trí không?

Có thể. Truy cập Giao diện > Menu > Quản lý vị trí, gán cùng một menu cho nhiều vị trí khác nhau như header, footer hoặc sidebar.

Làm sao kiểm tra lỗi mã PHP trong VS Code?

Cài extension PHP Intelephense, mở tệp PHP trong VS Code, bạn sẽ thấy gợi ý, cảnh báo hoặc lỗi hiện ở mục Problems (Ctrl + Shift + M).

Bảng so sánh nhanh giữa 2 cách tạo menu

Sai lầm thường gặp khi tạo menu WordPress

• Quên gán vị trí hiển thị cho menu: Điều này khiến menu đã tạo không hiển thị trên website.
  
• Dùng tên vị trí không khớp: Trong phần code, nếu tên ‘theme_location’ không khớp với tên đã đăng ký, menu sẽ không hoạt động.
  
• Tạo menu con sai cách: Menu con cần được kéo lệch sang phải dưới menu cha.
  

Lời kết

Hy vọng với hai cách tạo menu trong WordPress được hướng dẫn chi tiết trong bài viết, bạn đã có thể lựa chọn cho mình phương pháp phù hợp nhất. Dù bạn là người mới hay lập trình viên kỳ cựu, WordPress luôn mang đến giải pháp linh hoạt cho mọi nhu cầu. Nếu có bất kỳ thắc mắc nào, đừng ngần ngại để lại bình luận bên dưới – cộng đồng WordPress và những nguồn tài liệu như WPBeginner luôn sẵn sàng hỗ trợ bạn. Chúc bạn thành công trong hành trình xây dựng website của riêng mình!