Hướng dẫn code menu wordpress - mã menu wordpress

Để tạo một website thân thiện với người dùng, ta cần phải tạo menu để người dùng biết website có gì và họ có thể lấy được gì từ trên website của bạn. Tạo website với WordPress tích hợp giao diện menu kéo và thả rất đơn giản mà ta có thể sử dụng để tạo menu header, menu với các tùy chọn dropdown,…Trong hướng dẫn này, Vietnix sẽ hướng dẫn bạn cách tạo menu trong WordPress nhanh chóng nhất. Mời bạn cùng tham khảo nhé. tạo menu trong WordPress nhanh chóng nhất. Mời bạn cùng tham khảo nhé.

Menu Navigation (menu điều hướng) là một tập hợp các liên kết được tổ chức thành một menu, chúng thường được trình bày dưới dạng một horizontal bar và menu sẽ được đặt ở đầu trang. là một tập hợp các liên kết được tổ chức thành một menu, chúng thường được trình bày dưới dạng một horizontal bar và menu sẽ được đặt ở đầu trang.

Các menu navigation cung cấp cấu trúc trang web của bạn và giúp khách truy cập tìm thấy những gì mà họ đang tìm kiếm, dưới đây là một ví dụ giao diện của menu navigation:

Hướng dẫn code menu wordpress - mã menu wordpress
Menu Navigation là gì?

Tạo menu trong WordPress bạn sẽ thấy rất dễ dàng để thêm menu chính và menu phụ, bạn có thể thêm các liên kết đến các trang, danh mục hoặc theme quan trọng nhất, các bài đăng trên blog và thậm chí là các liên kết tùy chỉnh như profile trên mạng xã hội của bạn.

Vị trí chính xác menu của bạn sẽ phụ thuộc vào theme WordPress của bạn. Hầu hết các theme sẽ có một số tùy chọn vì vậy bạn có thể tạo các menu khác nhau có thể được hiển thị ở những nơi khác nhau.

Ví dụ: Hầu hết các theme WordPress đều có một menu chính xuất hiện trên cùng, ngoài ra một số theme có thể bao gồm cả menu phụ, menu footer hoặc menu navigation trên thiết bị di động của bạn.

>> Xem thêm: Hướng dẫn học WordPress thành thạo trong 1 tuần

Cách tạo menu trong WordPress bạn cần truy cập vào trang Appearance >> Menus trong Dashboard của WordPress.Appearance >> Menus trong Dashboard của WordPress.

Hướng dẫn code menu wordpress - mã menu wordpress
Tạo menu navigation tùy chỉnh trong WordPress

Trước tiên, bạn cần cung cấp tên cho menu của mình, chẳng hạn như Top Navigation Menu và sau đó nhấp vào nút Create Menu. Thao tác sẽ mở rộng vùng menu và nó sẽ giống như sau sẽ mở rộng vùng menu và nó sẽ giống như sau:Top Navigation Menu và sau đó nhấp vào nút Create Menu. Thao tác sẽ mở rộng vùng menu và nó sẽ giống như sau sẽ mở rộng vùng menu và nó sẽ giống như sau:

Hướng dẫn code menu wordpress - mã menu wordpress
Tạo Top Navigation Menu trong WordPress

Tiếp theo, bạn có thể chọn các trang bạn muốn thêm vào menu, bạn có thể tự động thêm tất cả các trang cấp cao nhất hoặc bạn có thể chọn các trang cụ thể từ cột bên trái.

Trước tiên, hãy nhấp vào tab View All để xem tất cả các trang trên trang web của bạn. Sau đó, nhấp vào box bên cạnh mỗi trang bạn muốn thêm vào menu của mình, rồi nhấp vào Add to Menu.View All để xem tất cả các trang trên trang web của bạn. Sau đó, nhấp vào box bên cạnh mỗi trang bạn muốn thêm vào menu của mình, rồi nhấp vào Add to Menu.

Hướng dẫn code menu wordpress - mã menu wordpress
Thêm danh mục vào menu

Khi các trang của bạn đã được thêm, bạn có thể di chuyển chúng để sắp xếp bằng cách kéo và thả chúng.

Sắp xếp lại danh mục cho menu

