Trang web mình có 2 menu. Một cái ở trên logo:
Và một cái ở ngay dưới logo:
- Bài số: 9
- Năm thực hiện: 2018
- Video hướng dẫn: Có
- Thuộc dự án: Hướng dẫn sử dụng WordPress cho người mới
Mục đích quan trọng nhất của menu là giúp cho người ghé thăm trang web có cái nhìn tổng quan về nội dung của trang & giúp họ biết điều bản thân đang quan tâm tìm hiểu nằm ở đâu.
Nếu bạn để ý, có thể rất lâu sau bạn mới tạo logo chính thức cho website, nhưng menu thì phải có sau vài ngày hoặc cùng lắm là vài tuần khi web chính thức online.
Một trang web bao giờ cũng có ít nhất 1 menu, và vị trí cũng như số lượng thực tế của nó được quy định trước bởi giao diện mà bạn chọn. Menu có thể nằm ở trên, dưới, bên tay trái, vân vân.
Giờ chúng ta vào phần thực hành.
A. Tổng quan
Sau khi đăng nhập vào WordPress, ở Dashboard bạn vào Appearance > Menus:
Nếu dùng giao diện tiếng Việt, bạn vào Giao diện > Menu:
Bạn sẽ được đưa vào khu vực tùy chỉnh như thế này (tiếng Anh):
Mình sẽ giải thích sơ qua một số phần nằm trên cùng:
- Edit Menus: nghĩa là Sửa Trình Đơn, ở phần này bạn sẽ sửa sang lại menu, thêm, xóa các liên kết, mục cho nó.
- Mange Locations: nghĩa là Quản Lý Vị Trí Trình Đơn, ở phần này bạn sẽ đưa menu mà bạn tạo vào vị trí mà theme WordPress của bạn cung cấp. Nó có thể ở trên, bên trái hoặc ở dưới.
- Select a menu to edit: nghĩa là Chọn Menu Để Sửa, một trang web có thể có nhiều menu, và bạn muốn chọn menu nào để sửa thì chọn ở đây, sau đó nhấn vào nút Select bên cạnh.
B. Các thao tác cơ bản
1. Tạo menu mới trong WordPress
Bạn nhấn vào create a new menu (ngay bên cạnh nút Select ở phần đầu) để tạo một menu mới, bạn đặt tên cho menu muốn tạo rồi nhấn Create Menu:
Sau đó bạn nhìn vào bên tay trái sẽ có một khu vực giống như thế này:
Đây là phần rất quan trọng, vì nó cung cấp nội dung cho menu, bao gồm 4 phần:
- Pages: Là các trang trên trang web của bạn
- Posts: Là các bài đăng trên trang web của bạn
- Custom Links: Là các liên kết tùy chỉnh (tự do) mà bạn muốn thêm vào
- Categories: Là các chuyên mục (thư mục) trên trang web của bạn
(Xem thêm: sự khác nhau giữa post và page trong WordPress).
Bạn muốn thêm phần nào chỉ cần tick chọn và nhấn Add to Menu.
Giả sử tôi tick chọn như sau:
Với Pages:
Với Posts:
Với Custom Links:
Mình giải thích thêm một chút ở phần này:
- URL: là liên kết mà bạn muốn xuất hiện trên Menu, nó có thể là bất kỳ liên kết nào, thuộc trang web của bạn hoặc hướng tới các website khác.
- Link Text: là nội dung đại diện cho liên kết đó hiện trên menu.
Với Categories:
Với đa số trang web, thư mục rất hay được đưa vào menu, vì thư mục là nơi chứa một nhóm các bài posts liên quan đến nhau. Thí dụ thư mục Web & WordPress trên trang mình chứa các bài viết liên quan đến chủ đề đó, còn thư mục SEO lại chứa các bài viết về SEO. Ai muốn đọc chủ đề nào sẽ ghé thăm thư mục tương ứng.
OK. Khi bạn nhấn Add to Menu, bạn sẽ thấy bên tay phải nội dung được đưa vào menu:
Menu sẽ xếp theo thứ tự như trên, nếu bạn muốn đổi thứ tự, chỉ cần kéo thả từng mục theo ý muốn. Chẳng hạn tôi muốn đưa trang Home lên đầu, đưa About và Contact xuống cuối. Kết quả:
Nếu bạn muốn xóa mục nào đó trong menu, chỉ cần click vào cái tương ứng và nhấn Remove. Giả sử, tôi muốn xóa trang Sample Page:
Bạn cũng có toàn quyền thay đổi nội dung hiển thị ra bên ngoài của menu, chẳng hạn tôi thấy mục “Bạn nhập tiêu đề bài viết ở đây” trên Menu là quá dài, và muốn sửa lại nội dung này. Tôi chỉ việc click vào nó và sửa ở chỗ Navigation Label, tôi sửa thành “Bài Post”, bạn nhấn vào hình tam giác để nó thu gọn lại là xong, sửa đổi này sẽ tự lưu:
Giờ cấu trúc menu của tôi sẽ trông giống như thế này (thứ tự đã thay đổi, một mục bị xóa và một mục được đổi tên):
Cuối cùng bạn nhất nút Save Menu để lưu lại thiết kế mà bạn vừa tạo.
2. Chọn vị trí cho menu trong WordPress
Tạo được menu mới chỉ xong một nửa công việc, menu của bạn vẫn không hiện ra ngoài cho đến khi bạn chọn vị trí chính thức cho nó.
Để chọn vị trí bạn vào Manage Locations, và tùy vào theme, bạn sẽ thấy số lượng cũng như các kiểu menu khác nhau.
Chẳng hạn như cái này chỉ có 2 menu:
Trong khi cái này cung cấp những 3 menu:
Thường thì giao diện trả phí sẽ cung cấp nhiều tùy chọn hơn. Cái có 3 menu nằm trong giao diện trả phí mà mình mua.
Quay lại vấn đề chính, chọn menu để nó hiện ra bên ngoài.
Bạn nhìn vào cột Theme Location / Vị trí trong giao diện. Thường menu chính sẽ là cái xếp đầu tiên và có tên như Top Menu, Main Menu hay Primary Menu.
Tiếp theo bạn click vào ô bên tay phải để nó xổ xuống các chọn lựa cho menu ở vị trí đó (là các menu mà bạn tạo hoặc theme đã tạo sẵn):
Cuối cùng bạn nhất Save Changes để lưu thiết lập (tôi chuyển từ Top Menu sang Menu chính Kiến càng).
Quay ra trang chủ để kiểm tra, bạn sẽ thấy kết quả như thế này:
Bạn có thể click vào từng mục trong menu để chắc chắn kết quả đúng ý mình.
3. Chỉnh sửa menu trong WordPress
Để chỉnh sửa menu bạn phải tạo được ít nhất một menu rồi hoặc là giao diện cung cấp sẵn một menu cho bạn (thì mới có cái để mà sửa chứ).
Đây chính là phần Edit Menus mà chúng ta đã nói sơ qua ở phần đầu. Bạn chỉ cần chọn menu tương ứng rồi nhấn nút Select:
Sau đó nó sẽ hiện ra danh mục bên trong menu. Các thao tác thêm, sửa, xóa, đổi thứ tự giống y như phần 1. Tạo menu mà tôi đã mô tả, do vậy tôi sẽ không nói lặp lại trong phần này nữa.
C. Video hướng dẫn
Chúc các bạn có một menu thật đẹp.
Bài tiếp theo: Quản lý Widget trong WordPress.
Mình gặp một vấn đề với menu là menu của mình có cả page và category. Ví dụ như:
category1 category2 page1 page2
Khi mình truy cập vào page1 thì trên thanh menu hiển thị là đang focus vào page1 bằng cách đổi sang màu đen. Còn với category1, category2 thì không.
Bạn có thể cho mình biết tại sao không. Cảm ơn bạn.
Cái này khả năng cao là do thiết kế của theme là như vậy bạn à, nó có vẻ nhận diện page trong khi không nhận diện category hoặc bị vấn đề gì đó tương tự. Nếu bạn biết CSS có thể can thiệp sâu hơn, còn không thì bạn thử chỉnh sửa xem giao diện đó còn có tùy biến nào nữa hay không.
Menu của mình kích thước nhỏ quá nên mình muốn thay đổi kích thước thì code css như thế nào vậy Anh nhỉ? Mình cũng dùng theme newspaper giống Anh. https://miendl.com/
Hỗ trợ giúp em. Thanks!!!
Theme này mình nghĩ có khả năng điều chỉnh cái đó. Còn điều chỉnh qua CSS sẽ mất công dò tìm id, class lắm bạn à, mà chưa chắc đẹp bằng việc mình sử dùng chức năng có sẵn của theme để điều chỉnh.
Bạn co mình hỏi tí
Mình có Blog trong Catalogies, Mình muốn Edit Bolg thành trang thì làm sao ạh
Chào bạn Đức Anh! Cảm ơn bạn vì bài viết rất chi tiết và hữu ích, đặc biệt cho những ai mới làm quen với wp.
Bạn cho mình hỏi về menu nhé! Mình viết về nước Ý. Mình dùng Mythemeshop MoneyFlows và có custom cái menu với các categories. Có cách nào để khi bấm vào từng Category thì sẽ hiện ra thumbnail 1 bài chính, to (big) và pin to top kiểu như ở homepage, các bài khác thì nằm ở dưới và nhỏ hơn không bạn? Mình đã thử tìm rất nhiều trên google nhưng không thấy ai đề cập. Có lẽ do mình không search trúng từ khóa.
Thêm nữa, cái thumbnail bài viết của mình nó bé tí tẹo, toàn mất chữ và mất tiêu đề, có cách nào để custom không bạn nhỉ? Mình cảm ơn bạn nhiều.
Chào bạn Thảo, vấn đề mà bạn mô tả sẽ rất khó khắc phục nếu bản thân theme đó không cung cấp tính năng mà mình thích. Hiện mình vẫn chưa tìm hiểu một số plugin chuyên để điều chỉnh menu nên không rõ là nó có khả năng can thiệp như bạn muốn không. Vấn đề thumbnail của bạn mình hiện không thấy…Ngoài lề một chút, bạn có lẽ nên thay đổi font chữ vì font bạn đang dùng hiện không hiển thị tiếng Việt tốt, ngoài ra ở phần menu khi hover qua chữ sẽ chuyển sang màu trắng làm chìm vào nền (ở mục, văn hóa, ngôn ngữ, nghệ thuật…)
Kiencang ơi, nếu mà em muốn thêm một danh mục không có sẵn trong categories, thì làm như nào ạ. Em đã thử nhưng kết quả trả về lỗi 404. Híc, e là dân mới vào nghề thui nên hơi hoang mang. Mong được chỉ giáo ạ! Em cảm ơn Kiencang
Chào bạn ở phần biên tập bên tay phải, chỗ categories nó có phần Add New Category, bạn click vào đó rồi thêm thư mục mới là xong.
Để đổi màu cho thanh menu và kéo kích thước của menu (cùng trên 1 hàng) thì làm ntn vậy Anh? Vì lúc đầu với số mục đó nó nằm trên 1 hàng, sau 1 thời gian nó nhảy xuống hàng thứ hai.
Cám ơn bạn!
Cho mình hỏi chút. Mình cài Woocommerce, vào Sản phẩm để tạo Danh Mục sản phẩm đưa lên thanh Menu.
Tuy nhiên, trong Giao Diện – Menu – Page không có Danh mục sản phẩm để đưa sang Main menu.
Thanks.
Bạn tìm kỹ lại xem, vì nó sẽ có nhiều menu trong đó, và tùy giao diện nó sẽ có tên khác nhau. Quan trọng là bạn sẽ phải nhìn ở bên tay trái để thêm liên kết vào.
Mình gặp trường hợp y hệt bạn này. Kiểm tra trong danh mục vẫn thấy báo link đến danh mục cha nhưng trong menu giao diện cha không thấy hiển thị lên . Bạn có thể giúp đỡ mình về trường hợp này không ? Cảm ơn bạn
Chào bạn, cái này nó tùy từng theme, nhưng bạn cần kiểm tra kỹ xem cái menu mình điều chỉnh có được set là menu cho theme không, cái đấy hay là nguyên nhân chính dẫn đến việc dù mình chỉnh mà bên giao diện không hiện ra. Ngoài ra còn cả xóa cache nữa, thì giao diện người dùng mới hiện.
Chào bạn!
Mình đã tạo được thanh menu trên website WordPress (mình cài đặt bằng theme) . Nếu dùng laptop hoặc máy tính bàn thì khi click vào menu đều điều hướng đúng trang mình setup. Nhưng nếu sử dụng điện thoại di động thì khi click vào bất cứ tab menu thì bị điều hướng về trang chủ hoặc bị đứng yên, không điều hướng. Mình đã kiểm tra vài thiết bị di động đều bị lỗi này. Có cách nào khắc phục được lỗi này không, mong được bạn chỉ giáo.
Mình cảm ơn bạn nhiều.
Chào bạn. Bạn thử xóa cache nếu trang bạn có cài plugin cache, và khả năng cao hơn là xem lại theme, có thể theme đó không được thiết kế tốt nên trên giao diện di động nó có vấn đề.
Chào bạn. Cám ơn bạn đã phản hồi. Mình đã làm theo như bạn hướng dẫn. Thanh menu ngang thì điều hướng đúng, còn menu xổ xuống thì vẫn không điều hướng đúng. Mình sử dụng theme của mythemeshop, theme này mình tải free từ web mythemeshop. Nếu thật sự do theme, mình phải đổi theme phải không bạn. Cám ơn bạn
Chào bạn. Mình là newbie. Mình gặp rắc rối khi thêm danh mục con vào danh mục cha nhưng không thể hiển thị ra ở trong danh mục cha đó. Tối đa chỉ hiển thị 5 danh mục con trong 1 danh mục cha. Bạn có thể hỗ trợ mình được không ạ ?