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. :)
Một người con của xứ Nghệ, hiện đang sinh sống tại Hà Nội. Theo dõi tôi trên Facebook để cập nhật những tin tức mới nhất liên quan đến WordPress nhé.
Để nâng cao khả năng nhận diện thương hiệu hoặc cải thiện hình ảnh của website, việc chèn logo và trang web là vô cùng cần thiết. Nhưng liệu chèn logo vào website có khó không, có mất nhiều thời gian không thì chúng ta cùng tìm hiểu ngay bài viết này nhé. Vietnix sẽ hướng dẫn cách chèn logo vào WordPress vừa nhanh vừa tiện trong bài viết dưới đây nhé.
Hướng dẫn chèn logo vào WordPress
Mỗi một theme website sẽ có cách sửa và cách chèn logo khác nhau. Vì thế, để chèn logo vào WordPress bạn nên đọc kỹ hướng dẫn hoặc hỏi trực tiếp nhà cung cấp để có thể thao tác nhanh nhất. Tuy nhiên về cơ bản, chèn logo vào WordPress sẽ có những bước thực hiện cơ bản sau đây.
Bước 1: Mở Customizer của theme
Trong giao diện admin Dashboard, bạn chọn Menu Appearance (Giao diện) > Customize (Tùy biến).
Tiếp đó, màn hình sẽ xuất hiện một tab mới goi là giao diện Customizer của theme WordPress. Nó cho phép bạn vừa chỉnh sửa vừa xem thực tiếp sự thay đổi trên trang web của bạn.
Bước 2: Tìm vị trí để thao tác thêm/sửa logo mới
Trong giao diện Live Preview của Customizer, bạn ấn chọn mục Header ở sidebar. Tại đây, bạn click chuột vào mục có tên Logo hoặc Header Logo hoặc một mục có tên tương tự theo từng theme hiển thị.
Tại đây, bạn sẽ thấy một mục có tên là Logo hoặc Header Logo, hoặc tương tự (tùy theo theme). Hãy chọn mục này.
Một bảng tùy chỉnh sẽ hiện ra với các lựa chọn. Các theme khác nhau cung cấp cho bạn các lựa chọn khác nhau. Bạn có thể chọn logo dạng ảnh hay dạng text tùy theo phương án bạn mong muốn.
Nếu bạn chọn Image Logo thì hãy chọn logo cần thay đổi nhé.
Có một lưu ý rằng, logo có thể được nằm tại đầu trang hoặc chân trang. Nếu logo đặt ở phần đầu trang thì bạn cần vào phần Header để tùy chỉnh. Còn trường hợp logo nằm ở phía chân trang thì bạn cần ấn chọn mục Footer để tùy chỉnh logo cho website của mình nhé.
Bước 3: Chọn logo để đăng tải
Bạn click chuột vào Change Image (nếu muốn thay logo) hoặc Select Image (nếu muốn đăng ảnh mới). Một cửa sổ mới sẽ hiện ra, bạn lựa chọn hình ảnh từ máy tính hoặc từ file có sẵn trong kho thư viện của website đều được. Sau đó ấn chọn Choose Image để hoàn thành.
Bước 4: Lưu giao diện website
Sau khi cập nhật thành công, bạn có thể tới cửa sổ Preview để kiểm tra xem logo của bạn đã hiển thị đúng như mong muốn chưa. Nếu chưa ưng ý thì bạn thực hiện lại “bước 3”. Còn nếu hình ảnh đã phù hợp với ý muốn, bạn chọn Publish để đăng và lưu giao diện hiển thị trên website.
Vị trí hiển thị logo
Vị trí mà logo của bạn sẽ hiển thị trên trang web đó là: Trên giao diện website và ở góc trái phía trên cùng của tab khi truy cập vào trình duyệt (logo Favicon).
Logo hiển thị trên giao diện website sẽ là phiên bản đầy đủ và thường xuất hiện ở phần Header của trang. Còn logo Favicon sẽ là một biểu tượng ngắn gọn dùng để thay thế cho phiên bản logo đầy đủ. Kích thước hiển thị tốt nhất cho logo Favicon thường là 16x16px.
Đây là 2 vị trí logo sẽ hiển thị trên website, bạn cần lưu ý để có những quyết định đúng đắn trong việc thiết kế và chèn logo vào WordPress sao cho hợp lý.
Phân loại logo
Tùy theo loại theme của bạn là gì, bạn sẽ được hỗ trợ một trong ba loại logo sau đây: Logo Regular, Logo Retina hoặc logo dành riêng cho các thiết bị của Apple.
Logo Regular
Đây là loại logo được dùng chung cho website khi hiển thi trên các thiết bị cũng như trình duyệt khác nhau.
Logo Retina
Logo Retina là logo được sử dụng khi website hiển thị trên các thiết bị có độ phân giải cao như màn hình Retina. Logo Retina sẽ đảm bảo được tối đa độ sắc nét trên các thiết bị có hỗ trợ màn hình Retina.
Bởi vậy, bạn nên thiết kế một mẫu logo riêng với độ phân giải sắc nét nếu theme của bạn có hỗ trợ logo Retinal. Trong đó, logo Retina thường có kích thước lớn gấp 2 lần so với logo Regular. Còn đối với trường hợp theme của bạn không hỗ trợ, bạn có thể lựa chọn cài đặt bổ sung plugin “Retina 2x” để đảm bảo chất lượng logo.
Ngoài ra, bạn cần lưu ý đặt tên file ảnh logo Retina giống với file logo Regular, nhưng có thêm đuôi @2x. Ví dụ: File ảnh logo Regular là “logo.nng” thì đối với file ảnh Retina, bạn phải đặt tên là “logo@2x.png”.
Logo dành riêng cho thiết bị Apple
Loại logo này thường không phổ biến, tuy nhiên, nếu theme của bạn có hỗ trợ thì bạn cũng nên sử dụng để tối ưu hình ảnh trên các thiết bị của Apple. Đây là logo dạng icon dành để phục vụ riêng cho việc hiển thị trên iPhone, iPad. Trong đó, loại logo này cũng được phân loại thành hai dạng là logo thường (regular) và logo Retina. Kích thước tối ưu khi sử dụng loại logo này là 72x72px.
Nếu bạn đang có kế hoạch xây dựng website WordPress để phục vụ cho việc kinh doanh hay dự án cá nhân thì có thể tham khảo chọn mua tên miền và hosting tại Vietnix.
Với 10 năm kinh nghiệm, đồng hành cùng hàng chục ngàn khách hàng phát triển kinh doanh trên Internet, Vietnix đảm bảo mang đến cho bạn giải pháp xây dựng website chuyên nghiệp của riêng mình.
Vietnix cung cấp đầy đủ các loại tên miền Việt Nam lẫn quốc tế với nhiều đuôi phù hợp cho mục đích của bạn và có mức chi phí hợp lý. Nhờ giao diện đơn giản và dễ sử dụng, bạn có thể đăng ký tên miền tại Vietnix nhanh chóng và quản lý chúng một cách dễ dàng.
Về hosting, tại Vietnix có nhiều gói cho thuê hosting giá rẻ với cấu hình đa dạng, được thiết kế tối ưu cho website WordPress, mang đến cho bạn tốc độ tải trang nhanh hơn và bảo mật tốt hơn.
Ngoài ra, khi mua hosting Vietnix, bạn còn nhận được bộ theme và plugin WordPress miễn phí trị giá đến 26.000.000 VND/Năm, giúp bạn thỏa sức xây dựng website một cách chuyên nghiệp.
Liên hệ với Vietnix để được hỗ trợ tư vấn ngay.
Thông số kỹ thuật
CPU : 2 Core
Số lõi vi xử lý để xử lý dữ liệu
RAM : 3 GB
Bộ nhớ tạm thời giúp tăng tốc độ truy cập
Ổ Cứng NVMe : 6 GB
Dung lượng lưu trữ cho website của bạn
Domain : 1
Số tên miền được sử dụng trong gói Hosting
SSL Miễn Phí
Tặng miễn phí chứng chỉ SSL để bảo mật website
Tặng theme & plugin trị giá 50.000.000 VND
Thông số kỹ thuật
CPU : 2 Core
Số lõi vi xử lý để xử lý dữ liệu
RAM : 3 GB
Bộ nhớ tạm thời giúp tăng tốc độ truy cập
Ổ Cứng NVMe : 6 GB
Dung lượng lưu trữ cho website của bạn
Domain : 2
Số tên miền được sử dụng trong gói Hosting
SSL Miễn Phí
Tặng miễn phí chứng chỉ SSL để bảo mật website
Tặng theme & plugin trị giá 50.000.000 VND
Thông số kỹ thuật
CPU : 2 Core
Số lõi vi xử lý để xử lý dữ liệu
RAM : 4 GB
Bộ nhớ tạm thời giúp tăng tốc độ truy cập
Ổ Cứng NVMe : 8 GB
Dung lượng lưu trữ cho website của bạn
Domain : 2
Số tên miền được sử dụng trong gói Hosting
SSL Miễn Phí
Tặng miễn phí chứng chỉ SSL để bảo mật website
Tặng theme & plugin trị giá 50.000.000 VND
Thông số kỹ thuật
CPU : 4 Core
Số lõi vi xử lý để xử lý dữ liệu
RAM : 4 GB
Bộ nhớ tạm thời giúp tăng tốc độ truy cập
Ổ Cứng NVMe : 8 GB
Dung lượng lưu trữ cho website của bạn
Domain : 4
Số tên miền được sử dụng trong gói Hosting
SSL Miễn Phí
Tặng miễn phí chứng chỉ SSL để bảo mật website
Tặng theme & plugin trị giá 50.000.000 VND
Thông số kỹ thuật
CPU : 4 Core
Số lõi vi xử lý để xử lý dữ liệu
RAM : 6 GB
Bộ nhớ tạm thời giúp tăng tốc độ truy cập
Ổ Cứng NVMe : 12 GB
Dung lượng lưu trữ cho website của bạn
Domain : 4
Số tên miền được sử dụng trong gói Hosting
SSL Miễn Phí
Tặng miễn phí chứng chỉ SSL để bảo mật website
Tặng theme & plugin trị giá 50.000.000 VND
Thông số kỹ thuật
CPU : 4 Core
Số lõi vi xử lý để xử lý dữ liệu
RAM : 8 GB
Bộ nhớ tạm thời giúp tăng tốc độ truy cập
Ổ Cứng NVMe : 16 GB
Dung lượng lưu trữ cho website của bạn
Domain : 4
Số tên miền được sử dụng trong gói Hosting
SSL Miễn Phí
Tặng miễn phí chứng chỉ SSL để bảo mật website
Tặng theme & plugin trị giá 50.000.000 VND
Thông số kỹ thuật
CPU : 8 Core
Số lõi vi xử lý để xử lý dữ liệu
RAM : 10 GB
Bộ nhớ tạm thời giúp tăng tốc độ truy cập
Ổ Cứng NVMe : 20 GB
Dung lượng lưu trữ cho website của bạn
Domain : 4
Số tên miền được sử dụng trong gói Hosting
SSL Miễn Phí
Tặng miễn phí chứng chỉ SSL để bảo mật website
Tặng theme & plugin trị giá 50.000.000 VND
Thông số kỹ thuật
CPU : 1 Core
Số lõi vi xử lý để xử lý dữ liệu
RAM : 1 GB
Bộ nhớ tạm thời giúp tăng tốc độ truy cập
Ổ Cứng NVMe : 2 GB
Dung lượng lưu trữ cho website của bạn
Domain : 1
Số tên miền được sử dụng trong gói Hosting
SSL Miễn Phí
Tặng miễn phí chứng chỉ SSL để bảo mật website
Tặng theme & plugin trị giá 50.000.000 VND
Thông số kỹ thuật
CPU : 1 Core
Số lõi vi xử lý để xử lý dữ liệu
RAM : 2 GB
Bộ nhớ tạm thời giúp tăng tốc độ truy cập
Ổ Cứng NVMe : 4 GB
Dung lượng lưu trữ cho website của bạn
Domain : 1
Số tên miền được sử dụng trong gói Hosting
SSL Miễn Phí
Tặng miễn phí chứng chỉ SSL để bảo mật website
Tặng theme & plugin trị giá 50.000.000 VND
Thông số kỹ thuật
CPU : 2 Core
Số lõi vi xử lý để xử lý dữ liệu
RAM : 2 GB
Bộ nhớ tạm thời giúp tăng tốc độ truy cập
Ổ Cứng NVMe : 4 GB
Dung lượng lưu trữ cho website của bạn
Domain : 1
Số tên miền được sử dụng trong gói Hosting
SSL Miễn Phí
Tặng miễn phí chứng chỉ SSL để bảo mật website
Tặng theme & plugin trị giá 50.000.000 VND
- Plugin: Rank Math SEO Pro
- Plugin: Elementor Pro
- Plugin: WPML
- Plugin: WP Smush Pro
- Theme + plugin: MyThemeShop
- Theme: Divi
- Theme: Bricks
Lời kết
Trong bài viết này, Vietnix đã hướng dẫn bạn cách chèn logo vào WordPress vô cùng đơn giản và dễ dàng. Hy vọng rằng thông tin trên sẽ hữu ích với bạn. Cảm ơn đã theo dõi và đừng quên đón đọc những bài viết bổ ích khác trên website của Vietnix nhé.
Tôi là Lê Nam - Với hơn 5 năm kinh nghiệm chuyên sâu về thiết kế, phát triển và tối ưu website. Hãy cùng tôi kiến tạo website WordPress chuyên nghiệp, nâng tầm thương hiệu của bạn ngay bây giờ. Mọi bí quyết đều được hé lộ qua kênh