Lưu ý: Tất cả các menu đều có các mục được liệt kê trong danh sách dọc (từ trên xuống dưới) trong menu editor. Khi bạn đặt menu trực tiếp lên trang web của mình, menu sẽ hiển thị theo chiều dọc hoặc chiều ngang (từ trái sang phải) tùy thuộc vào vị trí bạn chọn, hầu hết các theme có một số vị trí khác nhau để bạn có thể đặt menu. Trong ví dụ này, Vietnix đang sử dụng theme 2020 mặc định và có 5 vị trí khác nhau.: Tất cả các menu đều có các mục được liệt kê trong danh sách dọc (từ trên xuống dưới) trong menu editor. Khi bạn đặt menu trực tiếp lên trang web của mình, menu sẽ hiển thị theo chiều dọc hoặc chiều ngang (từ trái sang phải) tùy thuộc vào vị trí bạn chọn, hầu hết các theme có một số vị trí khác nhau để bạn có thể đặt menu. Trong ví dụ này, Vietnix đang sử dụng theme 2020 mặc định và có 5 vị trí khác nhau.

Sau khi thêm các trang vào menu, hãy chọn vị trí bạn muốn hiển thị menu và nhấp vào Save Menu.Save Menu.

Hướng dẫn code menu wordpress - mã menu wordpress
Chọn vị trí hiển thị menu

Nếu bạn không chắc chắn từng vị trí sẽ nằm ở đâu thì bạn hãy thử lưu menu ở những nơi khác nhau, sau đó truy cập trang web của bạn để xem nó trông như thế nào. Có thể bạn sẽ không muốn sử dụng tất cả các vị trí nhưng bạn có thể sử dụng nhiều vị trí khác nhau.

Ví dụ đây là menu đã hoàn chỉnh trên trang web:

Hướng dẫn code menu wordpress - mã menu wordpress
Menu hoàn chỉnh trên website

Menu drop-down, đôi khi được gọi là menu nested, là menu navigation với các mục menu chính và menu phụ, khi bạn chạy con trỏ qua một mục mẹ thì tất cả các mục con sẽ xuất hiện bên dưới mục đó trong menu phụ.

Để tạo menu phụ, hãy kéo một mục bên dưới mục chính, sau đó kéo nhẹ sang bên phải, chúng ta sẽ thấy có 3 mục phụ bên dưới Services trong menu sau:Services trong menu sau:

Hướng dẫn code menu wordpress - mã menu wordpress
Tạo menu drop-down trong WordPress

Dưới đây là menu phụ trực tiếp trên trang web:

Hướng dẫn code menu wordpress - mã menu wordpress
Giao diện menu phụ của website

Bạn thậm chí có thể thêm nhiều lớp dropdown để menu phụ của bạn có thêm menu phụ con nữa, điều này sẽ có thể khiến bạn thấy hơi lộn xộn và có nhiều theme không hỗ trợ menu dropdown nhiều lớp.

Trong ví dụ này, bạn có thể thấy rằng Logo Design (một mục con của Services) có hai mục con của riêng nó.Logo Design (một mục con của Services) có hai mục con của riêng nó.

Hướng dẫn code menu wordpress - mã menu wordpress
Giao diện menu có hai mục con

Nếu bạn đang sử dụng WordPress để làm blog, thì bạn có thể muốn thêm các Category cho blog dưới dạng menu dropdown trong menu WordPress của mình.

Bạn có thể dễ dàng thêm các Category vào menu của mình bằng cách nhấp vào tab Categories ở bên trái màn hình Menu, bạn cũng có thể cần phải nhấp vào tab View All để xem tất cả các Category.Categories ở bên trái màn hình Menu, bạn cũng có thể cần phải nhấp vào tab View All để xem tất cả các Category.

Chỉ cần chọn Category bạn muốn thêm vào menu, sau đó nhấp vào Add to Menu.Add to Menu.

Hướng dẫn code menu wordpress - mã menu wordpress
Thêm Category vào menu

Các Category sẽ xuất hiện dưới dạng các mục menu thông thường ở cuối menu của bạn, bạn có thể kéo và thả chúng vào từng vị trí, ví dụ dưới đây sẽ đặt tất cả các Category này trong mục menu Blog.

Hướng dẫn code menu wordpress - mã menu wordpress
Sắp xếp category phụ cho Blog

>> Xem thêm: Hướng dẫn chỉnh sửa giao diện WordPress theo nhiều cách

Ngoài các Categories và Page, WordPress cũng giúp bạn dễ dàng thêm các liên kết tùy chỉnh vào menu của mình, bạn có thể sử dụng nó để liên kết với profile mạng xã hội, cửa hàng trực tuyến của mình hoặc các trang web khác mà bạn sở hữu.

Bạn sẽ cần sử dụng tab Custom Links trên giao diện Menu. Chỉ cần thêm liên kết cùng với văn bản bạn muốn sử dụng trong menu của mình.Custom Links trên giao diện Menu. Chỉ cần thêm liên kết cùng với văn bản bạn muốn sử dụng trong menu của mình.

