Tạo menu điều hướng dọc trong WordPress

Giới Thiệu về Menu Điều Hướng Dọc Trong WordPress

Menu điều hướng dọc là một phần quan trọng của thiết kế website hiện đại, đặc biệt đối với các trang web có nhiều nội dung hoặc danh mục. Chúng giúp người dùng dễ dàng tìm kiếm và truy cập các phần khác nhau của trang web một cách trực quan. Trong WordPress, bạn có nhiều cách để tạo menu điều hướng dọc, từ sử dụng các tính năng có sẵn, plugin, đến chỉnh sửa code trực tiếp. Bài viết này sẽ hướng dẫn bạn từng bước cách tạo menu điều hướng dọc trong WordPress.

Lợi Ích Của Việc Sử Dụng Menu Điều Hướng Dọc

Trước khi đi vào chi tiết kỹ thuật, hãy xem xét một số lợi ích chính mà menu điều hướng dọc mang lại:

• Cải thiện trải nghiệm người dùng: Menu dọc giúp người dùng dễ dàng tìm thấy những gì họ cần.
• Tăng khả năng điều hướng: Với một menu rõ ràng, người dùng có thể di chuyển giữa các trang một cách nhanh chóng.
• Thiết kế responsive: Dễ dàng điều chỉnh để phù hợp với các thiết bị di động.
• Tăng tính thẩm mỹ: Một menu được thiết kế tốt có thể nâng cao vẻ ngoài tổng thể của trang web.

Cách Tạo Menu Điều Hướng Dọc Bằng Cách Sử Dụng Widget WordPress

Đây là cách đơn giản nhất để tạo menu điều hướng dọc trong WordPress, đặc biệt nếu bạn không muốn chỉnh sửa code hoặc cài đặt plugin:

1. Đăng nhập vào trang quản trị WordPress của bạn.
2. Đi đến Appearance > Widgets (Giao diện > Widgets).
3. Tìm widget Navigation Menu (Menu Điều Hướng) trong danh sách các widget có sẵn.
4. Kéo widget này vào sidebar hoặc bất kỳ khu vực widget nào khác mà bạn muốn hiển thị menu dọc.
5. Trong cài đặt của widget, chọn menu bạn muốn hiển thị từ dropdown “Select Menu” (Chọn Menu). Nếu chưa có menu, bạn cần tạo một menu trước (xem hướng dẫn bên dưới).
6. Nhập tiêu đề cho widget (ví dụ: “Danh Mục Sản Phẩm” hoặc “Bài Viết Phổ Biến”).
7. Nhấn nút Save (Lưu).

Để tạo một menu mới, hãy làm theo các bước sau:

1. Đi đến Appearance > Menus (Giao diện > Menus).
2. Nhập tên cho menu của bạn (ví dụ: “Menu Dọc Chính”).
3. Nhấn nút Create Menu (Tạo Menu).
4. Chọn các trang, bài viết, danh mục, hoặc liên kết tùy chỉnh bạn muốn thêm vào menu từ các hộp bên trái.
5. Nhấn nút Add to Menu (Thêm vào Menu).
6. Sắp xếp các mục menu bằng cách kéo và thả chúng.
7. Chọn vị trí hiển thị menu (nếu theme của bạn hỗ trợ nhiều vị trí).
8. Nhấn nút Save Menu (Lưu Menu).

Sử Dụng Plugin Để Tạo Menu Điều Hướng Dọc

Có rất nhiều plugin WordPress miễn phí và trả phí cho phép bạn tạo menu điều hướng dọc với nhiều tính năng và tùy chỉnh hơn. Dưới đây là một số plugin phổ biến:

• Max Mega Menu: Một plugin mạnh mẽ cho phép bạn tạo mega menu phức tạp với nhiều tùy chọn hiển thị.
• Responsive Menu: Tạo menu responsive, đặc biệt hữu ích cho các thiết bị di động.
• WP Vertical Menu: Một plugin đơn giản và dễ sử dụng được thiết kế đặc biệt để tạo menu dọc.

Để cài đặt và sử dụng một plugin:

