Hướng dẫn sử dụng Menu trong WordPress

Bài này thuộc phần 9 của 16 trong series Học WordPress căn bản

Hôm nay mình sẽ hướng dẫn bạn sử dụng Menu trong WordPress. Cụ thể bạn sẽ học được những thứ hay ho sau trong bài viết hôm nay:

  • Nắm được một vài khái niệm xung quanh chủ đề Menu
  • Biết cách tạo và hiển thị Menu
  • Biết cách sử dụng Custom Menu Widget
  • Biết cách sử dụng thư viện Font Awesome Icon để làm cho menu lôi cuốn hơn

Nào chúng ta bắt đầu làm quen với Menu trong WordPress.

su-dung-menu-trong-wordpress

Hiểu về Menu và Menu Location

Menu là một nhóm liên kết dẫn tới nhiều thành phần của một website WordPress. Bạn có thể chọn rất nhiều thành phần để đưa vào menu chẳng hạn Page, Category, Tag, Post vân vân.

Menu Location là khu vực được chỉ định trong một theme nơi mà bạn có thể đặt một menu bạn tạo ra.

Số lượng vị trí menu và nơi hiển thị menu phụ thuộc vào theme. Ví dụ theme Beginner của blog này có 2 vị trí Menu. Primary Menu bao gồm các liên kết như các liên kết dẫn tới các trang như Bản quyền, Liên hệ. Secondary Menu bao gồm các liên kết như liên kết tới trang WordPress. Bạn cũng để ý thấy trong mục WordPress có liên kết con như Hướng dẫn WordPress hay Plugin WordPress. Đây là chính là kiểu menu mẹ con phổ biến hiện giờ.

Custom Menu Widget

Theme quyết định vị trí Menu. Nhưng trên bất cứ trang WordPress nào, bạn có thể đặt một menu vào bất cứ khu vực Widget có sẵn bằng việc sử dụng Custom Menu Widget. Một ví dụ phổ biến là một menu chứa tất cả các Category ở Sidebar.

Tạo và hiển thị Menu

Để tạo Menu, bạn truy cập Appearance -> Menus trong Dashboard:

su-dung-menu-trong-wordpress-

Màn hình quản lý Menu trong WordPress

Khi bạn chưa có Menu nào, cột bên trái của màn hình quản lý bị mờ đi. Ngay khi bạn tạo Menu nó sẽ được active.

Bây giờ bạn nhập vào tên Menu và ấn Create Menu. Tên Menu sẽ không được hiển thị trên trang chủ. Nó chỉ giúp cho bạn ghi nhớ mục đích Menu trong việc quản lý Menu.

su-dung-menu-trong-wordpress

Nhập vào tên Menu để tạo một Menu

Sau khi tạo Menu, bạn nhìn thấy Menu SettingMenu Location đã xuất hiện. Cột bên trái cũng được active để bạn bổ sung các mục vào menu.

Bây giờ ta thêm một liên kết tới một page như là một mục menu. Ở ô page, bạn chọn Page bạn muốn có trong Menu. Sau đó, bạn click Add To Menu. Ở hình bên dưới mình có thêm Page có tên là Bản quyền vào menu.

su-dung-menu-trong-wordpress-3

Thêm liên kết tới Page như là một mục của Menu

Bạn cũng có có thêm một liên kết với tùy chọn Links:

su-dung-menu-trong-wordpress-4

Sử dụng Custom Links

Bạn có thể kéo thả các thành phần Menu cho phù hợp.

su-dung-menu-trong-wordpress-5

Sắp xếp lại các mục trong Menu

Bạn có thể có mục Menu con bằng việc kéo mục menu thụt vào mục menu mà bạn muốn trở thành liên kết mẹ:

su-dung-menu-trong-wordpress-

Cách tạo menu mẹ con

Sau khi bạn đã có menu như ý, bạn sẽ chọn Menu Location cho menu. Bạn có thể chọn ở Menu Settings hay ở tab Menu Location:

