fbpx
close

Cách tạo Menu drop down trong WordPress

Tác giả: Nguyen Văn Phong Ngày cập nhật: 14/06/2021 Chuyên mục:
Disclosure
Website Wiki.tino.org được cung cấp bởi Tino Group. Truy cập và sử dụng website đồng nghĩa với việc bạn đồng ý với các điều khoản và điều kiện trong chính sách bảo mật - điều khoản sử dụng nội dung. Wiki.tino.org có thể thay đổi điều khoản sử dụng bất cứ lúc nào. Việc bạn tiếp tục sử dụng Wiki.tino.org sau khi thay đổi có nghĩa là bạn chấp nhận những thay đổi đó.
Why Trust Us
Các bài viết với hàm lượng tri thức cao tại wiki.tino.org được tạo ra bởi các chuyên viên Marketing vững chuyên môn và được kiểm duyệt nghiêm túc theo chính sách biên tập bởi đội ngũ biên tập viên dày dặn kinh nghiệm. Mọi nỗ lực của chúng tôi đều hướng đến mong muốn mang đến cho cộng đồng nguồn thông tin chất lượng, chính xác, khách quan, đồng thời tuân thủ các tiêu chuẩn cao nhất trong báo cáo và xuất bản.

Menu Điều hướng trang web là chìa khóa để giúp người dùng của bạn tìm tới đúng nơi mà họ muốn. Một menu được thiết kế tốt có thể giúp cải thiện Trải nghiệm người dùng (UX) và thậm chí giảm tỷ lệ thoát trang của bạn . Tuy nhiên, nếu bạn tạo một menu không tốt có thể khiến hiệu quả trang giảm mạnh.

WordPress cho phép bạn tạo các menu tùy chỉnh để phù hợp với nhu cầu của trang web của bạn. Bạn thậm chí có thể sử dụng các chức năng gốc để tạo một menu drop down WordPress nhỏ gọn giúp tiết kiệm không gian, trong khi vẫn cung cấp hướng rõ ràng cho khách truy cập của bạn.

Trong bài đăng này, TinoHost sẽ thảo luận tại sao điều hướng trang web là quan trọng và làm thế nào để các menu dropdown  có thể đặc biệt hữu ích. Sau đó, chúng tôi sẽ hướng dẫn bạn cách tạo chúng trong WordPress .

Giới thiệu về Menu điều hướng và thả xuống WordPress

 

 

04.27.2020-13.59.26

 

Có thể bạn không để ý nhưng  các menu điều hướng là một yếu tố quan trọng của bất kỳ trang web nào. Chúng giúp người dùng nhanh chóng tìm thấy các trang phù hợp nhất để thực hiện mục tiêu của họ, đồng thời cung cấp cho khách truy cập lần đầu ý tưởng về những gì bạn cung cấp. Giống như hình ảnh trên thì khách hàng dễ dàng hiểu các dịch vụ TinoHost cung cấp cũng như các dịch vụ liên quan.

Có một menu điều hướng được thiết kế tốt là chìa khóa để tăng chuyển đổi và giảm tỷ lệ thoát của bạn. Khi người dùng có thể dễ dàng tìm thấy các trang nơi sản phẩm của bạn, biểu mẫu đăng ký email hoặc nội dung chuyển đổi khác được đặt, bạn sẽ giúp họ đơn giản hơn để họ mua hàng hoặc đăng ký.

Trong WordPress, menu là một tính năng vốn có.Tuy nhiên, theme  WordPress cũng đóng một vai trò quan trọng khi nói đến việc tạo kiểu và đặt menu hoặc menu của bạn.

Vì lý do này, menu WordPress của bạn có thể có nhiều dạng khác nhau. Quen thuộc nhất là menu tiêu đề:

ví dụ trình đơn tiêu đề

Một ví dụ về menu tiêu đề thông thường

Bạn cũng có thể tạo một menu chân trang bổ sung ở cuối trang của bạn.

