Cách thêm icon vào menu WordPress đơn giản ai cũng làm được

Thêm icon vào menu WordPress không chỉ tạo sự đa dạng cho Website và nâng cao trải nghiệm người dùng. Ở bài viết này, LANIT sẽ hướng dẫn bạn các cách chèn icon trên WordPress một cách đơn giản nhất!

Cách thêm biểu tượng vào menu wordpress

Để thêm biểu tượng vào menu WordPress, bạn có thể lựa chọn một trong hai cách đơn giản và hiệu quả: sử dụng plugin Menu Image hoặc Plugin Menu Icons. Cả hai phương pháp này giúp bạn dễ dàng thêm biểu tượng trực quan vào menu mà không cần phải chỉnh sửa mã nguồn, mang lại giao diện đẹp mắt và nâng cao trải nghiệm người dùng.

Thêm icon vào menu wordpress bằng Plugin Menu Image

Sử dụng plugin Menu Image là một cách thêm icon vào menu website WordPress một cách đơn giản mà không cần phải chỉnh sửa mã nguồn. Bạn có thể thực hiện theo các bước như sau:

Bước 1: Cài đặt và kích hoạt Plugin Menu Image.

• Truy cập Dashboard của WordPress sau đó vào phần Plugin 
• Chọn Add New.
• Tìm kiếm Plugin Menu Image và nhấn Install Now.
• Sau khi cài đặt xong, nhấn Active để kích hoạt Plugin.

Bước 2: Truy cập Menu cài đặt

Sau khi kích hoạt Plugin, bạn vào Appearance và chọn Menu. Tại đây, bạn sẽ thấy giao diện cài đặt Menu của Website

Bước 3: Chọn Menu và mục cần thêm Icon

• Tại Menu Structure, chọn phần danh mục mà bạn muốn thêm icon. Ví dụ ở đây mình chọn mục Giới thiệu
• Nhấn vào mũi tên ở góc bên phải của mục đó để mở cài đặt chi tiết.

Bước 4: Thêm icon vào Menu

• Trong phần cài đặt, bạn sẽ thấy một nút Add image/icon (Thêm hình ảnh/icon). Nhấn vào nút này để tiếp tục.
• Một hộp tùy chọn sẽ xuất hiện cho phép bạn chèn icon vào menu.

Bước 5: Cài đặt vị trí Icon

Title Position: Chọn vị trí hiển thị của icon so với tiêu đề của menu

• Hide: Chỉ hiển thị icon, ẩn tiêu đề.
• Above: Tiêu đề nằm trên, icon nằm dưới.
• Below: Tiêu đề nằm dưới, icon nằm trên.
• Before: Tiêu đề nằm trước, icon nằm sau.
• After: Tiêu đề nằm sau, icon nằm trước.

Bước 6: Chọn icon hoặc hình ảnh 

Bạn có 2 sự lựa chọn là chọn icon hoặc hình ảnh (image). Đặc biệt, phần hình ảnh ngoài lựa chọn các nội dung sẵn có trong thư viện, bạn còn có thể tải trực tiếp từ máy tính

Bước 7: Cài Đặt Kích Thước Icon

• Image Size: Chọn kích thước cho icon. Khuyến nghị là chọn các kích thước 24×24 hoặc 36×36 để phù hợp với kích thước của tiêu đề trang.
• Tùy chọn Image on Hover (Hình ảnh khi di chuột): Bạn có thể chọn ảnh thay đổi khi người dùng di chuột qua biểu tượng, nhưng nếu không cần, bạn có thể bỏ qua phần này.

Bước 8: Lưu cài đặt

Sau khi chọn xong icon và các tuỳ chỉnh, nhấn nút Save change. Đóng cửa sổ để thực hiện các thao tác tương tự cho các phần danh mục khác.

Bước 9: Lưu Menu

Cuối cùng, nhấn nút Save Menu ở cuối trang để lưu lại cài đặt.

Xem thêm: Tạo nút liên hệ trong wordpress

Thêm biểu tượng vào menu wordpress bằng Plugin Menu Icons

Việc sử dụng Plugin Menu Icons cũng rất đơn giản, bạn thực hiện theo các bước sau đây:

Bước 1: Tìm và cài đặt Plugin Menu Icons trong phần Add New của Plugin.

Bước 2: Nhập Menu Icons trên thanh tìm kiếm và chọn Install Plugin như dưới ảnh.

Bước 3: Lựa chọn phần Appearance và chọn Menu để thực hiện cài đặt icon cho Website.

Bước 4: Tại bảng Menu Icon Setting đã có những icon được tiện ích cài sẵn như Dashicons, Foundation, Image… hoặc lựa chọn phần Image, SVG ở tab Global và nhấn Save Setting.

Bước 5: Điều chỉnh vị trí, kích thước, size ảnh.. mà bạn mong muốn ở tab Current Menu sau đó nhấn Save Setting.

Bước 6: Trong giao diện Menu Structure, chọn mục Select (tương ứng với nhãn menu bạn muốn thêm icon). Một cửa sổ chọn icon sẽ hiện ra để bạn lựa chọn biểu tượng phù hợp.

Bước 7: Tại phần Preview, bạn sẽ thấy kết quả hiển thị của các cài đặt đã chọn ở bước trước. Nếu cần, bạn có thể điều chỉnh lại các tùy chọn. Sau khi hoàn tất, nhấn Save Settings để lưu lại tất cả cài đặt và kiểm tra kết quả.

Tại sao nên thêm icon vào menu?