su-dung-menu-trong-wordpress-7

Gán vị trí cho menu

Ấn Save Menu để lưu mọi thiết lập. Bây giờ chúng ta ra trang chủ để kiểm tra kết quả:

su-dung-menu-trong-wordpress-8

Menu hiển thị trên trang chủ

Một vài thủ thuật với Menu:

1. Thay đổi tên hiển thị của một mục Menu

Thông thường tên của Page hay Post có thể rất dài. Khi đưa chúng vào menu, bạn có thể thay đổi tên cho ngắn gọn để phù hợp Menu.

su-dung-menu-trong-wordpress-9

Như bạn thấy phía dưới bạn vẫn có thông tin tên gốc. Do vậy bạn biết được mục menu đang trỏ tới bài Post nào.

2. Thêm tính năng chỉnh sửa nâng cao:

Ở phần Screen Options, bạn có thể chọn một số tính năng chỉnh sửa nâng cao ở Show advanced menu properties . Ví dụ Link Target giúp bạn cấu hình mở ở tab mới cho một mục menu

su-dung-menu-trong-wordpress-10

Tạo Custom Menu Widget

Bạn tạo một menu như bước trên. Nhưng bạn không gán vị trị cho menu. Bởi vì bạn sẽ hiển thị Menu bằng Widget.

Bạn vào Appearance -> Widgets, rồi click Custom Menu. Sau đó click Add Widget để bổ sung Widget vào khu vực hiển thị bên Sidebar. Số lượng khu vực hiển thị Widget phụ thuộc vào theme. Với theme mặc định này, bạn chỉ có một khu vực đặt Widget.

su-dung-menu-trong-wordpress-11

Tạo Custom Menu trong WordPress

Đánh tiêu đề cho Menu và chọn Menu cần hiển thị. Click Save để lưu thiết lập

su-dung-menu-trong-wordpress-12

Nhập tên và chọn Menu cần hiển thị

Sau khi click Save, bạn nhớ ra trang chủ kiểm tra lại xem hiển thị OK chưa nhé. 

Sử dụng Font Awesome Icon

Bạn có để ý thấy mỗi mục Menu của mình có icon đi kèm. Thêm icon giúp menu sinh động và bắt mắt hơn.

su-dung-icon-5

Hiện tại mình đang dùng Font Awesome Icon để bổ sung icon cho mỗi mục menu. Sau đây mình hướng dẫn bạn cách dùng Font Awesome.

Trước hết bạn cần cài đặt Font Awesome Icon. Quá trình cài đặt rất đơn giản. Bạn vào Appearance -> Editor, chọn file header.php. Tiếp theo dán dòng code sau vào phần header như hình bên dưới

su-dung-font-awesome-icon

Cài đặt Font Awesome Icon

Bạn vào trang chủ Font Awesome Icon để chọn icon bạn muốn. Trong ví dụ này, mình chọn icon Home và copy code như dưới:

su-dung-icon

Copy đoạn code này của Icon Home

Sau đó, bạn sang màn hình quản lý Menu, dán đoạn code bạn copy ở trước như hình bên dưới:

su-dung-icon-3

Copy code của Icon Home vào Navigational Label

Cuối cùng, ra trang chủ kiểm tra thành quả

su-dung-icon-4

Icon hiển thị trên trang chủ

Chỉ vài thao đơn giản bạn đã có icon bên cạnh mỗi mục menu.

Lời kết

Với bài viết này, chắc chắn bạn sẽ thành thạo sử dụng menu trong WordPress.

Nhớ rằng theme chi phối nhiều đến cách hiển thị cũng như vị trí Menu.

Nếu bạn có khó khăn gì với menu trong WordPress, hãy để lại comment bên dưới.

Nếu bạn yêu thích blog này, hãy subscribe để luôn được thông báo khi mình có bài viết mới.

Xem bài trong seriesPhần trước: Làm việc với tập tin kỹ thuật số trong WordPressPhần kế tiếp: Hướng dẫn sử dụng Widget