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

5 tháng ago, Hướng dẫn WordPress, Views

Tạo Menu Điều Hướng Dọc Trong WordPress: Hướng Dẫn Chi Tiết

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

Sử Dụng Widgets Menu Của WordPress

WordPress cung cấp một widget menu tích hợp, giúp bạn dễ dàng tạo menu điều hướng dọc mà không cần code. Đây là cách đơn giản nhất và phù hợp cho người mới bắt đầu.

Bước 1: Tạo Menu

Đăng nhập vào trang quản trị WordPress của bạn.
Đi đến “Appearance” (Giao diện) > “Menus” (Menu).
Tạo một menu mới bằng cách nhập tên menu vào ô “Menu Name” (Tên Menu) và nhấp vào nút “Create Menu” (Tạo Menu).
Thêm các trang, bài viết, danh mục hoặc liên kết tùy chỉnh vào menu bằng cách chọn chúng từ các hộp ở bên trái và nhấp vào nút “Add to Menu” (Thêm vào Menu).
Sắp xếp thứ tự các mục menu bằng cách kéo và thả chúng.
Nhấp vào nút “Save Menu” (Lưu Menu) để lưu các thay đổi của bạn.

Bước 2: Thêm Menu Vào Sidebar Sử Dụng Widgets

Đi đến “Appearance” (Giao diện) > “Widgets” (Tiện ích).
Tìm widget “Navigation Menu” (Menu Điều Hướng) trong danh sách các widget có sẵn.
Kéo và thả widget “Navigation Menu” vào sidebar mà bạn muốn hiển thị menu điều hướng dọc.
Chọn menu bạn đã tạo ở bước 1 từ danh sách “Select Menu” (Chọn Menu) trong cài đặt widget.
Nhập tiêu đề cho menu (ví dụ: “Danh mục”) vào ô “Title” (Tiêu đề).
Nhấp vào nút “Save” (Lưu) để lưu các thay đổi của bạn.

Sau khi hoàn thành các bước trên, menu điều hướng dọc sẽ hiển thị trên sidebar của trang web của bạn. Bạn có thể tùy chỉnh thêm bằng cách thay đổi thứ tự các widget trong sidebar hoặc chỉnh sửa CSS để thay đổi giao diện của 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í có thể giúp bạn tạo menu điều hướng dọc với nhiều tùy chọn tùy chỉnh hơn. Một số plugin phổ biến bao gồm:

Max Mega Menu: Plugin này cho phép bạn tạo mega menus đẹp mắt và tùy chỉnh cao.
Responsive Menu: Plugin này tạo menu đáp ứng cho thiết bị di động, rất quan trọng trong thiết kế web hiện đại.
WP Responsive Menu: Một lựa chọn khác cho menu đáp ứng, với nhiều tính năng và tùy chọn.

Hướng Dẫn Sử Dụng Max Mega Menu

Cài đặt và kích hoạt plugin Max Mega Menu.
Đi đến “Appearance” (Giao diện) > “Mega Menu” (Mega Menu).
Chọn menu bạn muốn chuyển đổi thành mega menu từ danh sách “Menus” (Menu).
Bật “Enable Mega Menu” (Bật Mega Menu).
Tùy chỉnh giao diện và chức năng của mega menu bằng cách sử dụng các tùy chọn có sẵn trong trang cài đặt.
Bạn có thể thêm các widget vào mega menu bằng cách kéo và thả chúng vào các cột trong giao diện trực quan.
Lưu các thay đổi của bạn.

Plugin Max Mega Menu cho phép bạn tạo các menu phức tạp với nhiều cột, hình ảnh và nội dung tùy chỉnh. Đây là một lựa chọn tuyệt vời nếu bạn muốn một menu điều hướng dọc chuyên nghiệp và linh hoạt.

Chỉnh Sửa Code Theme Để Tạo Menu Điều Hướng Dọc