04.27.2020-14.06.33

 

 

Ngoài ra, bạn có thể cân nhắc sử dụng menu bên cạnh.

 

ví dụ menu thanh bên

Một ví dụ về menu thanh bên

Mỗi Loại điều hướng này phù hợp ý tưởng cho nhiều loại trang web. Bạn có thể tham khảo và lựa chọn phù hợp đối với website và theme bạn đang sử dụng.

Cách tạo Menu thả xuống trong WordPress (Trong 5 bước)

Nếu bạn đã quyết định rằng một menu dropdown  phù hợp với trang web WordPress của bạn, thì việc thiết lập một menu khá đơn giản. Bằng cách sử dụng các tính năng menu gốc có sẵn trong WordPress, bạn có thể tạo một hệ thống điều hướng tùy chỉnh phù hợp với nhu cầu của bạn chỉ trong năm bước.

Bước 1: Tạo các mục menu của bạn

Đầu tiên bạn truy cập tới công cụ tạo menu.

04.27.2020-14.15.09

Tiếp theo , bạn sẽ thấy một tùy chọn nơi bạn có thể chọn một trong các menu hiện có để chỉnh sửa, cũng như tùy chọn để tạo menu mới :

Tạo liên kết menu mới ở đầu trình chỉnh sửa menu WordPress

Tạo liên kết menu mới ở đầu trình chỉnh sửa menu WordPress

Trong ví dụ này, chúng tôi sẽ chọn tùy chọn sau và tạo một menu mới, tôi nhập tên menu sau đó nhấn tạo .

 

Đặt tên và tạo menu mới

Đặt tên và tạo menu mới

Bây giờ bạn đã sẵn sàng để bắt đầu thêm các mục vào menu WordPress của mình. Bạn lựa chọn các mục bên góc phải và nhấn thêm vào menu, bạn có thêm các page, post, sản phẩm, thư mục theo mong muốn.

Thêm trang vào menu

Nếu bạn muốn tạo link đặc biệt trên menu, bạn có thể vào phần custom link và nhập đường dẫn cũng như tên và nhấn thêm vào menu.

 

Thêm một liên kết tùy chỉnh vào menu

Tương tự bạn có thể thêm các thư mục vào bảng điều khiển menu theo mong muốn.

Thêm danh mục vào menu

Thêm danh mục vào menu

Bước 2: Sắp xếp Menu WordPress của bạn

Khi bạn đã thêm tất cả các mục menu của mình, bạn sẽ thấy chúng được liệt kê ttrong phần trang quản lý menu.

Phần Cấu trúc Menu của trình chỉnh sửa menu

Phần Cấu trúc Menu của trình chỉnh sửa menu

Ban đầu, các mục menu sẽ xuất hiện theo thứ tự mà bạn đã thêm chúng. Tuy nhiên, bạn có thể dễ dàng sửa đổi thứ tự bằng cách kéo lên xuống. Điều này sẽ cho phép bạn tạo một menu đơn giản không có chức năng dropdown.

Để tạo Menu dropdown, Đơn giản nhất là tiếp tục kéo và thả, nhưng bắt đầu lồng các mục menu nhất định bên dưới các mục khác:

Tạo menu thả xuống WordPress

Như ví dụ trên thì Menu dropdown của tôi sẽ có kết quả như sau:

Menu thả xuống WordPress

Bằng cách sử dụng trình chỉnh sửa trình đơn giản kéo / thả theo cách này, bạn có thể tạo bất kỳ kiểu và kết hợp nào của menu dropdown WordPress. Tuy nhiên, hãy nhớ rằng quá nhiều mục menu có thể gây nhầm lẫn cho người dùng.

Tốt nhất là hạn chế số lượng menu phụ bạn kết hợp, để tránh làm lộn xộn quá trình điều hướng của bạn.

Bước 3: Kết hợp hình ảnh vào Menu WordPress của bạn

 

