Hướng dẫn tạo menu xổ xuống Drop-down trong WordPress

Hướng dẫn tạo menu xổ xuống trong WordPress

Ở bài trước, Khánh đã hướng dẫn tạo menu cơ bản trong WordPress.

Ở bài này, Khánh tiếp tục “nâng cấp” hơn bằng cách tạo menu dạng xổ xuống hay còn gọi là menu drop-down chỉ trong 2 bước đơn giản.

Khi người đọc di chuột đến một mục trên menu thì sẽ hiển thị danh sách các mục con liên quan đến mục đó.

Đây là cách làm gọn menu khi bạn có nhiều loại nội dung trên website, không phải tốn quá nhiều không gian.

Nó sẽ phù hợp nếu bạn đang điều hành một web bán hàng trực tuyến hoặc một trang tin lớn.

2 bước tạo menu xổ xuống trong WordPress

Bước 1: Thêm mục con trong menu

Bạn vào Appearance >> Menus thì sẽ đến trình chỉnh sửa menu trong WordPress.

tạo menu xổ xuống trong wordpress

Ở đây bạn sẽ có 2 lựa chọn: 1 là chỉnh sửa menu hiện có, 2 là thêm menu mới.

Nếu bạn muốn tạo menu xổ xuống trong menu mới thì bước đầu tiên là tạo menu mới bằng cách nhấp vào “create a new menu”, sau đó đọc bài hướng dẫn ở đây (note: chèn link bài cách tạo menu trong wordpress).

cách tạo menu drop down trong wordpress

Nếu bạn muốn tạo menu xổ xuống ngay trong menu hiện có thì tiếp tục lướt xuống cột Add menu items, chọn các mục con bạn muốn thêm vào.

Ví dụ Khánh muốn thêm mục con “Nhật Bản” trong mục mẹ là “Du lịch”.

Ban đầu Khánh đã tạo sẵn mục “Nhật Bản” trong category nên sẽ nhấp vào phần Categories và tick chọn vào Nhật Bản, sau đó nhấp Add to Menu.

hướng dẫn tạo menu xổ xuống trong wordpress

Như vậy mục con sẽ xuất hiện ở bên cột Menu structure.

hiển thị menu đầy đủ

Bạn làm tương tự với các mục con khác.

Bước 2: Tạo menu xổ xuống

Bây giờ ở cột Menu structure đã xuất hiện đầy đủ các mục bạn muốn hiển thị ở menu trang chủ.

Nhưng chúng đang ở dưới dạng các mục thông thường.

Để biến chúng thành menu xổ xuống dưới dạng mục con và mục mẹ, bạn chỉ cần kéo và thả một mục con rồi đặt nó dưới mục mẹ.

Sau đó bạn di chuyển nó sang phải một chút rồi thả ra cho đến khi hiện dòng chữ “sub item” bên cạnh tên mục là bạn đã biến nó thành mục con thành công.

Ví dụ Khánh kéo và thả 3 mục con “Nhật Bản”, “Hàn Quốc” và “Thái Lan” để bên dưới mục mẹ là “Du lịch”.

tạo menu con

Cuối cùng bạn nhấp nút Save Menu.

lưu lại chỉnh sửa

Và đây là thành quả:

kết quả tạo menu xổ xuống

Các mẹo bổ ích liên quan đến dạng menu xổ xuống trong WordPress

Menu là nơi rất quan trọng trong website vì khách truy cập sẽ vào đây đầu tiên nếu muốn tìm thông tin cụ thể.

Nếu bạn tận dụng được menu thì nó có thể giúp bạn giữ chân khách lâu hơn, tăng lượt view và tỉ lệ chuyển đổi, đồng thời bán hàng được nhiều hơn trên website của mình.

Khánh sẽ gợi ý một số mẹo giúp menu xổ xuống trông hấp dẫn và dễ tương tác hơn.

1. Bạn có thể tạo menu xổ xuống nhiều cấp bậc

Hướng dẫn trên của Khánh mới chỉ dừng ở cấp độ 1: mục mẹ – mục con.

Vậy nếu bạn muốn tạo thêm mục con trong mục con nữa thì sao?

Rất đơn giản, bạn chỉ cần kéo thả mục con ngay bên dưới mục con đó, tạo thành một hình bậc thang thế này.

tạo menu xổ xuống nhiều cấp bậc

Kết quả, bên ngoài trang chủ sẽ hiển thị menu xổ xuống nhiều cấp bậc dạng thế này.

kết quả tạo menu xổ xuống nhiều cấp bậc

2. Bạn có thể tạo nhiều menu xổ xuống

Bạn không chỉ tạo menu xổ xuống ở một mục mà còn có thể tạo nhiều menu xổ xuống trong nhiều mục.

Thao tác tương tự như hướng dẫn trên, bạn kéo thả các thư mục con tùy thích ở bất kỳ thư mục mẹ nào.

tạo menu xổ xuống ở nhiều mục

Nhưng bạn hãy cẩn thận đừng làm menu bị phức tạp và rối rắm, khiến khách truy cập hoang mang không biết nên tìm thứ mình cần ở đâu.

Bạn chỉ nên tạo nhiều menu xổ xuống khi website của bạn lớn giống như các trang thương mại điện tử Tiki, Shopee… hoặc trang tin như Zing, Kenh14…

3. Tạo menu với bản xem trước trực tiếp (live preview)

Nếu bạn muốn vừa điều chỉnh menu vừa xem trước nó sẽ hiển thị trên trang chủ thế nào thì có thể dùng chế độ live preview.

Chỉ cần vào Appearance >> Menu, nhấp vào nút Manage with Live Preview ở trên cùng.

chỉnh sửa với bản xem trước

Bạn sẽ được chuyển đến trang chỉnh sửa trực quan. Bạn nhấp vào tên menu hiện tại.

giao diện chỉnh sửa menu trực quan

Nó sẽ hiện ra trình chỉnh sửa menu kéo và thả ở cột bên trái với bản xem trước trực tiếp tại website ở bảng điều khiển bên phải.

cột menu tùy chỉnh

Bạn cứ chỉnh sửa và kéo thả như bình thường.

Lời kết

Khánh hy vọng bài viết này đã giúp bạn biết cách tạo menu xổ xuống trong WordPress một cách dễ dàng.

Nếu trong quá trình cài đặt, bạn gặp bất cứ trục trặc nào thì cứ để bình luận bên dưới nhé. Khánh sẽ hỗ trợ giúp bạn.

Hẹn gặp bạn ở bài hướng dẫn tiếp theo.