1. Đi đến Plugins > Add New (Plugins > Thêm Mới).
2. Tìm kiếm plugin bạn muốn cài đặt.
3. Nhấn nút Install Now (Cài Đặt Ngay).
4. Sau khi cài đặt xong, nhấn nút Activate (Kích Hoạt).
5. Truy cập trang cài đặt của plugin (thường nằm trong Appearance hoặc Plugins) và cấu hình menu của bạn.

Chỉnh Sửa Code Để Tạo Menu Điều Hướng Dọc (Nâng Cao)

Nếu bạn có kiến thức về HTML, CSS và PHP, bạn có thể chỉnh sửa code theme WordPress của mình để tạo menu điều hướng dọc tùy chỉnh. Cách này cho phép bạn kiểm soát hoàn toàn giao diện và chức năng của menu.

Lưu ý quan trọng: Trước khi chỉnh sửa code theme, hãy tạo một bản sao lưu (backup) để tránh mất dữ liệu nếu có sự cố xảy ra. Bạn cũng nên sử dụng child theme để tránh mất các thay đổi khi theme gốc được cập nhật.

1. Tạo một child theme (nếu chưa có).
2. Sao chép file sidebar.php (hoặc file chứa khu vực bạn muốn hiển thị menu) từ theme gốc sang child theme.
3. Mở file sidebar.php trong child theme và thêm code sau:

<div class="vertical-menu">
    <?php
    wp_nav_menu( array(
        'theme_location' => 'vertical-menu',
        'menu_class'     => 'vertical-menu-items'
    ) );
    ?>
</div>

4. Trong file functions.php của child theme, thêm code sau để đăng ký vị trí menu mới:

function register_my_menus() {
  register_nav_menus(
    array(
      'vertical-menu' => __( 'Vertical Menu' )
    )
  );
}
add_action( 'init', 'register_my_menus' );

5. Đi đến Appearance > Menus và tạo một menu mới. Chọn vị trí hiển thị là “Vertical Menu”.
6. Thêm các mục menu bạn muốn hiển thị.
7. Lưu menu.
8. Thêm CSS vào file style.css của child theme để tạo kiểu cho menu:

.vertical-menu {
    width: 200px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
}

.vertical-menu .vertical-menu-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vertical-menu .vertical-menu-items li a {
    background-color: #eee;
    color: black;
    display: block;
    padding: 12px;
    text-decoration: none;
    border-bottom: 1px solid #ccc;
}

.vertical-menu .vertical-menu-items li a:hover {
    background-color: #ccc;
}

.vertical-menu .vertical-menu-items li a.active {
    background-color: #4CAF50;
    color: white;
}

Tối Ưu Hóa Menu Điều Hướng Dọc

Sau khi tạo menu điều hướng dọc, bạn nên tối ưu hóa nó để đảm bảo hiệu suất và trải nghiệm người dùng tốt nhất:

• Sử dụng tên menu ngắn gọn và dễ hiểu.
• Sắp xếp các mục menu một cách hợp lý và trực quan.
• Đảm bảo menu responsive và hoạt động tốt trên các thiết bị di động.
• Kiểm tra tốc độ tải trang và tối ưu hóa hình ảnh (nếu có) trong menu.

Ví Dụ Về Các Loại Menu Điều Hướng Dọc Khác Nhau

Menu điều hướng dọc có thể được thiết kế theo nhiều phong cách khác nhau, tùy thuộc vào mục đích và giao diện của trang web. Dưới đây là một số ví dụ:

• Menu đơn giản với các liên kết văn bản.
• Menu có biểu tượng (icons) đi kèm với văn bản.
• Menu có nhiều cấp độ (sub-menu) để tổ chức nội dung phức tạp.
• Menu dạng sticky (cố định) luôn hiển thị khi người dùng cuộn trang.

Kết Luận

Tạo menu điều hướng dọc trong WordPress là một quá trình đơn giản và linh hoạt. Bạn có thể sử dụng các widget có sẵn, plugin, hoặc chỉnh sửa code trực tiếp để tạo ra menu phù hợp với nhu cầu của mình. Quan trọng nhất là đảm bảo menu dễ sử dụng, responsive và tối ưu hóa cho hiệu suất.