Một ví dụ về menu kết hợp hình ảnh như sau .

Menu thả xuống WordPress với hình ảnh bên cạnh các liên kết điều hướng
Menu thả xuống WordPress với hình ảnh

Bạn bấm vào mũi tên ngay cạnh menu để tuỳ chỉnh menu của mình, sau đó chọn hình ảnh phù hợp với mong muốn.

Phần Menu Image trong trình chỉnh sửa menu

Phần Menu Image trong trình chỉnh sửa menu

Ở đây cũng có các tuỳ chọn hiển thị hình ảnh, bạn chọn cho phù hợp, nhớ nên để hình ảnh nhỏ, tránh menu làm vỡ trang web.

 

Bước 4: Thêm CSS tùy chỉnh vào Menu thả xuống của bạn

Việc này  không được khuyến nghị cho người mới bắt đầu, đổi với người dùng sử dụng wordpress chuyên nghiệp, bạn có thể thêm CSS vào menu của mình. bạn có thể truy cập bật tính năng này ở phần tuỳ chọn trong trang sửa menu.

Tab Tùy chọn màn hình trong trình chỉnh sửa menu

Hộp kiểm CSS Classes trong tab Tùy chọn màn hình

Bật chỉnh sửa css trong menu.

Như vậy khi bật lên, bạn vào chỉnh sửa menu, sẽ có thêm phần CSS cho bạn tuỳ chỉnh.

 

Trường Lớp CSS trong trình chỉnh sửa menu

Trường Lớp CSS trong trình chỉnh sửa menu

Tại đây bạn  có thể thêm một hoặc nhiều lớp CSS vào các mục menu của mình, mọi mã tùy chỉnh bạn đưa vào biểu mẫu  sẽ chỉ áp dụng cho các mục trong menu  mà bạn thiết lập.

Bước 5: Xuất bản Menu của bạn trong các vị trí chính

Sau khi thiết lập hoàn tất bạn nhớ lưu lại menu của mình, sau đó phần cài đặt menu bạn nhớ tuỳ chọn vị trí hiển thị trên theme đối với menu bạn vừa tạo. Thiết lập này sẽ thay đổi một chút tùy thuộc vào theme của bạn và vị trí menu mà nó hỗ trợ. Trong ví dụ này, chúng tôi sẽ sử dụng chủ đề Twenty Twenty , tôi chọn vị trí hiển thị và nhấn lưu.

Phần Cài đặt menu trong trình chỉnh sửa

Phần Cài đặt menu trong trình chỉnh sửa

 

Menu ngang để bàn cho chủ đề Twenty Twenty

Menu ngang để bàn cho chủ đề Twenty Twenty

Bạn cũng có thể truy cập tới tab quản lý điều hướng menu, bạn truy cập tới phần này, sau đó chọn menu muốn hiển thị tại vị trí mong muốn sau đó lưu lại.

Tab Quản lý vị trí

Quản lý vị trí menu

Bạn cũng có thể truy cập phần LIve Preview để chỉnh sửa và thêm menu thực tế cho trực quan.

Tùy chọn Manage with Live Preview

Tùy chọn Manage with Live Preview

Bạn sẽ được chuyển tới trang chỉnh sửa, sau đó bạn chọn menu ở vị trí phù hợp và xem hiển thị ngoài website.

Bản xem trước trực tiếp cho menu WordPress trong Customizer

Bản xem trước trực tiếp cho menu WordPress trong Customizer

Cuối cùng bạn có thể xuất bản menu sau khi chỉnh sửa hoàn tất.

 

Xử lý sự cố Menu Dropdown WordPress của bạn

Nếu bạn đã cấu hình menu của mình như được mô tả ở trên, nhưng chức năng dropdown thông hoạt động, có một số nguyên nhân có thể.

