Tiếp tục Series bài học WordPress A-Z bài 8 hôm nay. Mình chia sẻ đến bạn những kiến thức mới nhất về Cách tạo Menu cho Website & thêm Icon Menu chuyên nghiệp.

Ngoài ra, nếu bạn chưa xem nội dung bài học trước có thể xem lại tại đây:

>> Hướng dẫn sử dụng Page, Post, Category WordPress

>> Cách cài đặt WordPress Plugin
Bây giờ, chúng ta hãy bắt đầu đi vào Series bài học hôm nay nào!

Cách tạo Menu cho Website rất đơn giản & thêm Icon Menu chuyên nghiệp

Tạo Menu cho Website là gì?

Trước khi đi vào chi tiết bài viết hôm nay, chúng ta phải hiểu được khái niệm cơ bản ”Tạo Menu cho Website là gì?”

Mình có đánh dấu mũi tên như trên hình, đây chính là thanh Menu chính. Bạn có thể hiểu Menu chính tập hợp tất cả Category hay Page được mình thêm vào trên thanh Menu chính này. Thanh Menu được đề xuất, xuất trên chính Website của mình.

Mục đích của việc tạo thanh Menu giúp bạn quản lý các đề mục nội dung cho từng bài viết & người dùng dể dàng tìm đến danh mục bài viết họ đang quan tâm. 

Ngoài ra, nó còn giúp cho bố cục Website của bạn rõ ràng & chuyên nghiệp hơn rất nhiều lần.

Hướng dẫn tạo Menu cho Website vô cùng đơn giản

Trong phần tiếp theo này, mình hướng dẫn các bạn tạo ra cho mình Menu chính trong thật chuyên nghiệp và bắt bắt. Chúng ta cùng tìm hiểu nào.

Để tiến hành tạo Menu cho WordPress bạn tiến hành các bước như sau.

Đầu tiên, bạn chọn vào mục Appearance và Click vào mục ”Menus” như trên hình.

Kế tiếp, bạn chú ý phần ”New Name” bạn hãy tiến hành đặt tên cho mục Menu chính của mình, bạn làm tương tự đặt tên cho những Menu khác.

-> Sau đó, nhấn vào nút ”Save Menu” mình có minh họa, bằng dấu mũi tên đỏ như trên hình.

 

Sau khi bạn tạo và đặt tên cho thanh Menu của mình xong. Tiếp theo, bạn cần chọn nó để thêm vào Menu chính. Các bước làm cụ thể như sau:

Bạn chú ý đến 2 mục Page & Categories mình đã khoanh đỏ như trên hình để bạn dể theo dõi.

Sau đó, bạn tìm tên các mục mà mình muốn thêm vào trên Menu chính và tick chọn vào nó.

-> Cuối cùng, chọn ”Add to Menu” là quá trình thêm vào Menu chính hoàn tất.

Bước tiếp theo này, các thanh Menu bạn chọn sẽ xuất hiện trên ”Menu Structure” mình có đánh dấu đỏ như trên hình.

Tại đây, bạn có thể thay đổi chúng dể dàng chỉ với click chuột kéo và thả. Nếu bạn muốn thêm mục con kéo nó thụt sau vào trong mục chính là được.

++ Ví dụ: Bạn muốn mục ”Sữa”, ”Đồ chơi trẻ con” nằm trong mục ”Mẹ và bé” -> Bạn chỉ cần Click chuột vào 2 mục này, sau đó kéo thụt vào bên phải, nằm trong mục chính là xong. Rất đơn giản

Sau quá trình thiết lập Menu Structure hoàn tất, bạn kéo xuống phần cuối cùng và để ý mục ”Menu Settings”. Nội dung 2 mục này như sau:

+ Auto Add Page: Nó tự động xuất hiện trên khắp các trang của bạn.

+ Theme Location: Chỉ xuất hiện ở trên thanh Menu chính mà thôi.

Theo mình bạn chỉ nên chọn mục Theme Location sẽ tối ưu & chuyên nghiệp hơn cho website của bạn.

-> Bạn hãy kiểm tra toàn bộ bố cục lại đã Ok chưa, sau đó Click chọn vào mục ”Save Menu” là xong rồi.

Đây chính là thành quả mình thiết lập xong cho thanh Menu chính của mình. Vô cùng đơn giản nhưng lại rất chuyên nghiệp và đẹp mắt phải không nào.

Cách thêm Icoin Menu chuyên nghiệp

Trong phần tiếp theo này, mình hướng dẫn các bạn cách thêm Icoin Menu chuyên nghiệp. Mọi thao tác rất đơn giản & dể làm quen.

Được rồi, tiếp tục cùng mình đi vào thực chiến nhé!

Đầu tiên, bạn truy cập vào trang fontawesome.com.

Bạn chú ý trên thanh Menu chính, chọn mục Icons mình có chỉ mũi tên đỏ như trên hình.

Tại đây, có hơn 5.000+ bộ Icon khác nhau để bạn lựa chọn. Hãy tìm ra cái nào mình thích nhất và click chọn nó

Bạn hãy coppy lại toàn bộ đoạn mã Code của Icon này.

Sau đó, bạn  hãy quay lại phần ”Menu Structure” -> Lựa chọn mục nào mình thêm Icon vào, thì chọn nó rồi nhấn vào nút nút ”Category” mình đánh dấu (1) như trên hình

Cuối cùng, bạn dán toàn bộ đoạn mã Code đó vào phần ”Navigation Label”, mình đánh dấu (2) theo cú pháp như sau:

Đoạn mã CODE + Tên Menu

++ Ví dụ: <i class="fas fa-atom"></i> + Thời Trang Nam
=> Sau khi hoàn tất, nhấn vào nút ”Save Menu” là đã thiết lập thêm Icon thành công.

Mình quay lại giao diện trang chủ Website để kiểm tra và thấy Icon đã được thêm thành công, như hình mình đã chụp lại ở trên.

Bạn cũng làm tương tự với những mục Menu còn lại, mình đảm bảo Website của bạn trở nên đẹp mắt & chuyên nghiệp hơn rất nhiều.

Kết lại

Như vậy mình vừa hướng dẫn các bạn Cách để tạo Menu cho Website vô cùng đơn giản & thêm Icon Menu chuyên nghiệp.

Các thao tác mình làm đều rất đơn giản, hầu như chỉ kéo và thả. Bạn cũng có thể làm được, chỉ cần chú ý kỹ từng mình hướng dẫn ở trên, và làm theo là có thể bắt đầu xây dựng Menu Website mình thật chuyên nghiệp được rồi.

Nếu bạn còn gặp khó khăn nào trong quá trình thực hành. Hãy comment ngay bên dưới, để mình hỗ trợ bạn sớm nhé.

Chúc các bạn thành công!