Bạn đang muốn thêm icon vào menu wordpress? Nhưng đang phân vân không biết nên sử dụng plugin hay code css để thực hiện. Hãy cùng Halo Media tìm hiểu chi tiết qua bài viết dưới đây nhé!
Mục lục
Mục đích của việc thêm icon vào menu bằng plugin
Thông thường, các menu điều hướng trong WordPress là các liên kết văn bản thuần túy. Các liên kết này sẽ hoạt động trên hầu hết các trang web, nhưng bạn có thể làm cho menu điều hướng trông tương tác hơn bằng cách thêm nhiều biểu tượng hơn.
Các biểu tượng trực quan và làm cho menu dễ nhìn hơn. Ví dụ: một biểu tượng đẹp bên cạnh trang liên hệ sẽ làm cho nó nổi bật và dễ nhận biết hơn.
Thật dễ dàng, thêm các biểu tượng hình ảnh với menu điều hướng trong WordPress chỉ bằng 2 cách sau đây:
Thêm icon vào menu wordpress bằng 2 cách
Cách 1: Thêm icon vào menu wordpress bằng plugin
Phương pháp dùng plugin này dễ hơn so với code css, phù hợp với người mới bắt đầu thiết kế website bằng WordPress
Để dùng được plugin thì bước đầu tiên là cài plugin Menu Image

Sau khi hoàn thành cài đặt plugin Menu Image, bạn tiến hành vào Appearance -> Menu. Chọn 1 trang bất kì trong menu để thêm icon vào menu wordpress cho trang đó

Đây là giao diện thêm icon vào menu của plugin, ở mục này bạn có 2 lựa chọn là tải hình ảnh từ mục media của website lên và sử dụng icon có sẵn của plugin.

Mục này bạn sẽ chọn các icon có sẵn:

Cách 2: Thêm icon vào menu wordpress bằng CSS
Phương pháp này phù hợp với những người sử dụng tốt css
Trước tiên, bạn phải upload icon muốn thêm vào menu vào mục media của WordPress, Mỗi hình ảnh trong mục menu sẽ có 1 URL, mình sẽ sao chép URL của icon muốn chèn.
Bước tiếp theo, bạn chọn Appearance -> Menu, Click chọn mục Screen Options ở góc bên phải của màn hình. Tìm vào tích chọn vào mục “Css Classes”

Sau đó bạn kéo xuống dưới các mục và mở cài đặt mở rộng. Bạn sẽ thấy mục có tên là “CSS Classes“. Mục này để điền tên CSS Class cho menu.

Mình sẽ điền tên CSS Class vào vào dùng code CSS để chỉnh sửa lại.

Bây giờ bạn cần phải chỉnh code css cho icon. Bạn thêm đoạn code sau vào theme của bạn:

.blogicon là tên class mà lúc này mình đặt cho mục trong menu.
Tổng kết
Qua bài viết hướng dẫn thêm icon vào menu WordPress bằng cách dùng plugin và cách thêm CSS Classes vào các mục menu. Chúng ta đã biết cách thêm icon vào menu giúp các menu tương tác, dễ nhìn hơn cho trang web của bạn. Hy vọng bài viết này sẽ giúp các bạn cài đặt thành công.

Bài viết liên quan
Localhost là gì? Hướng dẫn cài đặt Localhost A-Z Các localhost phổ biến
Trên 3 triệu website WordPress đang chạy hiện nay, mỗi website đều phải xử lý
Th5
Favicon là gì ? Cách tạo favicon cho Website
Nếu bạn đang quản trị website WordPress hoặc lên kế hoạch thiết kế web mới,
Th5
Responsive là gì ? Quy tắc khi thiết kế Website Responsive
Trên 3 triệu website WordPress đang chạy hiện nay, mỗi website đều phải xử lý
Th5
20+ Các thuật ngữ trong thiết kế Web bạn cần phải biết
Khi xây dựng website WordPress, có những thuật ngữ nghe tưởng đơn giản nhưng quyết
Th5
Google Sites là gì? Cách thiết kế Website miễn phí bằng Google Sites
Hiện nay, việc sở hữu một website không còn là điều quá khó khăn như
Th5
Custom Post Type là gì? Các Plugin Custom Post Type Tốt Nhất Cho WordPress
WordPress ban đầu được tạo ra như một nền tảng blog đơn giản. Tuy nhiên
Th5