Mặc dù chúng tôi không thể đề cập đến tất cả chúng ở đây, chúng tôi có thể đề xuất  giúp bạn thu hẹp nguyên nhân của vấn đề để bạn có thể tìm ra giải pháp thích hợp.

Thông thường, một menu bị trục trặc là kết quả của mã xung đột giữa menu tùy chỉnh và theme của bạn. Điều đầu tiên bạn nên làm nếu menu của bạn không hoạt động là chuyển sang một chủ đề mặc định, chẳng hạn như Twenty Twenty. Nếu menu của bạn bắt đầu hoạt động trở lại, bạn sẽ biết vấn đề có liên quan đến chủ đề của bạn. Sau đó, bạn có thể liên hệ với nhà phát triển chủ đề của mình để tìm kiếm giải pháp.

Một vài nguyên nhân có thể khác bao gồm:

  • Mã sai:  Kiểm tra kỹ xem mọi  mã CSS tùy chỉnh bạn đã thêm có đúng không và bạn có đang sử dụng các lớp CSS như được mô tả trong Bước 4 không.
  • Không tương thích với plugin:  Hãy thử vô hiệu hóa mọi plugin liên quan đến menu bạn đã cài đặt, để xem liệu điều đó có giải quyết được vấn đề không.
Chúc các bạn thành công. !

Bài viết liên quan

Xem nhiều

