[Bài 20] Tạo và quản lý menu trên WordPress

Bài này chúng ta có 2 nội dung: thứ nhất là tìm hiểu các vị trí đặt menu trên webiste WordPress, thứ hai là đi tạo và quản lý chúng.

Các vị trí đặt menu

Menu có thể đặt nhiều vị trí trên website, có thể là ở phần đầu trang – Header, các Sidebar widget, ở chân trang – Footer. Tùy từng giao diện mà số chỗ đặt menu cũng khác nhau. Có theme hỗ trợ 4 vị trí (vd: theme Smartline) một số theme chỉ có 1 vị trí để đặt.

Nên đặt tối đa 3 menu thôi, các bạn có thể tham khảo cách bố trí các thanh menu tại Blog Hocban.vn để hình dung.

Các menu trên Blog Hocban.vn

Đây là bố cục menu của Blog Hocban.vn , như các bạn thấy có 3 khu vực mình tô đỏ tương ứng với 3 vị trí đặt menu trên blog. Vai trò của mỗi thanh menu như sau:

• (1) Top Navigation – thanh menu ở vị trí trên cùng, ở đây mình đặt các trình đơn như: giới thiệu, liên hệ, điều khoản,…
• (2) Main Navigation – thanh menu chính, mình đặt các trình đơn tương ứng với các chuyên mục nội dung trên Blog;
• (3) Social Menu – thanh menu chứa các “nút” liên kết nhanh đến mạng xã hội.

Tạo nội dung demo cho website

Trong bài số 18 mình có nói các bạn tạo một số Post, Category và Page, nếu bạn chưa làm thì bây bạn tạo cũng được. Nên xóa tất cả các post, category, tag nháp mà các bạn đã tạo trong lúc thực hành. Bạn cũng có thể tham khảo cách làm sau:

• Tạo 1 chuyên mục “Kiến thức chung“, sau đó tạo trong đó có 2 chuyên mục con tên là “Tìm Hiểu Về Tên Miền” và “Tìm Hiểu Về Hosting & Server“;
• Trong 2 chuyên mục con đã tạo, copy cho mỗi chuyên mục 2 bài viết. Ở chuyên mục “Tìm Hiểu Về Tên Miền” mình copy 2 bài viết Tên miền là gì ? và Phân loại tên miền . Trong chuyên mục “Tìm Hiểu Về Hosting & Server” mình copy 2 bài viết Máy chủ là gì ? và Hosting là gì ?.
• Các bạn nhớ thêm Tag và ảnh featured image cho bài viết nhé !

Sau khi tạo xong mấy cái trên thì bạn vào website để xem có gì thay đổi không. Còn đây là website của mình – trông nó có vẻ hơi rối mắt rồi đó. Xem ảnh chụp full màn hình tại đây.

Website demo sau khi xóa và tạo mới một số nội dung

Tạo menu

Bước 1: Vào Customize trên thanh Admin bar (giống bài trước), tiếp theo bạn chọn mục Menus >> Add a Menu >> Nhập tên Menu và nhấn Create Menu để hoàn tất.

Thêm một thanh menu trên WordPress

Bước 2: Lựa chọn vị trí để đặt cái Menu chính vừa tạo, bạn tick vào mục Main Navigation. Các vị trí còn lại của mục Menu Locations được hiểu như sau:

• Main Navigation – Menu chính;
• Top Navigation – thanh menu trên cùng;
• Footer Navigation – menu đặt dưới footer;
• Social Icons – menu đặt các icon mạng xã hội;
• Automatically add new top-level pages to this menu – tự động thêm Pages vào thanh menu này mỗi khi nó được tạo.

Bước 3:  Để thêm các trình đơn vào thanh menu chính đã tạo, bạn nhấn vào Add Items >> đến mục Categories >> chọn các chuyên mục bạn muốn đưa vào menu. Ở đây mình có chọn sẵn 3 mục như trong hình dưới đây:

Them trinh don vao thanh menu chinh

Bước 4: Sắp xếp thứ tự các menu bằng cách rê chuột vào các trình đơn đã tạo >> giữ chuột và kéo thả đến một vị trí mà bạn muốn >> nhấn Save & Publish để lưu lại. Lưu ý: những trình đơn tương ứng với các chuyên mục con thì kéo nó thụt lùi về sau như hình bên dưới nhé !

Sap xep cac trinh don tren thanh menu

Bước 5: Thêm thanh menu top – đặt tên là “menu trên cùng“, thanh menu này dùng để gắng trình đơn là các trang như: liên hệ, giới thiệu. Cái này các bạn làm tương tự như đối với menu chính ở trên nhé !

• Mục Menu Locations bạn chọn Top Navigation;
• Trong mục lựa chọn trình đơn (Add Items) các bạn thay vì chọn mục Categories thì các bạn chọn mục Pages >> chọn các trang mà bạn muốn.

Phần thêm menu mạng xã hội – tức là thêm mấy cái Icon Facebook, Google+, YouTube mình sẽ hướng dẫn trong phần Theme Option nhé !

Bước 6: Nếu bạn muốn xóa một thanh menu thì bỏ tick ở tất cả các mục ở phần Menu Locations thì chức năng xóa thanh menu (Delete Menu) sẽ xuất hiện. Còn xóa một trình đơn trên menu thì bạn click vào trình đơn >> tìm đến nút Remove ở dưới cùng để xóa.

Bài này nội dung tương đối nhiều so với các bài khác. Để dễ theo dõi, các bạn nên làm giống mình ở trên. Còn bây giờ, nếu bạn có điều gì thắc mắc, hãy để lại bình luận bên dưới nhé !

Bài học trước đó và tiếp theo

• [Bài 19] Tùy chỉnh Site Identity – đặc điểm nhận diện website
• [Bài 21] Widget và quản lý widget trên WordPress