Hướng dẫn code menu wordpress - mã menu wordpress
Sử dụng Custom link để liên kết đến trang khác

Khi bạn thêm các Page hoặc Category vào menu navigation tùy chỉnh của mình, WordPress sẽ sử dụng tiêu đề trang hoặc tên của Category làm văn bản liên kết, bạn có thể thay đổi điều này bất cứ khi nào bạn muốn.

Bất kỳ mục menu nào cũng có thể được chỉnh sửa bằng cách nhấp vào chiều mũi tên hướng xuống bên cạnh nó.

Hướng dẫn code menu wordpress - mã menu wordpress
Chỉnh sửa menu navigation trong WordPress

Bạn có thể thay đổi tên của mục menu tại đây và bạn cũng có thể nhấp vào Remove để xóa toàn bộ liên kết ra khỏi menu của mình. Remove để xóa toàn bộ liên kết ra khỏi menu của mình.

Nếu bạn đang gặp khó khăn với giao diện kéo và thả ta cũng có thể di chuyển mục menu bằng cách nhấp vào liên kết Move thích hợp.Move thích hợp.

Bạn không cần phải đặt cố định các vị trí hiển thị cho theme của mình, bạn có thể thêm menu navigation trong bất kỳ khu vực nào bằng cách sử dụng Widgets như Sidebars hoặc Footers.

Điều hướng đến Appearance >> Widgets và thêm widget Navigation Menu vào sidebar của bạn. Tiếp theo, thêm tiêu đề cho widget và chọn đúng menu từ danh sách drop down Select Menu.Appearance >> Widgets và thêm widget Navigation Menu vào sidebar của bạn. Tiếp theo, thêm tiêu đề cho widget và chọn đúng menu từ danh sách drop down Select Menu.

Hướng dẫn code menu wordpress - mã menu wordpress
Sử dụng widget để thêm sidebar và footer

Dưới đây là một ví dụ về menu footer WordPress tùy chỉnh được xây dựng trên trang web của Syed Balkhi.

Hướng dẫn code menu wordpress - mã menu wordpress
Giao diện menu footer trong WordPress

Dưới đây là một số câu hỏi phổ biến nhất mà chúng tôi được nghe về menu navigation WordPress.

Để thêm trang chủ của bạn vào menu navigation, bạn cần nhấp vào tab View All trong Page rồi bạn sẽ thấy trang chủ của mình.View All trong Page rồi bạn sẽ thấy trang chủ của mình.

Hướng dẫn code menu wordpress - mã menu wordpress
Thêm liên kết trang chủ vào menu WordPress

Chọn box bên cạnh Home và nhấp vào Add to Menu, sau đó nhấp vào Save Menu để lưu các thay đổi của bạn.Home và nhấp vào Add to Menu, sau đó nhấp vào Save Menu để lưu các thay đổi của bạn.

Trong WordPress, bạn có thể tạo bao nhiêu menu tùy thích và để đặt menu lên trang web của bạn thì bạn sẽ phải thêm menu đó vào một trong các vị trí menu của theme hoặc vào khu vực widget như đã trình bày ở trên.

Để thêm nhiều menu navigation vào trang web WordPress của bạn, trước tiên bạn hãy tạo các menu theo hướng dẫn của ở trên.

Để đặt chúng lên trang web của bạn, hãy click vào tab Manage Locations.Manage Locations.

Hướng dẫn code menu wordpress - mã menu wordpress
Thêm nhiều menu navigation trong WordPress

Từ đây, bạn có thể chọn menu bạn muốn hiển thị trong các vị trí menu có sẵn trong theme của bạn.

Lời kết

Việc tạo menu trong WordPress là một điều cơ bản nhưng cũng không kém phần quan trọng vì nó được dùng để hiển thị ở trang chủ để khách truy cập website có thể dễ sử dụng và điều hướng đến các danh mục khác của website. Hy vọng bài viết này cung cấp nhiều kiến thức bổ ích mới và giúp bạn tạo menu trong WordPress dễ dàng, chúc bạn thành công!tạo menu trong WordPress là một điều cơ bản nhưng cũng không kém phần quan trọng vì nó được dùng để hiển thị ở trang chủ để khách truy cập website có thể dễ sử dụng và điều hướng đến các danh mục khác của website. Hy vọng bài viết này cung cấp nhiều kiến thức bổ ích mới và giúp bạn tạo menu trong WordPress dễ dàng, chúc bạn thành công!