Hướng dẫn thêm icon vào menu của WordPress một cách đơn giản mà không cần biết code.
Bạn đang muốn thêm icon vào menu của WordPress để khiến chúng trở nên sống động và chuyên nghiệp hơn? Thông thường, bạn sẽ phải chỉnh sửa CSS, tích hợp code snippet trong trường hợp theme không hỗ trợ sẵn, nhưng nhờ có một plugin hoàn toàn mới, bạn không cần thiết phải làm điều này nữa. Menu Icons là một plugin miễn phí, cho phép bạn dễ dàng thêm các biểu tượng vào menu mà không cần phải động chạm vào bất kỳ đoạn code nào.
Tham khảo thêm:
- Thêm icon vào tiêu đề widget của WordPress một cách đơn giản
- Thêm icon vào menu của Genesis Framework và child theme
Câu trả lời chắc chắn là có nhé. Tùy thuộc vào loại Font Icon bạn chọn mà mức độ ảnh hưởng sẽ khác nhau. Do đó, bạn cần cân nhắc kỹ xem việc chèn icon vào web có thực sự cần thiết hay không? Nếu bạn ưu tiên tốc độ load web thì tốt nhất hãy tránh xa Google Fonts và các loại Font Icon, bởi vì chúng là một trong những “kẻ thù” hàng đầu.
1. Đầu tiên, các bạn cần cài đặt và kích hoạt plugin Menu Icons (download) từ thư viện của WordPress.org.
2. Tiêp theo, truy cập vào Appearance => Menus. Tại đây, bạn sẽ thấy một hộp meta mới ở phía bên tay trái có tên là Menu Icons Settings. Bạn có thể chọn những bộ icons có sẵn (Dashicons, Elusive, Font Awesome, Foundation, Genericons) hoặc sử dụng file Image, SVG trong tab Global.
Để tránh phải load quá nhiều loại fonts gây ảnh hưởng xấu đến tốc độ load web, các bạn chỉ nên chọn những loại fonts phù hợp nhất. Click vào nút Save Settings để lưu lại.
3. Chuyển qua tab Current Menu. Tại đây, các bạn có thể thiết lập cách mà icon được hiển thị.
Trong đó:
- Hide Label: ẩn hoặc hiện nhãn menu.
- Position: vị trí hiển thị icon (trước hoặc sau nhãn menu).
- Vertical Align: căn lề cho icon. Cái này các bạn sẽ nhìn thấy rõ nhất trong phần Preview khi chọn icon.
- Font Size: kích thước icon.
- SVG Width: độ rộng của SVG.
- Image Size: kích thước của Image.
Click vào nút Save Settings để lưu lại các thiết lập.
4. Trong giao diện chỉnh sửa menu ở bên phải, click vào nút Select (mục Icon) tương ứng với nhãn menu bạn muốn thêm biểu tượng:
Một cửa sổ sẽ được hiển thị với các icon để cho bạn lựa chọn:
4. Khi một biểu tượng được chọn, phía bên phải sẽ xuất hiện một số tùy chọn cho phép bạn thay đổi cách mà nó hiển thị. Các thiết lập tổng quan ở bước 3 được sử dụng theo mặc định.
Một trong những tính năng mà tôi yêu thích là khả năng sử dụng icons từ nhiều gói fonts khác nhau. Nếu một gói không có icon mà bạn đang tìm kiếm, bạn có thể lựa chọn icon từ một gói khác. Sẽ mất chưa đến 5 phút để bạn tìm thấy các biểu tượng phù hợp với menu của mình.
Sau khi hoàn tất, hãy click vào nút Save Changes để lưu menu lại và kiểm tra kết quả:
Thật đơn giản phải không nào? Hy vọng plugin Menu Icons sẽ giúp các bạn nhanh chóng có được một thanh menu đẹp hơn, bắt mắt hơn cho trang web WordPress của mình.
Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)
Đại ca ơi, Anh có trao đổi liên kết backlink chéo không anh, em có website muốn đặt link nè, nếu chênh lệch thì để em bù ạ.
Hiện tại bên mình không có nhu cầu trao đổi backlink bạn ạ. :)
Anh ơi, Mục Appearance ở đâu ạ ?
Bạn dùng WordPress tiếng Anh hay tiếng Việt vậy? Nếu là tiếng Việt thì nó là mục Giao diện đấy.
Thanks anh Hiếu
Xin hỏi bạn có plugin nào tự động chèn 1 đoạn văn dưới mỗi bài viết, trong đó nó tự bắt links bài viết và chuyên mục như hình này không ạ (https://drive.google.com/file/d/1UKUqSUTyEBtjt34sBFO-5R2-0cXjcK8n/view?usp=sharing)
Cái này mình chịu. :)
Em chả biết sao, không động gì mà mất hết icon menu rồi!
Bạn xem đang sử dụng theme Paradise phiên bản mấy? Từ phiên bản 5.4.0 là không còn hỗ trợ chèn icon vào menu nữa rồi. :P
Vậy phải làm sao để hiện lại a?
Bên mình bỏ là có lý do cả nên đừng cố để thêm lại. :P
Có hướng dẫn icon menu cho theme paradise của wpcanban bán được không ạ?
Kể từ phiên bản 5.4.0 thì theme Paradise không còn hỗ trợ Font Awesome để chèn icon vào menu nữa bạn ạ. Bên mình làm thế để giúp theme nhẹ hơn, web load nhanh hơn và tương thích tốt hơn với các plugin có sử dụng font icon.
Vâng. Vậy em sẽ làm theo hướng dẫn của bài viết này :)
Theo mình thì không nên. Nó sẽ ảnh hưởng khá nhiều đến tốc độ load thực tế + điểm test đấy. :D Site của mình chèn icon là vì mình custom được bằng IcoMoon (chỉ load những icon mà mình dùng thôi, những icon khác đều bị lược bỏ hết).
Em vừa test thì mất 10 điểm trên mobile :)) Quá khiếp. Anh Hiếu có bài hướng dẫn sử dụng IcoMoon không nhỉ?
Bên mình hiện tại chưa có bài viết nào hướng dẫn sử dụng IcoMoon cả bạn ạ. :)
ảnh hưởng tốc độ load web không ạ
Tất nhiên là có rồi bạn. Vì nó sẽ phải load thêm cả CSS lẫn các file của icon fonts (woff, woff2…).
Em áp dụng liền :v