fbpx

Cách tạo Menu thả xuống trong WordPress

QUẢNG CÁO

Cách tạo Menu thả xuống trong WordPress

Nếu bạn đã quyết định rằng một menu thả xuống có thể 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 vài bước.

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

Bắt đầu bằng cách điều hướng đến Giao diện > Menu  trong bảng điều khiển WordPress của bạn:

Menu WordPress

Truy cập trình chỉnh sửa menu trong bảng điều khiển WordPress

Những gì bạn thấy trong trình chỉnh sửa menu sẽ thay đổi một chút tùy thuộc vào chủ đề của bạn.

Tuy nhiên, điều quan trọng cần lưu ý bây giờ là tùy chọn đầu tiên trong tab Chỉnh sửa Menu . 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, mình sẽ chọn tùy chọn sau và tạo một menu mới.

Điều này liên quan đến việc thêm tiêu đề và sau đó nhấp vào nút Tạo Menu  :

Đặ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. Trong hầu hết các trường hợp, tốt nhất là giữ menu của bạn đơn giản nhất có thể, trong khi vẫn cung cấp cho người dùng đủ thông tin để đến nơi họ muốn.

Kết hợp quá nhiều trang có thể làm cho khách truy cập và điều hướng khó hơn thay vì dễ dàng hơn.

Có một vài cách khác nhau để thêm về các mục menu của bạn. Hai cái đầu tiên là Pages và Bài viết , và chúng hoạt động rất giống nhau.

Thêm trang vào menu

Thêm trang vào menu

Trong thanh bên của trình chỉnh sửa menu, chỉ cần chọn các hộp kiểm cho mỗi trang hoặc bài đăng bạn muốn đưa vào và nhấp vào nút Thêm vào Menu :

Tùy chọn tiếp theo của bạn là kết hợp Liên kết tùy chỉnh . Điều này liên quan đến việc cung cấp URL cho trang bạn muốn hướng người dùng đến, sau đó tạo nhãn ngắn gọn nhưng mô tả cho nó. Sau đó, bạn có thể nhấp vào Thêm vào Menu  một lần nữa:

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

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

Cuối cùng, bạn cũng có thể thêm Danh mục Trang và Bài  vào menu điều hướng của mình. Điều này sẽ đưa người dùng đến một trang lưu trữ nơi họ có thể xem tất cả nội dung về một chủ đề cụ thể.

Blog và các trang web nặng nội dung khác có thể thấy tính năng này đặc biệt hữu ích:

Thêm danh mục vào menu

Thêm danh mục vào menu

Cũng như các  tùy chọn Trang và Bài viết, chỉ cần chọn các hộp kiểm của các danh mục bạn muốn đưa vào và chọn Thêm 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ê trong các ô riêng lẻ trong Cấu trúc menu  trong trình chỉnh sửa:

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 tổ chức của họ bằng cách kéo và thả chúng vào vị trí. Đ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 thả xuống.

Có một số cách để thêm về trình đơn thả xuống vào menu WordPress của bạn.

Đơ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

Các danh mục lồng nhau dưới trang Blog

Ví dụ, trong hình trên, mình đã chuyển ba danh mục bài đăng mà mình đã thêm vào menu bên dưới Blog , biến chúng thành các mục con của Blog. Trên frontend, điều này sẽ tạo ra một menu thả xuống trông như thế này:

Menu thả xuống WordPress

Ví dụ về menu thả xuống trong WordPress

Nếu bạn muốn thêm menu thả xuống bao gồm tất cả các danh mục trên trang web của mình, bạn có thể làm như vậy bằng cách thêm Liên kết tùy chỉnh vào menu. Sử dụng loại # # làm URL và danh mục của Google hoặc một cái gì đó tương tự cho nhãn:

Tạo nhãn Danh mục cho menu

Tạo nhãn Danh mục cho menu

Sau đó, bạn có thể thêm tất cả các danh mục của bạn vào menu và lồng chúng dưới nhãn này. Mỗi danh mục sẽ có thể nhấp được, nhưng nhãn sẽ không là:

Menu thả xuống Danh mục

Menu thả xuống Danh mục

Sử dụng một kỹ thuật tương tự, bạn cũng có thể ẩn tất cả các mục menu của mình trong một menu thả xuống duy nhất.

Thêm một Liên kết tùy chỉnh khác, sử dụng Tiếng Việt #, làm URL và Menu Menu Đá làm nhãn. Sau đó, lồng tất cả các mục menu khác của bạn theo đó:

Lồng tất cả các liên kết điều hướng dưới một nhãn Menu duy nhất

Lồng tất cả các liên kết điều hướng dưới một nhãn Menu duy nhất

Kết quả trên frontend sẽ là một menu thả xuống bao gồm các trang chính của trang web của bạn.

Như bạn có thể thấy trong mục Danh mục bên dưới, mọi nội dung được lồng trong mục phụ sẽ hiển thị trong menu phụ:

Một menu điều hướng thả xuống WordPress thực sự

Một menu điều hướng thả xuống WordPress thực sự

Bằng cách sử dụng trình chỉnh sửa trình đơn kéo và 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 thả xuống 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

Nếu đến cuối Bước 2, menu thả xuống của bạn trông giống hệt như bạn tưởng tượng, bạn có thể bỏ qua Bước 5 để xuất bản nó. Tuy nhiên, có những bước bổ sung bạn có thể muốn thực hiện nếu bạn muốn cải thiện menu của mình bằng các tùy chỉnh.

Một chiến thuật cần xem xét là kết hợp các yếu tố trực quan vào thực đơn của bạn để cung cấp hướng dẫn thêm cho khách truy cập. Mặc dù các nhãn mô tả rất quan trọng, đôi khi một hình ảnh hoặc biểu tượng có thể giúp người dùng nhanh chóng xác định vị trí của một liên kết điều hướng cụ thể.

Có thể thêm hình ảnh bằng CSS tùy chỉnh, chúng tôi sẽ thảo luận ngay sau đây. Tuy nhiên, mình khuyên bạn nên chọn một plugin như Menu Image, Icon Made Easy :

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ằng cách này, bạn không phải lo lắng về việc làm phiền với bất kỳ mã nào để thêm sự quan tâm trực quan vào menu thả xuống của bạn.

Chỉ cần cài đặt plugin và sau đó quay lại Giao diện> Menu :

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

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

Bạn sẽ thấy rằng bây giờ có các tùy chọn hình ảnh cho mỗi trang bạn đã đưa vào menu của mình. Bạn có thể chọn ảnh, kích thước và vị trí của từng trang. Hãy nhớ lưu các thay đổi của bạn khi bạn hoàn thành.

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

Mặc dù không được khuyến nghị cho người mới bắt đầu, người dùng trung cấp và cao cấp có thể muốn kết hợp kiểu dáng riêng của họ trong menu thả xuống WordPress của họ. Tuy nhiên, trước khi bạn chuyển ngay vào CSS của mình, bạn sẽ cần thêm một lớp vào menu của mình.

Nếu bạn bỏ qua bước này, CSS tùy chỉnh của bạn có thể gây ra sự cố cho bất kỳ menu nào khác trên trang web của bạn. Chẳng hạn, bạn có thể vô tình áp dụng kiểu dáng cho menu chân trang mà bạn chỉ có ý nghĩa cho menu thả xuống chính của bạn.

Trong trình chỉnh sửa menu, nhấp vào Tùy chọn màn hình  ở góc trên bên phải:

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

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

Sau đó, chọn hộp cho các Lớp CSS :

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

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

Điều này sẽ thêm một  trường Lớp CSS vào mỗi trang trong menu của bạn:

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

Khi bạn 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 định kiểu sẽ chỉ áp dụng cho các mục trong menu của bạn với lớp bạn chỉ định.

Bây giờ bạn có thể đi tới biểu định kiểu hoặc Trình tùy chỉnh và làm việc với kiểu dáng tùy chỉnh của bạn .

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

Khi menu thả xuống WordPress của bạn được cấu trúc để đáp ứng nhu cầu của bạn và bạn đã kết hợp bất kỳ tùy chỉnh nào bạn muốn, bạn sẽ sẵn sàng xuất bản nó lên trang web của mình.

Quá trình này sẽ thay đổi một chút tùy thuộc vào chủ đề 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 .

Trong trình chỉnh sửa menu, cuộn xuống  phần Cài đặt menu :

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

Bạn có thể chọn hộp kiểm đầu tiên nếu bạn muốn các trang mới được tự động thêm vào menu của bạn. Nếu bạn mới bắt đầu với trang web của mình và chưa thêm tất cả các trang chính của mình, điều này có thể hữu ích. Tuy nhiên, hãy cẩn thận rằng bạn không vô tình thêm quá nhiều món vào thực đơn của mình.

Bên dưới tùy chọn này, bạn sẽ thấy một danh sách các hộp kiểm lưu ý các khu vực khác nhau trên trang web của bạn nơi bạn có thể hiển thị menu của mình.

Các chủ đề Hai mươi Hai mươi bao gồm các lĩnh vực thực đơn khác nhau: Desktop ngang menu , Desktop Mở rộng menu , menu di động , Footer menu , Menu xã hội .

Trong trường hợp này, menu chúng tôi đã tạo phù hợp nhất với  vị trí Menu ngang của máy tính để bàn , nằm trong tiêu đề của trang web:

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

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

Bạn cũng có thể xem xét điều hướng đến  tab Quản lý vị trí trong  khu vực Menu của bảng điều khiển của bạn. Tại đây, bạn có thể thấy tất cả các vị trí menu được hỗ trợ bởi chủ đề của mình, cũng như menu nào bạn đã gán cho từng vị trí:

Tab Quản lý vị trí

Tab Quản lý vị trí

Khi đặt các menu của bạn, có thể hữu ích để xem chúng sẽ trông như thế nào trên frontend.

Tùy chọn Manage with Live Preview

Tùy chọn Manage with Live Preview

Nhấp vào nút Quản lý với Xem trước trực tiếp  để xem menu của bạn sẽ xuất hiện ở vị trí bạn đã chọn cho nó bằng cách sử dụng Trình tùy chỉnh WordPress:

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

Sau đó, bạn có thể xuất bản menu hoặc menu trực tiếp từ Customizer. Nếu bạn cần thêm hoặc xóa các mục khỏi menu thả xuống, bạn chỉ cần quay lại trình chỉnh sửa menu và thực hiện các điều chỉnh cần thiết.

Cập nhật nhanh nhất thông tin bài viết bằng cách bấm đăng ký.

Lê Xuân Hảo

Lê Xuân Hảo

X️in chào, mình là Xuân Hảo 👋 👋 👋
Mình đang công tác tại Công Ty Cổ Phần Tập Đoàn TINO, hy vọng các thông tin mà mình viết hoặc chia sẻ ở đây có ích cho bạn, chúc bạn một ngày vui vẻ nhé !. ✌️ ✌️

Liên quan đến bài đăng

Recommended

Tài liệu nổi bật

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
dịch vụ tuyệt vời . chăm sóc khách hàng rất tốt
Quá tốt - Quá xuất sắc và tuyệt
Hỗ trợ nhiệt tình. dịch vụ chất lượng
Host ổn định. miền giá rẻ. hỗ trợ nhanh
Độ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.
host dùng chất lượng, miền giá rẻ
Host chất lượng uy tín, dịch vụ tốt
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ụ trãi nghiệm tốt, cho 5 sao
Hài lòng về dịch vụ và tư vấn
Dịch vụ tốt . Support nhiệt tình
Dịch vụ thật tuyệt vời
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
đã mua tên miền và hosting bên Tino, sẽ trải nghiệm lâu dài
Đã 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ụ tốt hỗ trợ support nhanh
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
Dv Rất Tốt Và Rất Hay
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
ok, chưa dùng nên để test thử xem sao, vẫn đánh giá 5* trước
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)!
Tư vấn tận tình và nhanh. Hosting ổn định, giá rẻ
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.
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è🥰🥰🥰
là khách hàng của tino lâu năm, mình rất hài lòng với cách làm việc cực kì chuyên nghiệp của tino. sản phẩm chất lượng và dịch vụ chăm sóc cũng rất chất lượng. hi vọng tino tiếp tục duy trì và phát huy tinh thần này
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
dịch vụ tốt, chăm sóc khách hàng nhanh, đã mua 4 tên miền 😁
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
Next Reviews

Xin Chào !

Đăng nhập vào tài khoản của bạn bên dưới

Truy xuất mật khẩu của bạn

Vui lòng nhập tên người dùng hoặc địa chỉ email của bạn để đặt lại mật khẩu của bạn.

Add New Playlist