Nhiều chủ website thường bỏ qua tiềm năng của menu dọc, coi nó là một lựa chọn lỗi thời. Tuy nhiên, trong bối cảnh thiết kế web hiện đại, việc biết cách tạo menu dọc trong WordPress lại là một kỹ năng chiến lược, giúp giải quyết triệt để bài toán điều hướng phức tạp cho các trang thương mại điện tử, portfolio, hay blog có lượng danh mục lớn. Theo kinh nghiệm của chúng tôi, một menu dọc được thiết kế tốt không chỉ giúp người dùng tìm kiếm thông tin nhanh hơn mà còn tạo ra một bố cục trang độc đáo và chuyên nghiệp.
Tại sao menu dọc là lựa chọn thông minh cho website của bạn?
Trước khi đi vào phần kỹ thuật, điều quan trọng là phải hiểu được giá trị chiến lược mà menu dọc mang lại. Nó không chỉ đơn thuần là một lựa chọn về mặt thẩm mỹ. Trong nhiều trường hợp, đây là quyết định mang tính logic để tối ưu hóa trải nghiệm người dùng (UX) và tăng khảná năng truy cập (accessibility).
Các lợi ích chính của việc sử dụng menu dọc bao gồm:
Khả năng mở rộng không giới hạn: Không giống như menu ngang bị giới hạn bởi chiều rộng màn hình, bạn có thể thêm bao nhiêu mục vào menu dọc tùy thích mà không sợ vỡ layout. Điều này đặc biệt lý tưởng cho các trang web có cấu trúc phức tạp như Amazon hay các trang tin tức lớn.
Cải thiện khả năng đọc và quét thông tin: Mắt người có xu hướng quét nội dung theo chiều dọc một cách tự nhiên. Việc đặt các mục menu trong một danh sách dọc giúp người dùng dễ dàng đọc lướt và xác định mục họ cần nhanh hơn.
Tận dụng không gian màn hình: Trên các màn hình rộng (desktop), menu dọc tận dụng khoảng trắng hai bên, giúp vùng nội dung chính trở nên tập trung hơn. Nó cũng tạo ra một bố cục cân bằng và hài hòa hơn.
Tối ưu cho thiết bị di động: Hầu hết các menu ngang trên desktop đều chuyển thành dạng menu dọc ẩn (hamburger menu) trên di động. Việc sử dụng menu dọc ngay từ đầu tạo ra sự nhất quán trong trải nghiệm người dùng trên mọi thiết bị.
Tuy nhiên, không phải website nào cũng phù hợp. Các trang có ít mục menu (dưới 5-7 mục) hoặc các trang landing page đơn giản có thể sẽ không tận dụng được hết lợi thế của cấu trúc này. Việc lựa chọn phụ thuộc vào chiến lược nội dung và mục tiêu của bạn.
Hướng dẫn chi tiết cách tạo menu dọc trong WordPress (Không cần plugin)
Đối với những người yêu thích sự tối giản và muốn giữ cho website nhẹ nhàng, việc tạo menu dọc bằng cách sử dụng các công cụ có sẵn của WordPress và một chút CSS là phương pháp hiệu quả nhất. Dưới đây là quy trình chi tiết mà chúng tôi thường áp dụng cho các dự án của khách hàng.
Bước 1: Tạo một menu điều hướng mới
Bước đầu tiên là tạo một cấu trúc menu trong khu vực quản trị của WordPress. Nếu bạn đã có sẵn menu, bạn có thể bỏ qua bước này. Nếu chưa, hãy truy cập vào Giao diện (Appearance) → Menu.
Nhấp vào liên kết ‘tạo một menu mới’.
Đặt một tên dễ nhận biết cho menu của bạn, ví dụ: ‘Menu Dọc Chính’.
Thêm các trang, bài viết, danh mục, hoặc liên kết tùy chỉnh bạn muốn hiển thị từ cột bên trái vào cấu trúc menu bên phải.
Sắp xếp lại thứ tự các mục bằng cách kéo và thả. Bạn có thể tạo các mục con bằng cách kéo một mục lùi vào một chút so với mục cha.
Nhấn nút ‘Lưu menu’.
Lưu ý: Ở bước này, bạn không cần phải chọn bất kỳ ‘Vị trí hiển thị’ nào. Chúng ta sẽ gán menu này vào một vị trí cụ thể bằng widget ở bước tiếp theo.
Bước 2: Gán menu vào Sidebar hoặc Footer bằng Widget
Sau khi có cấu trúc menu, chúng ta cần đưa nó ra ngoài giao diện website. Vị trí phổ biến nhất cho menu dọc là sidebar (thanh bên). Hầu hết các theme WordPress đều có ít nhất một khu vực widget cho sidebar.
Truy cập Giao diện (Appearance) → Widget (hoặc Giao diện → Tùy biến → Widget).
Tìm khu vực widget bạn muốn đặt menu vào (ví dụ: ‘Sidebar Chính’, ‘Cột bên phải’).
Nhấp vào biểu tượng dấu ‘+’ để thêm một block mới và tìm kiếm ‘Menu điều hướng’ (Navigation Menu).
Thêm block đó vào sidebar. Đặt tiêu đề cho widget nếu muốn (ví dụ: ‘Danh mục sản phẩm’) và chọn menu ‘Menu Dọc Chính’ mà bạn đã tạo ở bước 1.
Lưu lại thay đổi.
Bước 3: Tùy biến CSS để menu hiển thị đúng dạng dọc
Lúc này, menu của bạn đã nằm ở sidebar nhưng có thể nó vẫn hiển thị theo kiểu danh sách đơn giản, chưa có định dạng đẹp mắt. Đây là lúc CSS phát huy tác dụng. Bạn sẽ cần thêm một vài đoạn mã để biến nó thành một menu dọc chuyên nghiệp. Truy cập Giao diện (Appearance) → Tùy biến (Customize) → Additional CSS.
Để tìm đúng ‘class’ hoặc ‘id’ của menu cần tuỳ chỉnh, bạn hãy mở website, nhấp chuột phải vào menu và chọn ‘Inspect’ (Kiểm tra). Tìm thẻ `
` hoặc `
Về Chúng Tôi – Webbox
Chào bạn! Chúng tôi là Webbox, đội ngũ chuyên gia về WordPress, SEO và Performance. Với sứ mệnh giúp các doanh nghiệp SME “vít ga” trên Internet, Webbox không chỉ thiết kế website đẹp mà còn tập trung tối ưu tốc độ, bảo mật và khả năng chuyển đổi đơn hàng. Bài viết này được chia sẻ dựa trên kinh nghiệm thực chiến của chúng tôi.
Khám phá danh sách các plugin tạo form liên hệ WordPress mạnh mẽ nhất. Hướng dẫn chọn plugin phù hợp với nhu cầu, từ WPForms đến Gravity Forms. Tối ưu website ngay!
Khám phá cách tạo trang mới trong WordPress từ A-Z với trình soạn thảo Block Editor. Bài viết này hướng dẫn bạn tối ưu SEO, tùy chỉnh giao diện. Bắt đầu ngay!