giá tốt, chất lượng cao mình rất hài lòng
chất lượng dịch vụ tốt lắm...á
chất lượng dịch vụ rất tốt.
giá tốt, chất lượng cao mình rất hài lòng
Tino giá tốt,chất lượng cao,dịch vụ tư vấn và hổ trợ khách hàng tận tâm.
tôi rất thích sử dụng dịch vụ tại tinohostinohost. tốc độ tải nhanh và cực kỳ rẻ
Dịch vụ chăm sóc khách hàng tốt
Dùng rất oke nha mọi người
Dịch vụ chăm sóc khách hàng tốt, mình rất hài lòng về dịch vụ của TINOHOST
Đã mua rất nhiều tên miền tại Tinohost. Chất lượng tốt
Dịch vụ tốt, chăm sóc khách hàng chu đáo. Mình rất yên tâm khi sử dụng các dịch vụ của Tinohost.
dịch vụ và chăm sóc khách hàng rất tốt , mình rất thích tinohost , mình đã sử dụng nhiều dịch vụ của tinohost rồi
tuyệt vời chăm sóc khách hàng quá tốt
dịch vụ và chăm sóc khách hàng rất tốt , mình rất thích tinohost , mình đã sử dụng nhiều dịch vụ của tinohost rồi
Quá tốt - Quá xuất sắc và tuyệt
Hỗ trợ nhiệt tình. dịch vụ chất lượng
Đội ngũ support rất nhiệt tình.
Sử dụng dịch vụ của bạn Tinohost 2 3 năm nay chưa khi nào phải thất vọng.
dịch vụ hỗ trợ rất nhanh, tốc độ hosting tốt
Hộ trợ tốt, nhanh. Tuyệt vời 🥰
tuyệt vời, dịch vụ cực tốt và hỗ trợ siêu nhanh
Làm việc nhanh chóng, giá thành hợp lí.
Chất lượng phục vụ tốt, hỗ trợ khá nhanh chóng và chất lượng gói lớn tốt, gói nhỏ cần tốt hơn.
Hosting rẻ và nhanh thích hợp cho học sinh sinh viên như mình
dịch vu tốt ! Sẽ sử dụng thưởng xuyên !
Mỗi lần cần gì, nhắn Tino là được hỗ trợ ngay. Nên một đứa không biết gì về web như mình cũng tạo được blog. Cơ bản mình chỉ lo viết, mọi thứ có anh IT của Tino lo hết.
Nhìn chung thì Tino xứng đáng là một trong những nhà cung cấp host giá rẻ #1 tại VN. Bên này support khá nhanh và nhiệt tình nên quá trình sử dụng diễn ra tương đối trơn tru.
Chất lượng quá ok so với mức giá. Các SME có thể tham khảo để dựng web nhé.
uy tín chất lượng chuẩn cho 5 sao
Dịch vụ nhanh chóng thanh toán tiện lợi
Dịch vụ nhanh chóng, giá cả hợp lý
Chất lượng phục vụ ok, support khá nhanh chóng và chất lượng gói lớn tốt, gói nhỏ cần tốt hơn.
Dịch vụ tốt, giá cả hợp lý👍
Rất hay, rất tốt, rất hữu ích
Hỗ trợ rất nhanh và nhiệt tình
Chất lượng phục vụ ok, support khá nhanh chóng và chất lượng gói lớn tốt, gói nhỏ cần tốt hơn.
dịch vụ tốt, thanh toán nhanh chống
Hài lòng dịch vụ của tinohost
Sau khi sử dụng dịch vụ của TinoHost. Mình thấy website load nhanh hơn hẳn so với sử dụng ở nhà cung cấp cũ. Giá cả do mình đc mua với giá sale 99% của TinoHost nên rất là rẻ. Gói mình mua là gòi Hosting Bussiness 20GB. Thông số cấu hình cao nên web load khá mượt
Chúc TinoHost phát triển!
domain rẻ, có nhiều gói hữu ích thích hợp cho sinh viên
Dịch vụ tốt . Support nhiệt tình
Chất lượng OK
Nhanh chóng
Đã gia hạn thêm gói 1 năm nữa của TINO host. Chất lượng sản phẩm và dịch vụ thật sự tốt. AE nên trải nghiệm thử và tin dùng. Thank you TINO 👍
dịch vụ rất tốt
Nhân viên support nhanh, hỗ trợ nhiệt tình, giao dịch tự động nên khá tiện
Đã dùng nhiều dịch vụ tại Tinohost, chất lượng tốt, rất hài lòng ...😀
Các bạn hỗ trợ làm việc nhiệt tình và chuyên nghiệp!
Sự dụng rất hài lòng với các dịch vụ của tinohost
Dịch vụ tốt, uy tín chất lượng
Tino dịch vụ quá tuyệt vời
Giá rẻ, dịch vụ tốt, hỗ trợ nhanh chóng
dịch vụ rất tốt rất tuyệt vời
Giá hợp lý cho người mới dùng
Mình thấy Tinohost có giao diện thân thiện, dễ đăng ký sử dụng cho người mới tập tành làm web như mình. Hosting hỗ trợ có nhiều lựa chọn về dung lượng và giá cả! Thanh toán qua momo thuận tiện. Recommended!
wed quá ok làm việc nhanh ngọn
Dịch vụ tốt. Khá hài lòng vì support nhiệt tình
Dịch vụ quá tuyệt vời danh cho các bạn
đội sp của Tino rất nhiệt tình và nhanh chóng
Xin cảm ơn đội ngủ kỹ thuật. Các bạn rất chuyên nghiệp và thân thiện. Tôi sẽ giới thiệu các bạn cho bạn bè của mình.
Dịch vụ hỗ trợ tốt, ổn định, thanh toán dễ dàng.
Mình từng dùng VPS bên Vietel IDC, hay gặp lỗi vặt và bảo trì liên tục. Nhưng Tino thì rất ok
dùng tốt, nhanh, dễ sử dụng
Giao diện đẹp mắt, dễ sử dụng
Thích cách tư vấn tận tình và nhanh gọn của Tino mỗi khi có vấn đề trục trặc. Hosting ổn định, giá rẻ tốt lắm nhé mọi người
Đề nghị xem lại vấn đề phục vụ khách hàng (livchat)!
Good. Tốc độ cao. Tùy chỉnh nhiều trên shared hosting.
hosting ngon, giá luôn rẻ, tôi làm code nhưng rất thích sài host tino
Tino cung cấp host rất chuyên nghiệp. Đội ngũ kỹ thuật hỗ trợ rất tận tâm và nhiệt tình. Mình sẽ tiếp tục ủng hộ Tino 🥰.
Rất tuyệt vời🙆🙆🙆🙆🙆🙆🙆🙆🙆
Xét về tầm giá thì TinoHost rất đáng để mua và sử dụng lâu dài.
Dịch vụ chất lượng, ủng hộ 1 năm nay rồi
tuyệt vời quá đi,tuyệt vời quá đi
Tốc độ ổn định, tư vấn nhiệt tình
mới tham gia, mong mọi người hỗ trợ thêm
Tốc độ khá tốt với gói rẻ nhất 9k
Giao dịch nhanh,support nhanh và tận tình,chuyển miền nhanh,Hosting Ok
mua sản phẩm dịch vụ tinhot rất tốt tặng ad 5tr ** luon nè🥰🥰🥰
tinohost
một truong những nơi bán hosting rẻ, chất lượng dành cho anh em nào cần để làm web
mua tại : tinohost.com
Tư vấn tận tình và nhanh gọn mỗi khi có vấn đề trục trặc. Hosting ổn định, giá rẻ tốt lắm nhé mọi người
mình đã mua 2 tên miền + hosting của Tino Host . quả nhiên hiệu quả SEO cải thiện đáng kể và chứng chỉ bảo mật HTTPS miễn phí của Tino Host cũng ko kém phần quang trọng cho việc SEO website của mình
Tino host là một trong nhà cung cấp tốt nhất mình từng sử dụng. Với ưu đãi khuyến mại nhiều, giá thành rẻ kèm theo đó là sự support tuyệt vời của các admin. Nếu ai chưa lựa chọn được nhà cung cấp cho bản thân mình thì Tinohost sẽ là câu trả lời tốt nhất.
dịch vụ tốt, đội ngũ support nhiệt tình, cảm ơn #tinohost
Uy tín, chất lượng, nhân viên hỗ trợ nhiệt tình
mua 2 domain tại tinohost dùng rất chất lượng
Đã mua 02 domain và hosting tại TinoHost, hài lòng cách tư vấn và chăm sóc khách hàng của TinoHost :)
Giá rẻ cấu hình mạnh, black friday là sự bùng nổ của Tino
Hay web bán tài nguyên rất ngon
dịch vụ tốt, mua luôn host chất lượng cao của công ty nhân dịp blackfriday, cảm ơn #tinohost
Dịch vụ rất tốt, nhân viên tận tình.
Hỗ trợ nhiệt tình nhất trong các nhà cung cấp mih từng dùng. Không những server mạnh, ưu đãi có 1 không 2 mà còn nhiều plugin pro bản quyền đính kèm nữa. Quyết định gắn bó "Lifetime" với tino 😁
Dịch vụ tốt hỗ trợ nhanh chóng
Thích cách tư vấn tận tình và nhanh gọn của Tino mỗi khi có vấn đề trục trặc. Hosting ổn định, giá rẻ tốt lắm nhé mọi người
mình có mua 2 tên msiền của tino, mình rât thích cách tư vấn và chăm sóc khách hàng tại đây. Ngoài ra giá domain khá rẻ, phù hợp cho mọi người. 5 sao
Dịch vụ tốt, support nhiệt tình
tinohost tuyệt vời giá cả hợp lý
domain mua rất rẻ :))))
tốt, chất lượng, hostingok
Next Reviews
CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO
Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Center, Số 72 Lê Thánh Tôn,  Phường Bến Nghé, Q. 1, TP. Hồ Chí Minh

Văn phòng kinh doanh: Số 42 Trần Phú, Phường 4, Quận 5, TP HCM
GPKD số 0315679836 do Sở KH và ĐT TP Hồ Chí Minh cấp
Hotline: 0364 333 333
Góp ý/Phản ánh dịch vụ: 0933 000 886