Ngày 22 / Tiết 2 / Thời lượng 25 phút. Mục lục khóa 100 ngày làm web [tháng thứ 2].
Trước hết bạn cần cài đặt và kích hoạt theme có tên Astra:
Tại sao lại cần cài Astra? Bất cứ theme nào thì chúng ta cũng tạo được menu điều hướng cả, nhưng menu cụ thể nằm ở đâu và có những vị trí nào là do theme quyết định, và vì sau này chúng ta sẽ đi sâu và theme Astra, nên giờ bạn cài nó luôn cho tiện với những bài học sau này.
Giờ website của bạn đã có khoảng 10 bài viết (dạng post), có 2 đến 3 chuyên mục (category) và một trang giới thiệu bản thân (dạng page), chúng ta sẽ đưa các liên kết của chuyên mục và page giới thiệu lên menu ngang nằm vị trí đầu website (header).
Cách làm:
- Tại trang quản trị của WordPress, bạn vào Appearance > Menus:
- Bạn sẽ thấy một khung nhập như thế này:
- Đầu tiên chúng ta khởi tạo tên cho menu và vị trí của nó:
- Ở phần Menu Name, bạn nhập tên nào tùy thích, ví dụ: menu chính.
- Ở phần Display location (vị trí hiển thị của menu), bạn tick chọn Primary Menu và Off-Canvas Menu để nó là menu chính, và nằm ở vị trí header, sau đó nhấn vào Create Menu ở góc dưới bên tay phải để chính thức khởi tạo. PS: cái Off-Canvas Menu là để menu đó hiển thị trên cả thiết bị màn hình nhỏ nữa, nếu bạn chỉ tick Primary Menu thì sẽ thấy menu trên máy bàn nhưng không thấy trên di động, do vậy hãy nhớ tick cả hai nhé.
- Giờ bạn nhìn sang cột bên trái sẽ thấy phần Add menu items là nơi ta chọn các liên kết để đưa vào menu:
- Liên kết đầu tiên chúng ta thêm vào menu chính là trang Giới thiệu, ở phần Pages bạn sẽ thấy các trang (page) bạn đang có trên website, tick chọn trang Giới thiệu, rồi nhấn Add to Menu để thêm nó vào menu:
- Bây giờ tôi sẽ thêm các chuyên mục (category) vào menu, vẫn ở chỗ Add menu items, bạn click vào chỗ Categories, bạn sẽ thấy các chuyên mục có trên website của bạn, chẳng hạn bên dưới là các chuyên mục thuộc website của tôi:
- Thứ tự các chuyên mục được sắp xếp theo số lượng bài viết mà nó có, ví dụ ở trên chuyên mục Hạnh phúc có nhiều bài nhất, xong đến Giới tính, rồi Tiền bạc,…
- Bây giờ nếu tôi muốn thêm 3 chuyên mục vào website, cụ thể là Hạnh phúc, Tiền bạc, Chánh niệm thì tôi tick chọn chúng, rồi click Add to Menu:
- Nhìn sang phải, bạn sẽ thấy menu có các phần mà chúng ta đã thêm vào:
- Bạn click Save Menu ở góc dưới bên tay phải để lưu cài đặt này.
Bây giờ quay ra trang chủ, bạn sẽ thấy menu xuất hiện trên website:
- Giờ bạn hãy click vào chúng, bạn sẽ thấy các chuyên mục và trang tương ứng của nó. Trong chuyên mục là các bài viết (post) mới nhất của chuyên mục đó.
- Bây giờ, chẳng hạn chúng ta muốn thay đổi thứ tự của các mục trên menu thì làm thế nào? Ví dụ thay vì: Giới thiệu – Hạnh phúc – Tiền bạc – Chánh niệm, tôi muốn đổi thành thứ tự: Chánh niệm – Hạnh phúc – Tiền bạc – Giới thiệu
- Để làm điều đó thì bạn lại vào Appearance > Menus, ở phần Menu structure, bạn click giữ vào mục bạn muốn thay đổi vị trí rồi di chuyển theo ý của bạn. Cái nằm ở trên đầu sẽ tương ứng với vị trí ngoài cùng bên trái trên menu ngang, rồi cứ thế lần lượt, cái nằm cuối sẽ ở vị trí ngoài cùng bên tay phải trên menu ngang:
- Sau khi sắp xếp xong, bạn click vào Save Menu để lưu:
- Giờ bạn ra trang chủ, sẽ thấy menu đã được sắp xếp theo ý bạn:
Vậy là bạn đã học được cách tạo, thêm menu vào trang rồi.
Có thể làm thêm gì với menu nữa?
Bản chất của menu là nơi chứa các liên kết quan trọng mà bạn muốn người dùng khám phá. Ngoài chuyên mục và page là những link thường có nhất trên menu thì bạn có thể thêm các link khác như:
- Post: tức là link tới một bài viết cụ thể định dạng post trên website. Cách làm thì cũng tương tự, bạn click vào tab Posts trên Add menu items, rồi chọn lấy một bài và nhấn Add to Menu là link bài viết đó sẽ được thêm vào Menu. Chú ý là bài post thường có rất nhiều trên website, nên nếu khó tìm hãy sử dụng chức năng search, nhập từ khóa vào rồi nhấn Enter:
- Custom Links: cái này dùng khi bạn muốn thêm một liên kết bất kỳ vào menu, chẳng hạn liên kết đến một website bên ngoài như kênh YouTube, link mạng xã hội của website, vân vân. Bạn click vào Custom Links, một ô nhập thông tin xuất hiện:
Trong đó cái URL là liên kết bên ngoài bạn muốn trỏ đến. Link Text là văn bản sẽ xuất hiện trên Menu. Ví dụ:
Kết quả sau khi lưu là trên Menu sẽ có link trở tới kênh YouTube:
Trong thực tế thì link trỏ ra bên ngoài website (ví dụ trỏ đến kênh Youtube, Facebook, Tiktok,… của website) rất ít khi được đặt vào menu chính, nếu có thì chỉ là menu phụ nằm cuối trang. Thường nhất thì các trang mạng xã hội hay được đặt gắn vào các icon và nhóm riêng lại ở một khu vực trên header hoặc/và footer. Ví dụ:
Cách xóa một mục trên menu
Bây giờ bạn muốn xóa một mục trên menu thì làm thế nào?
Ví dụ tôi muốn xóa mục YouTube khỏi menu.
- Ở khu vực Menu structure, đầu tiên bạn click chọn vào mục cần xóa trong menu:
- Một khung xổ ra, bạn click vào Remove để xóa:
- Kết quả là mục đó sẽ được xóa khỏi menu, cuối cùng bạn click Save Menu để lưu cài đặt.
Bài tiếp >>> Tìm hiểu khái niệm chiều rộng của website.