Việc thêm icon vào menu trên Website dường như đã trở thành tiêu chuẩn chung, không chỉ giúp giao diện trang web trở nên sinh động mà còn nâng cao trải nghiệm người dùng. Các biểu tượng nhỏ gọn này không chỉ giúp người dùng dễ dàng nhận diện các mục menu mà còn hỗ trợ trong việc điều hướng trang web nhanh chóng và hiệu quả. 

• Tăng tính trực quan: Icon giúp người dùng dễ dàng nhận diện và phân biệt các mục menu, giảm bớt sự nhầm lẫn.
• Nâng cao trải nghiệm người dùng: Các biểu tượng trực quan giúp người dùng dễ dàng điều hướng website, đặc biệt là khi họ đang tìm kiếm thông tin nhanh chóng.
• Làm mới giao diện: Thêm icon giúp giao diện trang web trở nên sinh động và hiện đại hơn, thu hút người dùng ngay từ cái nhìn đầu tiên.
• Tăng khả năng tương tác: Icon giúp tăng mức độ tương tác của người dùng, vì chúng dễ nhận thấy và dễ hiểu.
  Thể hiện thương hiệu: Biểu tượng có thể phản ánh thương hiệu của bạn, giúp tạo dấu ấn riêng biệt trong lòng khách hàng.

Lưu ý khi chèn icon vào menu wordpress

Khi chèn icon vào menu WordPress, mặc dù quy trình khá đơn giản nhưng vẫn có một số lưu ý quan trọng mà bạn cần nắm rõ để đảm bảo tính thẩm mỹ và hiệu quả sử dụng:

• Chọn Icon Phù Hợp: Các icon nên có tính liên quan chặt chẽ với nội dung của từng mục trong menu. Việc sử dụng các biểu tượng quá phức tạp hoặc không rõ ràng có thể gây nhầm lẫn cho người dùng, làm giảm trải nghiệm của họ. Chọn các icon đơn giản, dễ hiểu và có tính trực quan cao sẽ giúp người dùng dễ dàng nhận diện và điều hướng.
• Kích Thước Icon: Kích thước của icon phải phù hợp với thiết kế tổng thể của menu và không làm mất cân đối giao diện. Các kích thước phổ biến thường dao động từ 24x24px đến 36x36px để đảm bảo sự hài hòa và không quá chiếm diện tích. Lưu ý rằng icon quá lớn sẽ làm menu trở nên cồng kềnh, trong khi icon quá nhỏ sẽ khó nhìn thấy.
• Tính Tương Thích Mobile: Platform website hiện nay cần phải tối ưu cho thiết bị di động, và menu với các icon cần đảm bảo hiển thị rõ ràng trên màn hình nhỏ. Trước khi hoàn tất việc chèn icon, hãy kiểm tra giao diện trên các thiết bị khác nhau, đặc biệt là điện thoại và máy tính bảng, để đảm bảo rằng các icon vẫn dễ nhìn và dễ sử dụng.
• Sử Dụng Icon Với Văn Bản: Nếu menu của bạn sử dụng cả icon và văn bản, hãy đảm bảo rằng chúng không chồng chéo lên nhau. Giữ khoảng cách hợp lý giữa icon và văn bản để đảm bảo tính dễ đọc và dễ hiểu. Cũng nên sử dụng các icon có phong cách đồng nhất với kiểu chữ của menu để tránh sự rối mắt.
• Kiểm Tra Hiệu Ứng Hover: Khi người dùng di chuột qua các mục menu, hiệu ứng hover (thay đổi icon hoặc màu sắc) có thể làm tăng tính tương tác. Tuy nhiên, hãy đảm bảo rằng hiệu ứng hover không quá phức tạp và không làm chậm tốc độ tải trang. Cần duy trì tính ổn định và dễ dàng thao tác khi sử dụng.
• Quản Lý Icon Đúng Cách: Nếu bạn sử dụng nhiều icon trong menu, việc quản lý chúng một cách hợp lý là rất quan trọng. Hãy chắc chắn rằng các icon được tải từ một nguồn đáng tin cậy và không làm tăng quá nhiều thời gian tải trang. Sử dụng icon từ thư viện có sẵn hoặc từ các dịch vụ như Font Awesome để đảm bảo tính tương thích và giảm thiểu kích thước tệp.
• Đảm Bảo Hiệu Suất Website: Để đảm bảo hiệu suất website khi chèn nhiều icon và thực hiện các thay đổi khác, việc sử dụng dịch vụ hosting chất lượng là rất quan trọng. VPS giá rẻ từ LANIT sẽ giúp bạn tối ưu hóa tốc độ tải trang, bảo mật và hiệu suất tổng thể của website mà không lo ngại về chi phí. Với các gói VPS linh hoạt và dễ dàng nâng cấp, bạn sẽ có thể duy trì một website mượt mà và nhanh chóng, ngay cả khi có nhiều người truy cập hoặc khi thực hiện những thay đổi lớn.
• Kiểm Tra Tính Tương Thích Với Các Trình Duyệt: Một số icon có thể không hiển thị đúng trên tất cả các trình duyệt. Trước khi hoàn tất việc chèn icon vào menu, hãy kiểm tra website trên các trình duyệt phổ biến như Chrome, Firefox, Safari và Edge để đảm bảo rằng icon hiển thị chính xác trên tất cả các nền tảng.

Việc thêm icon vào menu WordPress không chỉ giúp nâng cao trải nghiệm người dùng mà còn tạo sự chuyên nghiệp cho giao diện website. Để duy trì hiệu suất ổn định và tối ưu hóa tốc độ tải trang, đừng quên chọn dịch vụ hosting chất lượng như VPS từ LANIT. Chúc bạn thành công trong việc cải thiện website và mang đến trải nghiệm tuyệt vời cho người dùng!