Trong bối cảnh thương mại điện tử và website doanh nghiệp ngày càng phát triển, việc tối ưu hóa menu điều hướng là yếu tố then chốt quyết định trải nghiệm người dùng. Một thanh menu dọc (Vertical Menu) không chỉ cung cấp không gian hiển thị danh mục lớn mà còn hỗ trợ đắc lực cho việc tối ưu SEO khi các danh mục chính được làm nổi bật. Bài viết này sẽ đi sâu vào hướng dẫn chi tiết cách tạo menu dọc trong wordpress trên nền tảng Flatsome – một trong những theme phổ biến nhất hiện nay, sử dụng plugin OT Flatsome Addon để triển khai tính năng Mega Menu mạnh mẽ.
Tầm Quan Trọng Của Menu Dọc Trong Thiết Kế Website Hiện Đại
Menu điều hướng đóng vai trò là xương sống của một website. Nếu menu ngang (Horizontal Menu) phù hợp cho việc hiển thị các mục chính ít hơn, thì menu dọc lại là giải pháp lý tưởng cho các trang web có cấu trúc danh mục sản phẩm hoặc dịch vụ phức tạp. Việc sử dụng menu dọc không chỉ giúp người dùng dễ dàng tìm thấy thứ họ cần mà còn cải thiện đáng kể khả năng thu thập dữ liệu (crawling) và xếp hạng của các công cụ tìm kiếm.
Phân Tích Lợi Ích Về Mặt Trải Nghiệm Người Dùng (UX)
Menu dọc thường được đặt ở cột bên trái, một vị trí mà mắt người dùng có xu hướng tập trung ngay khi truy cập vào trang. Điều này đặc biệt đúng với các trang thương mại điện tử (e-commerce) – nơi người dùng thường tìm kiếm danh mục sản phẩm ngay lập tức. Cấu trúc này giúp giảm thiểu số lần nhấp chuột cần thiết để đến được đích đến, từ đó cải thiện tỷ lệ chuyển đổi.
Nó cung cấp một cái nhìn tổng quan nhanh chóng về toàn bộ phạm vi sản phẩm hoặc dịch vụ mà website cung cấp. Việc này rất quan trọng đối với các trang web có lượng danh mục lớn, phức tạp. Người dùng có thể dễ dàng quét qua các tùy chọn mà không cần cuộn trang hoặc phải di chuột qua các mục menu ngang.
Ảnh Hưởng Của Menu Dọc Đến Tối Ưu Hóa Công Cụ Tìm Kiếm (SEO)
Về mặt SEO, một menu dọc được cấu trúc tốt giúp phân bổ “sức mạnh liên kết” (link equity) một cách hiệu quả hơn trong nội bộ website. Các danh mục được liên kết trực tiếp và dễ dàng từ trang chủ hoặc các trang chính, giúp Google Bot hiểu rõ hơn về cấu trúc thứ bậc của trang. Điều này củng cố tính xác đáng (Relevance) và thẩm quyền (Authority) của website đối với các từ khóa danh mục.
Sự xuất hiện của menu dọc, đặc biệt khi đi kèm với tính năng Mega Menu, cho phép nhúng các liên kết sâu hơn (deep links) và nội dung phong phú ngay trong menu. Đây là một chiến thuật thông minh để tăng cường liên kết nội bộ mà không làm quá tải phần thân bài viết. Độ sâu và sự rõ ràng trong cấu trúc liên kết nội bộ luôn là một yếu tố được các công cụ tìm kiếm đánh giá cao.
Tổng Quan Về Flatsome Và Sự Cần Thiết Của OT Flatsome Addon
Flatsome là một theme WordPress đa năng, được thiết kế chuyên biệt cho việc xây dựng các trang web thương mại điện tử (WooCommerce). Mặc dù Flatsome cung cấp bộ tùy biến mạnh mẽ, tính năng menu dọc mặc định của nó vẫn còn hạn chế. Đây là lúc các Addon chuyên biệt như OT Flatsome Vertical Menu trở nên cần thiết.
Giới Thiệu Plugin OT Flatsome Vertical Menu
OT Flatsome Vertical Menu là một addon được phát triển riêng để bổ sung tính năng menu dọc tiên tiến, đặc biệt tương thích tuyệt đối với Header Builder (Trình xây dựng Header) của Flatsome. Plugin này cho phép người dùng tùy chỉnh sâu hơn về vị trí, phong cách, và quan trọng nhất là khả năng tích hợp icon vào từng mục menu.
Phiên bản miễn phí của addon này đã cung cấp đầy đủ các tính năng cơ bản cần thiết để tạo một menu dọc chức năng và thẩm mỹ. Trong khi đó, phiên bản Pro sẽ mở khóa thêm các tính năng nâng cao như Mega Menu đầy đủ, chèn Shortcode tùy ý vào các vị trí, đáp ứng nhu cầu tùy biến phức tạp hơn của các trang web lớn. Việc lựa chọn sử dụng bản miễn phí hay trả phí sẽ phụ thuộc vào quy mô và yêu cầu cụ thể của dự án mà bạn đang triển khai.
Thiết Lập Và Kích Hoạt Plugin
Việc cài đặt OT Flatsome Vertical Menu tuân theo quy trình chuẩn của WordPress. Trong khu vực quản trị, bạn cần truy cập Plugin rồi chọn Cài mới (Add New). Sử dụng thanh tìm kiếm để nhập OT Flatsome Vertical Menu và tiến hành cài đặt, sau đó kích hoạt ngay lập tức. Sau khi kích hoạt, plugin này sẽ tự động tích hợp các thành phần cần thiết vào hệ thống tùy biến theme của Flatsome.
Đây là bước nền tảng để bắt đầu quá trình tùy chỉnh sâu hơn. Việc cài đặt đúng cách đảm bảo rằng tất cả các tùy chọn và chức năng của addon sẽ hiển thị chính xác trong giao diện người dùng, sẵn sàng cho các bước cấu hình tiếp theo.
Hướng Dẫn Chi Tiết Cấu Hình Menu Dọc Trong Flatsome
Sau khi plugin đã được kích hoạt thành công, công việc tiếp theo là đưa menu dọc vào vị trí mong muốn trên Header của Flatsome và tùy chỉnh nội dung cho nó. Flatsome nổi tiếng với Header Builder trực quan, và addon này cũng hoạt động liền mạch trong môi trường đó.
Đưa Menu Dọc Vào Header Bằng Flatsome Header Builder
Để bắt đầu tùy biến, bạn truy cập vào Tùy biến (Customize) trên thanh công cụ quản trị hoặc qua Giao diện > Tùy biến. Trong giao diện Tùy biến, tìm đến mục Header (hoặc Header > Header Main tùy phiên bản Flatsome). Tại đây, bạn sẽ thấy biểu tượng hoặc một phần tử mới mang tên Vertical menu (thường được đánh dấu màu đỏ hoặc nổi bật).
Nhiệm vụ của bạn là kéo và thả phần tử Vertical menu này vào vị trí mong muốn trên Header. Đối với hầu hết các trang web, vị trí lý tưởng là ở hàng trên cùng (Header Main) hoặc hàng dưới cùng (Header Bottom), thường nằm ở bên trái, trước các thành phần điều hướng ngang. Sau khi đặt xong, hãy nhấn Lưu để áp dụng thay đổi và đảm bảo phần tử đã được đặt đúng chỗ.
Tạo Cấu Trúc Menu Và Gán Vào Vị Trí
Bây giờ là lúc tạo nội dung cho menu dọc. Bạn truy cập vào Giao diện > Menu. Tại đây, bạn cần tạo một menu mới (hoặc sử dụng menu danh mục đã có). Menu này sẽ chứa các danh mục chính, danh mục sản phẩm, hoặc các trang quan trọng mà bạn muốn hiển thị trong menu dọc.
Điều quan trọng cần lưu ý là menu dọc này thường được gán cho một vị trí cụ thể trong theme. Tuy nhiên, với OT Flatsome Addon, việc gán thường được thực hiện thông qua cài đặt của chính phần tử Vertical menu trong Tùy biến, hoặc nó sẽ tự động nhận diện menu chính (Primary Menu) hoặc menu danh mục (Category Menu) mặc định. Hãy đảm bảo rằng bạn đã tạo đủ các mục và sắp xếp chúng theo cấu trúc phân cấp (cấp 1, cấp 2) chính xác.
Tùy Biến Thêm Icon Menu (SVG, Font Awesome, Image)
Đây là tính năng nổi bật của OT Flatsome Addon. Việc thêm icon không chỉ giúp menu trực quan hơn mà còn cải thiện tốc độ xử lý thông tin của người dùng. Trong giao diện chỉnh sửa Menu (Giao diện > Menu), khi bạn mở rộng một mục menu bất kỳ, bạn sẽ thấy thêm một tùy chọn mới liên quan đến Icon, thường là Icon OT Flatsome Vertical Menu.
Giao diện tùy chọn thêm Icon cho các mục menu trong cài đặt của OT Flatsome Vertical Menu
Nhấp vào Select để lựa chọn loại icon phù hợp:
- Font Awesome: Phù hợp nếu bạn cần các icon cơ bản, gọn nhẹ. Bạn chỉ cần nhập tên class của icon (ví dụ:
fa-home). - SVG Image: Tùy chọn hiện đại, cho hình ảnh sắc nét, có thể thay đổi màu sắc mà không bị vỡ. Đây là lựa chọn tối ưu cho hiệu suất.
- Image (PNG/JPG): Phù hợp nếu bạn muốn sử dụng hình ảnh tùy chỉnh đặc biệt. Nếu chọn Image, bạn sẽ tải lên hoặc chọn một hình ảnh từ Thư viện. Với tùy chọn này, plugin sẽ tạo thumbnail nhỏ gọn để hiển thị bên cạnh tên mục menu.
Hãy chọn loại icon mà bạn cảm thấy phù hợp nhất với thiết kế thương hiệu của bạn và sau đó Lưu Menu để hoàn tất quá trình thiết lập nội dung.
Kiểm Tra Thành Quả và Hoàn Thiện Menu Điều Hướng
Sau khi đã hoàn tất việc cài đặt, cấu hình vị trí và thêm icon, bước cuối cùng là kiểm tra thành quả trên giao diện người dùng. Bạn nên kiểm tra menu trên cả máy tính để bàn (desktop) và thiết bị di động (mobile) để đảm bảo tính responsive (tương thích trên nhiều màn hình).
Nếu mọi thứ đều hoạt động như mong đợi (menu hiển thị đúng vị trí, icon hiển thị rõ ràng, và các mục menu liên kết chính xác), bạn đã thành công. Tuy nhiên, nếu bạn nhận thấy một số vấn đề về mặt thẩm mỹ như chiều rộng, màu sắc hoặc các hiệu ứng khi di chuột, bạn sẽ cần can thiệp bằng Custom CSS để tinh chỉnh giao diện cho hoàn hảo.
Hiển thị của menu dọc sau khi đã được cài đặt và thêm icon, sẵn sàng đưa vào sử dụng
Các Kỹ Thuật Tùy Biến Giao Diện Menu Dọc Nâng Cao Bằng CSS
Mặc định, phiên bản miễn phí của OT Flatsome Addon có thể có một số hạn chế về mặt tùy biến giao diện, chẳng hạn như chiều rộng mặc định quá lớn hoặc màu nền không phù hợp với tông màu chủ đạo của website. Để giải quyết triệt để các vấn đề này, việc sử dụng CSS tùy chỉnh là không thể thiếu.
Cơ Sở Lý Luận Cho Việc Tùy Chỉnh CSS
Can thiệp CSS (Cascading Style Sheets) là phương pháp tối ưu và linh hoạt nhất để điều chỉnh giao diện của bất kỳ thành phần nào trên website WordPress. Trong trường hợp này, chúng ta cần tìm hiểu các ID và Class mà plugin OT Flatsome Addon sử dụng để nhắm mục tiêu chính xác các phần tử cần thay đổi.
Các thuộc tính thường được điều chỉnh bao gồm:
width: Chiều rộng của khối menu tổng thể và các mục menu con.background: Màu nền của menu, bao gồm cả màu nền khi người dùng di chuột qua (hover).text-transform: Chuyển đổi chữ viết hoa/thường để đồng bộ hóa phong cách.left/right: Điều chỉnh vị trí tương đối để tránh chồng chéo với các thành phần khác.
Đoạn Mã CSS Tùy Chỉnh Chiều Rộng Và Màu Nền
Để áp dụng đoạn mã CSS này, bạn truy cập vào Tùy biến > CSS & JS Tùy chỉnh (hoặc Additional CSS) và dán đoạn mã sau vào. Lưu ý, bạn có thể thay đổi giá trị width và mã màu #f63345 / #ed1c24 để phù hợp với giao diện của mình.
Ngày Cập Nhật: Tháng 11 13, 2025 by Ngô Hồng Thái
