Website menus và cách tạo ra chúng với WordPress

Tháng Năm 27, 2019 - 6:00

Sau một tuần tổ chức workshop tại các trường, BTC nhận thấy nhiều đội thi đang gặp khó khăn trong việc xử lý menus trên website. Một số bạn chưa nắm được cách sử dụng menu trong theme mình đã lựa chọn.

Trong bài viết này chúng tôi tổng hợp những bài giải thích và hướng dẫn từ Bourn Creative và WordPress.org là những nguồn đáng tin cậy để học về WordPress. Đừng quên thực hành ngay trên website của bạn nhé.

1. Website Menu và cách sử dụng trên WordPress (Jennifer Bourn, April 11, 2014)

Ở cấp độ cơ bản nhất, menu WordPress là một bộ sưu tập/danh sách các liên kết. Vị trí phổ biến nhất của menu là trong khu vực điều hướng trang web hoặc thanh điều hướng, được gọi là menu điều hướng.

Mỗi liên kết trong một menu được gọi là một mục menu. Một số mục menu có thể có các mục menu phụ được hiển thị trong menu thả xuống.

  • Ví dụ: Một menu điều hướng trang web cơ bản có thể bao gồm các mục menu như Giới thiệu, Dịch vụ, Sản phẩm, Cảm nhận của khách hàng và Liên hệ. Mục menu Dịch vụ có thể hiển thị menu thả xuống, với các mục menu phụ Tư vấn riêng, Đào tạo nhóm, Ngày VIP.

Ảnh minh họa dưới đây là một trang web có menu điều hướng chính, menu tiêu đề phụ và menu thả xuống của các trang phụ trong mục menu Đánh giá.

How to Use WordPress Website Menus

Menu WordPress có thể được sử dụng ở hầu hết mọi nơi trong trang web WordPress. Ngoài menu điều hướng trang web của bạn, bạn có thể hiển thị menu WordPress trong tiêu đề, trong thanh bên, chân trang hoặc trong bất kỳ khu vực phụ trợ nào.

  • Trên trang truyền thông, bạn có thể thêm một menu các liên kết trong thanh bên để phỏng vấn, tính năng và video.
  • Trong phần chân trang web, bạn có thể hiển thị một menu các liên kết đến các trang bán hàng sản phẩm hoặc chương trình cá nhân của bạn.
  • Trên trang cảm nhận khách hàng, bạn có thể thêm menu vào thanh bên liên kết đến bản trình bày SlideShare, video chia sẻ hoặc đánh giá của khách hàng.

Different Types of WordPress Menus

Tại sao sử dụng menu? Menus làm cho quá trình quản lý nội dung dễ dàng hơn!

Menu WordPress cho phép bạn nhanh chóng tạo một menu tùy chỉnh và dễ dàng thêm các trang, bài đăng, lưu trữ danh mục, lưu trữ thẻ, lưu trữ tác giả hoặc liên kết tùy chỉnh.

Trên màn hình menu, bạn có thể thay đổi tên và tiêu đề của bất kỳ mục menu nào mà không ảnh hưởng đến permalink (URL) của nó và với chức năng kéo và thả, bạn có thể thay đổi thứ tự của các mục menu và tạo menu thả xuống. Ngoài ra, với Tiện ích menu tùy chỉnh WordPress, bạn có thể thêm menu tùy chỉnh vào bất kỳ khu vực được tiện ích nào trên trang web của mình – tất cả mà không cần phải chạm vào bất kỳ HTML nào!

Ngoài ra, CSS tùy chỉnh có thể được viết cho các menu trong thanh bên và chân trang để hiển thị chúng trong lớp danh sách dấu đầu dòng, để sử dụng phông chữ biểu tượng, hình ảnh hoặc nút và để thêm hiệu ứng di chuột.

Custom WordPress Website Menu Design

Responsive menus

Responsive web design – trong đó một trang web được thiết kế để đáp ứng, thay đổi kích thước hoặc điều chỉnh chính nó, dựa trên hành vi của người dùng và môi trường xem – đòi hỏi phải xem xét thiết kế bổ sung cho các menu của trang web. Người thiết kế sẽ phải cân nhắc cách các menu sẽ được hiển thị khi kích thước màn hình nhỏ hơn (hoặc lớn hơn).

Một trong những thiết kế menu di động phổ biến nhất là sử dụng Hamburg Hamburger – một biểu tượng hiển thị ba dòng ngang ngắn đại diện cho một menu. Khi nhấp vào, biểu tượng bánh hamburger sẽ mở rộng xuống dưới để hiển thị menu trang web đầy đủ (như hiển thị bên dưới). Nếu nhiều menu được sử dụng (như hiển thị bên dưới), liệu các menu sẽ được kết hợp hay không và cách thức hoạt động của nó phải được giải quyết.

Responsive Menu Design For WordPress Websites

 

Nếu bạn đang đọc đến đây, bạn đã có được những hiểu biết cơ bản về menu trang web. Hãy cùng xem phần tiếp theo về cách bạn có thể tạo menu của riêng mình trên WordPress.

2. WordPress Menu User Guide

Xác định Menumenu-screen1.png

Bạn phải xác định một menu trước khi bạn có thể thêm các mục vào nó.

  1. Đăng nhập vào Bảng điều khiển WordPress.
  2. Từ menu ‘Giao diện’ ở phía bên trái Bảng điều khiển, chọn tùy chọn ‘Menu’ để hiển thị Trình chỉnh sửa Menu.
  3. Chọn Create a new menu ở đầu trang
  4. Nhập tên cho menu mới của bạn trong hộp Tên Menu
  5. Nhấp vào nút Create Menu.

Menu tùy chỉnh mới của bạn hiện đã được xác định.

Thêm đầu mục vào menumenu-screen2.png

Bạn có thể thêm các loại liên kết khác nhau vào menu của mình, chúng được phân chia giữa các bảng bên trái của menu bạn đang chỉnh sửa.

  1. Xác định vị trí khung có tên Pages.
  2. Trong khung này, chọn liên kết Xem tất cả để hiển thị danh sách tất cả các Pages hiện được xuất bản trên trang web của bạn.
  3. Chọn các Pages bạn muốn thêm bằng cách nhấp vào hộp kiểm bên cạnh mỗi tiêu đề của Pages.
  4. Nhấp vào nút Add to Menu nằm ở dưới cùng của ngăn này để thêm (các) lựa chọn của bạn vào menu mà bạn đã tạo ở bước trước.
  5. Nhấp vào nút Save Menu sau khi bạn đã thêm tất cả các mục menu bạn muốn.

Menu tùy chỉnh của bạn hiện đã được lưu.

Tạo menu nhiều cấp

Khi lập kế hoạch cấu trúc của menu của bạn, sẽ giúp nghĩ về từng mục menu như một tiêu đề trong một tài liệu báo cáo chính thức. Trong một báo cáo chính thức, các tiêu đề phần chính (tiêu đề cấp 1) là gần nhất bên trái của trang; các tiêu đề phụ (tiêu đề cấp 2) được thụt vào bên phải một chút; bất kỳ tiêu đề cấp dưới nào khác (Cấp 3, 4, v.v.) trong cùng một phần đều được thụt vào bên phải.

Trình chỉnh sửa menu WordPress cho phép bạn tạo các menu nhiều cấp bằng giao diện ‘kéo và thả’ đơn giản. Kéo các mục menu lên hoặc xuống để thay đổi thứ tự xuất hiện trong menu. Kéo các mục menu sang trái hoặc phải để tạo các cấp độ phụ trong menu của bạn.

Để biến một mục menu thành cấp dưới của một mục khác, bạn cần đặt ‘con’ bên dưới ‘cha mẹ’ của nó và sau đó kéo nhẹ sang bên phải.

  1. Đặt chuột lên mục menu ‘con’.
  2. Trong khi giữ nút chuột trái, kéo nó sang phải.
  3. Nhả nút chuột.
  4. Lặp lại các bước này cho từng mục menu phụ.
  5. Nhấp vào nút Save Menu trong Trình chỉnh sửa Menu để lưu các thay đổi của bạn.

menu-screen4.png menu-screen5.png

Thêm menu vào trang web

Nếu chủ đề hiện tại của bạn hỗ trợ các menu tùy chỉnh, bạn sẽ có thể thêm menu mới của mình vào một trong các Vị trí chủ đề.

  1. Cuộn xuống dưới cùng của cửa sổ trình chỉnh sửa menu.
  2. Trong phần có tiêu đề Vị trí chủ đề, nhấp vào hộp kiểm cho vị trí bạn muốn menu của mình xuất hiện.
  3. Nhấp vào Lưu menu sau khi bạn đã chọn.

menu-screen6.png

Nếu theme hiện tại của bạn không hỗ trợ tùy chỉnh menu, bạn sẽ cần thêm menu vào mục Custom Menu widget tại Appearance Widgets Screen.

Xin chúc mừng! Menu tùy chỉnh mới của bạn hiện đã được thêm vào trang web của bạn.

—-

Tài liệu tham khảo:

References:

  1. Website menus and how they are used in WordPress. Bourn Creative, truy cập lúc 25 May 2019, at https://www.bourncreative.com/what-are-website-menus-how-used-in-wordpress/
  2. WordPress menu user guide. WordPress.org, access on 25 May 2019, at https://codex.wordpress.org/WordPress_Menu_User_Guide
Trailer