Cách Tạo Menu trong WordPress Chi Tiết A-Z (Cho Người Mới & Lập Trình Viên)

Menu là một phần không thể thiếu của bất kỳ website nào, đóng vai trò như một tấm bản đồ giúp người dùng điều hướng và tìm kiếm thông tin dễ dàng. Một menu được tổ chức tốt không chỉ cải thiện trải nghiệm người dùng mà còn hỗ trợ đắc lực cho SEO. Bài viết này của Thiết kế Website WordPress sẽ hướng dẫn bạn chi tiết cách tạo menu trong WordPress từ cơ bản đến nâng cao, phù hợp cho cả người mới bắt đầu và lập trình viên.

Menu trong WordPress là gì? Tại sao nó quan trọng?

Menu trong WordPress (hay còn gọi là Navigation Menu) là một danh sách các liên kết, thường được hiển thị ở đầu trang (header), chân trang (footer) hoặc thanh bên (sidebar). Nó giúp người dùng truy cập nhanh đến các trang quan trọng như Trang chủ, Giới thiệu, Dịch vụ, Blog, Liên hệ.

Tầm quan trọng của WordPress Menu:

  • Cải thiện trải nghiệm người dùng (UX): Giúp khách truy cập dễ dàng khám phá cấu trúc và nội dung website của bạn.
  • Tăng thời gian ở lại trang (Time on site): Khi người dùng dễ dàng tìm thấy thứ họ cần, họ sẽ ở lại website lâu hơn.
  • Hỗ trợ SEO: Giúp các công cụ tìm kiếm hiểu rõ hơn về cấu trúc website và các trang quan trọng, đồng thời phân phối sức mạnh liên kết (link juice) hiệu quả hơn.

Cách tạo menu trong WordPress bằng giao diện (Dễ nhất cho người mới)

Đây là phương pháp phổ biến và dễ thực hiện nhất, không đòi hỏi kiến thức về code. Hầu hết người dùng WordPress đều sử dụng cách này để quản lý menu của mình.

Bước 1: Truy cập trình quản lý Menu

Từ trang quản trị WordPress, bạn hãy điều hướng đến Giao diện (Appearance) -> Menu.

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

  1. Nếu đây là lần đầu bạn tạo menu, bạn sẽ thấy giao diện để tạo ngay. Nếu đã có menu, hãy nhấp vào liên kết “tạo một menu mới” (create a new menu).
  2. Đặt tên cho menu của bạn (ví dụ: “Menu chính”, “Menu Footer”). Tên này chỉ dùng để bạn quản lý, không hiển thị ra ngoài.
  3. Nhấn nút “Tạo trình đơn” (Create Menu).

Bước 3: Thêm các mục vào menu

Ở cột bên trái, bạn sẽ thấy các hộp như Trang (Pages), Bài viết (Posts), Liên kết tự tạo (Custom Links) và Chuyên mục (Categories).

  • Thêm Trang/Bài viết/Chuyên mục: Tích vào các mục bạn muốn thêm và nhấn “Thêm vào menu” (Add to Menu).
  • Thêm Liên kết tùy chỉnh: Dùng để thêm link đến một trang web khác hoặc một URL bất kỳ. Nhập URL và Văn bản đường dẫn (Link Text) rồi nhấn “Thêm vào menu”.

Bước 4: Sắp xếp và tạo menu đa cấp (Dropdown Menu)

Sau khi thêm, các mục sẽ xuất hiện ở khung “Cấu trúc menu” (Menu Structure) bên phải.

  • Sắp xếp: Kéo và thả các mục để thay đổi thứ tự của chúng.
  • Tạo menu con (đa cấp): Kéo một mục vào trong và lùi sang phải một chút so với mục cha của nó. Mục đó sẽ trở thành menu con (Sub Item).

Bước 5: Chọn vị trí hiển thị và lưu lại

Cuối cùng, kéo xuống phần “Thiết lập cho trình đơn” (Menu Settings):

  • Trong mục “Vị trí hiển thị” (Display location), hãy tích vào vị trí bạn muốn menu này xuất hiện (ví dụ: Primary Menu, Footer Menu). Các vị trí này được định nghĩa sẵn bởi theme bạn đang dùng.
  • Nhấn nút “Lưu trình đơn” (Save Menu) để hoàn tất.

Bây giờ, hãy ra ngoài trang chủ để xem thành quả của bạn!

Hướng dẫn tạo Menu trong WordPress bằng Code (Cho Lập trình viên)

Phương pháp này dành cho các nhà phát triển theme hoặc những ai muốn tùy biến sâu hơn, tạo ra các vị trí menu mới mà theme không hỗ trợ sẵn.

Khi nào bạn nên tạo menu bằng code?

  • Khi bạn đang phát triển một theme WordPress từ đầu.
  • Khi theme hiện tại của bạn không có đủ vị trí menu (menu location) mong muốn.
  • Khi bạn cần kiểm soát hoàn toàn mã HTML output của menu.

Bước 1: Kích hoạt tính năng Menu trong Theme

Đầu tiên, hãy đảm bảo theme của bạn đã hỗ trợ tính năng menu. Mở file functions.php trong thư mục theme của bạn và kiểm tra xem có dòng code sau chưa. Nếu chưa, hãy thêm nó vào.