Nếu bạn có kinh nghiệm về code WordPress, bạn có thể chỉnh sửa trực tiếp code theme để tạo menu điều hướng dọc. Phương pháp này cho phép bạn có toàn quyền kiểm soát giao diện và chức năng của menu.

Bước 1: Xác Định Vị Trí Của Sidebar

Đầu tiên, bạn cần xác định vị trí của sidebar trong theme của bạn. Thông thường, sidebar được định nghĩa trong một file có tên là sidebar.php hoặc sidebar-*.php trong thư mục theme.

Bước 2: Thêm Code Menu Vào Sidebar

Mở file sidebar.php bằng trình soạn thảo code. Thêm đoạn code sau vào vị trí bạn muốn hiển thị menu điều hướng dọc:


<?php
wp_nav_menu( array(
    'theme_location' => 'primary', // Thay thế 'primary' bằng location menu bạn đã đăng ký
    'container'      => 'nav',
    'container_class' => 'vertical-menu',
    'menu_class'     => 'menu',
    'depth'          => 2,
) );
?>

Giải thích các tham số:

theme_location: Vị trí menu đã đăng ký trong theme của bạn. Nếu bạn chưa đăng ký vị trí menu, bạn cần thêm code vào file functions.php của theme để đăng ký nó.
container: Thẻ HTML bao bọc menu (ví dụ: nav, div).
container_class: Class CSS cho thẻ container.
menu_class: Class CSS cho thẻ ul chứa các mục menu.
depth: Số cấp menu được hiển thị.

Bước 3: Thêm CSS Để Định Dạng Menu

Thêm CSS vào file style.css của theme để định dạng menu điều hướng dọc. Ví dụ:


.vertical-menu {
    width: 200px;
    background-color: #f1f1f1;
}

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

.vertical-menu .menu li a {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: #000;
}

.vertical-menu .menu li a:hover {
    background-color: #ddd;
    color: black;
}

Bạn có thể tùy chỉnh CSS để thay đổi màu sắc, font chữ, kích thước và các thuộc tính khác của menu.

Đăng Ký Vị Trí Menu (Nếu Cần Thiết)

Nếu theme của bạn chưa đăng ký vị trí menu bạn muốn sử dụng, bạn cần thêm code sau vào file functions.php của theme:


<?php
function register_my_menus() {
  register_nav_menus(
    array(
      'primary' => __( 'Primary Menu' ),
      'secondary' => __( 'Secondary Menu' )
    )
  );
}
add_action( 'after_setup_theme', 'register_my_menus' );
?>

Thay thế 'primary' và 'Secondary Menu' bằng tên và mô tả cho vị trí menu của bạn. Sau đó, bạn có thể chọn vị trí menu này trong cài đặt menu của WordPress.

Lưu Ý Quan Trọng Khi Chỉnh Sửa Code Theme

Sao lưu theme trước khi chỉnh sửa: Điều này giúp bạn khôi phục lại theme nếu có lỗi xảy ra.
Sử dụng theme con: Thay vì chỉnh sửa trực tiếp theme chính, hãy tạo và sử dụng theme con để tránh mất các thay đổi khi cập nhật theme.
Kiểm tra code cẩn thận: Đảm bảo code của bạn không có lỗi cú pháp hoặc logic để tránh gây ra sự cố cho trang web.

Kết Luận

Tạo menu điều hướng dọc trong WordPress có thể được thực hiện bằng nhiều phương pháp khác nhau, từ việc sử dụng các tính năng tích hợp đến việc sử dụng plugin hoặc chỉnh sửa code. Lựa chọn phương pháp phù hợp phụ thuộc vào kinh nghiệm code của bạn và mức độ tùy chỉnh bạn muốn. Hy vọng bài viết này đã cung cấp cho bạn đầy đủ thông tin để tạo menu điều hướng dọc đẹp mắt và hiệu quả cho trang web WordPress của bạn.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa