Cloudways giảm 30% Hosting. Mã giảm: SCALEINSUMMER

Hướng dẫn tạo Menu trong WordPress

Nếu bạn muốn tạo Menu trong WordPress, chỉ cần làm theo các hướng dẫn đơn giản sau:

Hướng dẫn tạo Menu

Để tạo Menu trong WordPress, bạn chỉ cần thực hiện theo các bước đơn giản sau:

Bước 1. Truy cập vào trang quản lý -> Giao diện -> Menu

giao-dien-admin-left-bar-1-min

Bước 2. Chọn tạo Menu mới

tao-menu-wp-1-min

Bước 3. Đặt tên cho Menu rồi nhấn Tạo trình đơn (2 nút, nút nào cũng được)

tao-menu-wp-2-min

Bước 4. Phần bên trái. Nhấn chuột vào nút mũi tên đen bên cạnh. Nó sẽ hiển thị các mục. Chỉ cần chọn rồi nhấn Add to Menu (hoặc Thêm vào Menu)

tao-menu-wp-4-min

Trường hợp bạn muốn thêm các phần như Thẻ, Danh mục sản phẩm,… hãy nhìn góc trên bên phải, có phần Tùy chọn hiển thị, nhấn chuột vào đó:

tuy-chon-hien-thi-1

Nó sẽ hiển thị rất nhiều lựa chọn, chỉ cần đánh dấu vào các ô bạn muốn thôi.

tuy-chon-hien-thi-2

Và cuối cùng, chọn Lưu Menu. Trường hợp bạn muốn Menu này hiển thị ra ngoài, hãy chọn Primary Menu

tao-menu-wp-5-min

Thêm bài viết vào Menu

Bài viết, trang, chuyên mục, thẻ đều có cách làm tương tự nhau.

Bước 1. Tìm mục bài viết

Nhìn bên trái, tìm phần Bài viết

them-bai-viet-vao-menu1

Nếu không thấy phần bài viết, hãy nhìn lên góc trên bên phải, chọn Tùy chọn hiển thị

them-bai-viet-vao-menu2

Đánh dấu vào ô bài viết, nó sẽ tự động xuất hiện ở phần dưới, bên trái

them-bai-viet-vao-menu3

Bước 2. Chọn bài viết

Bạn sẽ thấy bài viết được hiển thị theo Ngày sửa (Mới nhất) – Tất cả bài viết (Xem tất cả) – Hoặc nếu bạn không thấy bài cần thêm, bấm vào Tìm kiếm.

Tiếp tục đánh dấu vào bài > Thêm vào Menu

them-bai-viet-vao-menu4

Nếu muốn tìm kiếm, chỉ cần gõ tên bài viết, nó sẽ tự động hiện ra

them-bai-viet-vao-menu5

Bước 3. Lưu lại Menu

Với một số theme đặc biệt, bạn sẽ thấy có thêm Mobile Menu, Sub Menu…. mỗi menu sẽ hiển thị ở một vị trí khác nhau trên web. Hãy lựa chọn đúng vị trí bạn muốn nhé.

them-bai-viet-vao-menu6

Thêm danh mục sản phẩm vào Menu

Nhìn lên góc trên bên phải bạn sẽ thấy

them-bai-viet-vao-menu2

Và đánh dấu vào Danh mục sản phẩm

them-danh-muc-san-pham-vao-menu1-min

và danh mục sẽ được thêm vào bên trái

them-danh-muc-san-pham-vao-menu2

Từ đây bạn có thể đánh dấu vào Danh mục, bấm Thêm vào Menu, sau đó lưu lại thôi

them-danh-muc-san-pham-vao-menu3-min

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

Bước 1. Nhìn vào bên trái, tìm mục Custom Links (hay Liên kết tùy chỉnh) và bấm mũi tên đen nhỏ

them-lien-ket-vao-menu1

Nếu không tìm thấy, bạn có thể xem ở Tùy chọn hiển thị như Hướng dẫn thêm bài viết ở phần trên.

Bước 2. Điền thông tin

  • URL: Liên kết
  • Đường dẫn bằng chữ: Chữ sẽ hiển thị

Ví dụ bạn muốn khi bấm vào chữ Tìm kiếm trên Menu sẽ ra trang Google.com, thì

  • URL: điền google.com hoặc www.google.com hoặc https://google.com
  • Đường dẫn bằng chữ: Tìm kiếm

Rồi Thêm vào Menu

them-lien-ket-vao-menu2

Bước 3. Lưu lại Menu

them-bai-viet-vao-menu6

Tạo Menu con trong WordPress

Để tạo Menu con, hay còn gọi là sub menu, đơn giản bạn chỉ cần di chuột vào menu và kéo menu thụt sang bên phải một khoảng như hình.

tao-menu-con-wordpress-min

Như trong hình là có 3 cấp Menu con với Giới thiệu là con của Trang chủ, rồi Sản phẩm là con của Giới thiệu và Tin tức là con của Sản phẩm.

Tùy vào từng Theme mà bên ngoài giao diện sẽ hiển thị theo cách khác nhau.

Tạo Menu có Icon

Để tạo icon cho menu, chúng ta có thể sử dụng các thư viện icon có sẵn là:

  • FontAwesome
  • Google Material
  • WordPress Dashicon

Hướng dẫn sau sẽ sử dụng FontAwesome 4.7

Bước 1. Khai báo thư viện FontAwesome 4.7

Truy cập vào Giao diện > Sửa > Tìm header.php và thêm dòng code sau vào trước </head> rồi bấm Cập nhật tập tin.

Đoạn code này nhé:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

tao-menu-icon1-min

Bước 2. Tạo một Menu

Cứ tạo như bình thường. Tại phần Nhãn điều hướng, khai báo code của icon

tao-menu-icon2-min

Để lấy code của các icon, bạn truy cập vào: https://fontawesome.com/v4.7.0/icons/

Gõ tên icon vào ô Tìm kiếm rồi bấm vào icon

tao-menu-icon3-min

Bạn sẽ thấy đoạn code

tao-menu-icon4-min

Vì các icon đều là tên tiếng anh, nên bạn chịu khó tìm, hoặc Google Dịch trước nhé.

Cuối cùng là lưu Menu và xem kết quả thôi.

tao-menu-icon5

tao-menu-icon6

1
Bạn có câu hỏi?