add_theme_support( 'menus' );

Bước 2: Đăng ký vị trí hiển thị Menu (Menu Location)

Sử dụng hàm register_nav_menus() để đăng ký một hoặc nhiều vị trí menu mới. Vẫn trong file functions.php, thêm đoạn code sau:

function register_my_menus() {
  register_nav_menus(
    array(
      'main-nav' => __( 'Menu chính' ),
      'footer-nav' => __( 'Footer Menu' )
    )
  );
}
add_action( 'init', 'register_my_menus' );

Trong ví dụ trên:

  • main-nav và footer-nav là các slug định danh, dùng để gọi trong code.
  • Menu chính và Footer Menu là các tên hiển thị trong trang quản trị WordPress.

Sau khi lưu lại, bạn vào Giao diện -> Menu -> Quản lý vị trí (Manage Locations) sẽ thấy 2 vị trí mới vừa tạo.

Menu trong WordPress

Bước 3: Hiển thị Menu ra ngoài Theme

Bây giờ, bạn cần chèn hàm wp_nav_menu() vào vị trí trong file template (ví dụ: header.php, footer.php) mà bạn muốn menu hiển thị.

<?php
wp_nav_menu( array(
    'theme_location'  => 'main-nav',       // Slug của vị trí menu đã đăng ký
    'container'       => 'nav',            // Thẻ HTML bao bọc menu
    'container_class' => 'main-nav',       // Class cho thẻ container
    'menu_class'      => 'menu clearfix',    // Class cho thẻ <ul> của menu
) );
?>

Sau khi chèn code, bạn cần vào Giao diện -> Menu, tạo một menu và gán nó vào vị trí “Menu chính” vừa tạo để nó hiển thị ra ngoài.

Cách tạo Menu trong WordPress

Tùy chỉnh CSS cho WordPress Menu thêm chuyên nghiệp

Sau khi hiển thị, menu của bạn chỉ là một danh sách các liên kết đơn giản. Bạn cần thêm CSS để nó trở nên đẹp mắt và chuyên nghiệp. Dưới đây là một đoạn CSS mẫu cho menu dropdown đơn giản dựa trên cấu trúc HTML được tạo bởi hàm wp_nav_menu() ở trên.

Bạn có thể thêm đoạn code này vào file style.css của theme.

/* Main Navigation Styles */
.main-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav ul li {
    display: inline-block;
    position: relative;
}

.main-nav ul li a {
    display: block;
    padding: 15px 20px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}

.main-nav ul li:hover > a {
    background: #555;
    color: #fff;
}

/* Dropdown Styles */
.main-nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #555;
    min-width: 180px;
    z-index: 1000;
}

.main-nav ul li:hover > ul {
    display: block;
}

.main-nav ul ul li {
    display: block;
    width: 100%;
}

.main-nav ul ul li a {
    color: #fff;
}

.main-nav ul ul li a:hover {
    background: #666;
}

Kết quả tạm có sau khi áp dụng CSS:

Tạo Menu trong WordPress

Câu hỏi thường gặp về tạo Menu WordPress (FAQ)

1. Làm thế nào để tạo menu đa cấp (dropdown menu)?

Trong giao diện quản lý menu, bạn chỉ cần kéo một mục menu con và lùi vào bên phải một chút so với mục menu cha. WordPress sẽ tự động xử lý để tạo cấu trúc menu đa cấp.

2. Làm sao để thêm icon vào các mục menu?

Bạn có thể sử dụng các plugin như “Menu Icons by ThemeIsle” để dễ dàng thêm icon vào từng mục. Một số theme cao cấp cũng tích hợp sẵn tính năng này.

3. Cách xóa một menu hoặc một mục trong menu?

  • Xóa một mục: Trong “Cấu trúc menu”, nhấp vào mũi tên ở mục bạn muốn xóa, sau đó chọn “Xóa bỏ” (Remove).
  • Xóa toàn bộ menu: Chọn menu bạn muốn xóa từ dropdown, sau đó nhấp vào liên kết “Xóa trình đơn” (Delete Menu) màu đỏ ở dưới cùng.

4. Sự khác biệt giữa tạo menu bằng giao diện và bằng code?

  • Giao diện: Dành cho người dùng cuối, dễ dàng, trực quan, không cần code. Bạn chỉ có thể sử dụng các vị trí menu mà theme cung cấp.
  • Code: Dành cho lập trình viên, linh hoạt, cho phép tạo vị trí menu mới và kiểm soát hoàn toàn output. Yêu cầu kiến thức về PHP và cấu trúc theme WordPress.

Hy vọng với hướng dẫn chi tiết này, bạn đã có thể tự tin tạo menu trong WordPress một cách chuyên nghiệp. Nếu bạn cần các giải pháp tùy biến nâng cao hơn hoặc muốn tìm hiểu về các plugin hữu ích khác, hãy tham khảo bài viết Tổng hợp những Plugin nên dùng cho WordPress của chúng tôi. Chúc bạn thành công!

4.5/5 - (107 bình chọn)
4.5/5 - (107 bình chọn)