Tuyệt chiêu thêm icon vào menu wordpress với 2 cách đơn giản

|

Khi thêm icon vào menu wordpress thì cũng khiến chúng trở nên sinh động và chuyên nghiệp hơn. Gần đây thì chúng tôi cũng đã nhận được yêu cầu hỗ trợ từ người người đọc liên quan đến việc là chèn thêm hình ảnh dạng icon vào menu. Bài viết dưới chúng tôi sẽ giúp bạn.

Thêm Icon Trong WordPress
Thêm Icon Trong WordPress

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

Thông thường thì những menu điều hướng của wordpress là những textlink thuần túy. Những liên kết này hoạt động được hầu hết những trang web. Nhưng, bạn cũng có thể làm cho menu điều hướng của mình bắt mắt hơn bằng cách đưa vào nhiều icon.

Các icon nhìn rất trực quan và cũng làm cho những menu của bạn trở nên dễ nhìn hơn rất nhiều. Một icon đẹp bên cạnh trang liên hệ thì nó cũng làm cho nó được bắt mắt, thu hút người dùng.

Để thêm icon vào menu điều hướng chỉ cần dùng 2 phương pháp sau đây.

Hướng dẫn chèn icon vào menu WordPress

Cách 1: Thêm menu icon bằng plugin

Đây là phương pháp khá đơn giản, nó không yêu cầu bạn cần biết nhiều về code vẫn có thể thực hiện được.

  1. Đăng nhập trang quản trị WordPress, mục Plugin → chọn Cài mới

Tìm plugin với từ khóa: “Menu Icons by ThemeIsle”.

Plugin Menu Icons By Themeisle
Plugin Menu Icons By Themeisle
  1. Tiến hành Cài đặtKích hoạt Plugin Menu Icons by ThemeIsle
  1. Vào phần giao diện, chọn Menu. Chúng ta có thể thấy phần Menu icon settings được thêm vào.
Cài đặt Menu Icon
Cài đặt Menu Icon
  1. Chọn loại icon

Những bộ icons có sẵn của plugin như: Dashicons, Elusive, Font Awesome, Foundation, Genericons hoặc sử dụng file Image, SVG.

Menu Icon Setting
Menu Icon Setting

Tránh load nhiều loại fonts sẽ ảnh hưởng xấu đến tốc độ load web, chỉ nên chọn những loại fonts phù hợp và ít nhất nhất. Sau đó Save Settings để lưu.

  1. Thiết lập cho tab Current Menu, cài vị trí, size, cách hiển thị.
Thiết Lập Cho Tab Current Menu
Thiết Lập Cho Tab Current Menu
  • Hide Label: Ẩn/hiện nhãn menu.
  • Position: Vị trí hiển thị.
  • Vertical Align: Căn lề.
  • Font Size: Điều chỉnh kích thước icon.
  • SVG Width: Điều chỉnh độ rộng của SVG.
  • Image Size: Điều chỉnh kích thước của Image.

Sau đó click vào nút Save Settings để lưu lại.

  1. Thiết lập nội dung trong menu

Click vào mũi tên để mở cửa sổ cài đặt cho danh mục cần cài icon.

Thiết Lập Nội Dung Trong Menu
Thiết Lập Nội Dung Trong Menu

Chọn “Select” ở phần Icon. Một cửa sổ sẽ mở ra cho phép chọn icon cho danh mục này:

Chọn Icon Cho Danh Mục
Chọn Icon Cho Danh Mục

Cấu hình các cài đặt cho icon ở phần Preview bên phải => Hoàn thành bấm Chọn.

Tương tự với các danh mục khác, sau khi hoàn thành nhớ Lưu menu rồi kiểm tra kết quả.

Giao Diện Khi Lưu Menu
Giao Diện Khi Lưu Menu

Nếu có thời gian, các bạn có thể thử nhiều gói icon khác nhau để tìm ra gói icon phù hợp với website nhé.

Cách 2: Thêm menu icon bằng cách sửa mã nguồn (CSS)

  1. Vào cài đặt Menu trong phần Giao diện. Chọn Tùy chọn hiển thị, tích chọn Lớp CSS
Cài đặt Menu Trong Phần Giao Diện
Cài đặt Menu Trong Phần Giao Diện
  1. Trong phần cấu trúc Menu. Click chọn icon mũi tên phía sau danh mục cần chèn icon.

Một cửa sổ sẽ mở ra, công việc của chúng ta là thêm Lớp CSS với nội dung: icon-menu.

Cấu Trúc Menu
Cấu Trúc Menu

Xong thì Lưu menu.

  1. Vào mục Giao diện → Tùy biến → CSS Bổ sung

Dán đoạn code dưới vào
.icon-menu  {
background-image: url('https://image.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}

Css Bổ Sung
Css Bổ Sung

Trong đoạn CSS này, .icon-menu là tên class mà bạn đã cài cho danh mục Shop ở trên.

https://image.png là link image icon

left là vị trí của icon (có thể thay bằng right)

5px là 5 pixel, kích thước của icon

Bạn hoàn toàn có thể thay các thông số trên cho phù hợp với ý muốn, ngoài ra bạn còn có thể tham khảo về css để có thể thêm bất kì thuộc tính nào bạn thích.

Chúng tôi hy vọng qua bài viết này thì bạn cũng đã học được cách thêm icon vào menu wordpress

Nếu bạn có thắc mắc hay có vấn đề cần hỗ trợ, bạn có thể liên hệ trực tiếp với ThemeNest thông qua các kênh sau:

  • Hotline: 0902 170 180
  • Email: sales@themenest.vn

ThemeNest hiện đang có chương trình khuyến mãi dành cho khách hàng mua theme wordpress. ThemeNest sẽ hỗ trợ quý khách 24/24 với chất lượng theme tốt nhất!

Có tất cả 0 bình luận

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

0902 170 180