[Thủ thuật WordPress] Hiển thị Icon Menu trong WordPress không dùng Plugin – Bạn muốn trang trí thêm các “Icon” lên các chuyên mục trong WordPress để làm cho giao diện trở nên chuyên nghiệp hơn, đẹp hơn thì phải làm sao? Nếu bạn đang dùng mã nguồn WordPress thì có rất nhiều Plugin hỗ trợ bạn tạo Menu Icon cực đơn giản và nhanh chóng. Tuy nhiên bạn không muốn sử dụng Plugin trong mã nguồn WordPress vậy có cách nào có thể thêm Icon vào Menu trong WordPress mà không cần sử dụng Plugin hay không?
Trong bài viết trước đây về thủ thuật WordPress mình cũng đã có hướng dẫn các bạn cách tạo Menu Icon cho WordPress bằng cách sử dụng Plugin Menu Icon rất đơn giản và dễ sử dụng tuy nhiên nhược điểm của phương pháp này là có ảnh hưởng đến tốc độ trang Web, tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn một phương pháp tạo “Menu Icon” mà không cần phải sử dụng Plugin và không hề làm ảnh hưởng đến tốc độ trong mã nguồn WordPress !
Hiển thị Icon Menu trong WordPress không dùng Plugin
Phương pháp mình giới thiệu dưới đây chính là sử dụng sử dụng Font Awesome (Font Awesome là thư viện cung cấp hàng trăm “Icon” cho Website hoặc Blog. Với những “Icon” này bạn hoàn toàn có thể tùy biến bằng CSS từ màu sắc, hiệu ứng,…giống như một kí tự bình thường. Ưu điểm của Font Awesome là không ảnh hưởng đến tốc độ tải trang, miễn phí…). Như vậy để sử dụng Font Awesome thì phải làm như thế nào? Hãy cùng blog thủ thuật tìm hiểu cách hiển thị Icon Menu trong WordPress không dùng Plugin.
Đầu tiên bạn hãy truy cập vào liên kết này sau đó bạn chọn các Icon trong mục “Web Application Icons” (nếu bạn chọn ở các mục “Icon” khác có thể sẽ không xuất hiện “Icon” khi bạn chèn vào Menu)
Kích chọn một “Icon” nào đó lúc này bạn sẽ thấy một giao diện mới xuất hiện với một đoạn mã nhỏ được cung cấp
Sau đó hãy sao chép đoạn mã này và quay trở vào trang quản lý WordPress vào Menu Giao diện > Kích chọn Menu > Sau đó dán đoạn mã này vào trước thuộc tính “Nhãn điều hướng” là được.
Sau khi thực hiện xong hãy lưu lại và ra ngoài trang chủ kiểm nghiệm kết quả có được. Nếu bạn cảm thấy “Icon” quá nhỏ so với Menu bạn có thể tăng kích thước Icon bằng cách sử dụng các class “fa-lg”, class này sẽ tăng 33% so với kích thước mặc định ban đầu. Hoặc bạn có thể sử dụng các class “fa-2x”, “fa-3x”, “fa-4x”, “fa-5x” để tăng theo tỷ lệ tương ứng với tên class.
Ví dụ sử dụng các thông số trên để tùy chỉnh độ lớn “Icon”
<i class="fa fa-camera-retro fa-lg"></i> tăng 33% <i class="fa fa-camera-retro fa-2x"></i> tăng gấp 2 <i class="fa fa-camera-retro fa-3x"></i> tăng gấp 3 <i class="fa fa-camera-retro fa-4x"></i> tăng gấp 4 <i class="fa fa-camera-retro fa-5x"></i> tăng gấp 5
Ngoài ra để tùy biến các “Icon” nhiều hơn nữa bạn có thể truy cập vào liên kết này để tìm hiểu cách sử dụng các “Icon” nâng cao.
Có thể sau khi chèn các “Icon” vào Website bạn sẽ không thấy xuất hiện hãy kiểm tra lại các “Icon” bạn đang sử dụng có chọn đúng trong mục “Web Application Icons” hay không? Nếu đúng mà vẫn không xuất hiện bạn có thể thêm đoạn code sau vào trong tập tin header.php trong thẻ <head> là được (nếu bạn chưa biết cách truy cập vào tập tin header.php có thể tham khảo bài viết sửa giao diện, plugin WordPress không cần FTP)
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Bạn có thể thay 4.3.0 bằng phiên bản mong muốn. Truy cập vào liên kết này để biết phiên bản mới nhất đang sử dụng (hiện tại khi viết bài này phiên bản đang là 4.6.2)
Như vậy là mình đã hướng dẫn các bạn cách chèn thêm “Menu Icon” mà không sử dụng Plugin trong mã nguồn WordPress. Với phương pháp này tốc độ tải của trang Web không hề bị ảnh hưởng quá tuyệt vời phải không nào.
Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!
Cho mình hỏi dùng trên WordPress.com thì phải làm sao ạ?? Đã thử cách trên nhưng không được ~T_T~
Hj WordPress.com không có quyền sửa code bạn nhé nếu dùng miễn phí vì thế bạn không thể thực hiện chức năng này 😛
Sao em làm như trên mà web không hiển thị , em đang dùng theme tour Package
Bạn đã thêm đoạn mã mà mình đã lưu ý bên dưới chưa?