Thêm biểu tượng ảnh menu WordPress

4 tháng ago, WordPress Plugin, Views

Thêm Biểu Tượng Ảnh Vào Menu WordPress: Hướng Dẫn Chi Tiết

Menu là một phần quan trọng trong thiết kế website, đóng vai trò điều hướng người dùng đến các trang quan trọng và giúp họ dễ dàng tìm kiếm thông tin. Thay vì chỉ sử dụng chữ, việc thêm biểu tượng ảnh (icon) vào menu WordPress có thể làm cho trang web của bạn trở nên trực quan, sinh động và chuyên nghiệp hơn. Bài viết này sẽ hướng dẫn bạn các cách để thêm biểu tượng ảnh vào menu WordPress, từ những phương pháp đơn giản nhất đến những tùy chỉnh nâng cao hơn.

Tại Sao Nên Thêm Biểu Tượng Ảnh Vào Menu WordPress?

Việc sử dụng biểu tượng ảnh trong menu WordPress mang lại nhiều lợi ích thiết thực:

Tăng tính thẩm mỹ: Biểu tượng ảnh làm cho menu trở nên hấp dẫn và bắt mắt hơn, thu hút sự chú ý của người dùng.
Cải thiện khả năng điều hướng: Các biểu tượng trực quan giúp người dùng dễ dàng nhận biết và tìm kiếm các mục menu một cách nhanh chóng.
Tăng cường trải nghiệm người dùng: Menu được thiết kế tốt với biểu tượng ảnh mang lại trải nghiệm người dùng tốt hơn, giúp họ dễ dàng tương tác với trang web.
Tạo sự chuyên nghiệp: Một menu được chăm chút kỹ lưỡng với biểu tượng ảnh thể hiện sự chuyên nghiệp và đầu tư vào thiết kế website.
Hỗ trợ người dùng quốc tế: Biểu tượng ảnh có thể hỗ trợ người dùng dễ dàng hiểu nội dung menu, đặc biệt khi trang web có nhiều ngôn ngữ.

Các Phương Pháp Thêm Biểu Tượng Ảnh Vào Menu WordPress

Có nhiều cách để thêm biểu tượng ảnh vào menu WordPress, tùy thuộc vào trình độ kỹ thuật và nhu cầu của bạn. Dưới đây là một số phương pháp phổ biến:

1. Sử Dụng Plugin

Đây là cách đơn giản nhất và được nhiều người sử dụng. Các plugin giúp bạn dễ dàng thêm biểu tượng ảnh vào menu mà không cần phải viết code.

Các Plugin Phổ Biến

Menu Icons: Plugin này cho phép bạn chọn biểu tượng từ nhiều thư viện khác nhau như Font Awesome, Dashicons và Genericons.
WP Menu Icons: Tương tự như Menu Icons, plugin này cung cấp nhiều tùy chọn để tùy chỉnh biểu tượng cho menu của bạn.
IcoMoon: Plugin này cho phép bạn sử dụng các bộ biểu tượng IcoMoon, cung cấp nhiều biểu tượng chất lượng cao.

Hướng Dẫn Sử Dụng Plugin (Ví Dụ: Menu Icons)

Cài đặt và kích hoạt plugin: Truy cập “Plugins” -> “Add New” trong bảng điều khiển WordPress, tìm kiếm “Menu Icons” và cài đặt, sau đó kích hoạt plugin.
Truy cập menu: Vào “Appearance” -> “Menus”.
Chọn biểu tượng cho mục menu: Di chuột vào mục menu bạn muốn thêm biểu tượng, bạn sẽ thấy một nút “Icon” xuất hiện. Nhấp vào nút này.
Chọn biểu tượng: Một cửa sổ pop-up sẽ hiện ra, cho phép bạn chọn biểu tượng từ các thư viện có sẵn. Tìm kiếm và chọn biểu tượng bạn muốn sử dụng.
Tùy chỉnh (nếu cần): Một số plugin cho phép bạn tùy chỉnh kích thước, màu sắc và vị trí của biểu tượng.
Lưu menu: Nhấp vào nút “Save Menu” để lưu các thay đổi.

2. Sử Dụng Font Awesome và CSS

Font Awesome là một thư viện biểu tượng font phổ biến, cung cấp hàng ngàn biểu tượng miễn phí và trả phí. Bạn có thể sử dụng Font Awesome và CSS để thêm biểu tượng vào menu WordPress.

Cách Thêm Font Awesome Vào WordPress

Sử dụng CDN: Thêm đoạn code sau vào file header.php của theme (trước thẻ ):

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="SHA512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Sử dụng plugin: Có nhiều plugin giúp bạn dễ dàng tích hợp Font Awesome vào WordPress. Tìm kiếm “Font Awesome” trong kho plugin và cài đặt một plugin phù hợp.

Thêm Biểu Tượng Font Awesome Vào Menu

Truy cập menu: Vào “Appearance” -> “Menus”.
Bật “Screen Options”: Ở góc trên bên phải màn hình, nhấp vào “Screen Options” và đánh dấu chọn “CSS Classes”.
Thêm CSS class vào mục menu: Mở rộng mục menu bạn muốn thêm biểu tượng. Bạn sẽ thấy một trường “CSS Classes (optional)”. Nhập class Font Awesome tương ứng với biểu tượng bạn muốn sử dụng. Ví dụ, để sử dụng biểu tượng home, bạn nhập fas fa-home. Tìm kiếm class phù hợp trên trang web Font Awesome.
Sử dụng HTML trong label menu (tùy chọn): Thay vì sử dụng CSS classes, bạn có thể trực tiếp thêm mã HTML vào nhãn của menu. Ví dụ: <i class="fas fa-home"></i> Trang chủ. Đảm bảo theme của bạn hỗ trợ HTML trong nhãn menu.
Lưu menu: Nhấp vào nút “Save Menu” để lưu các thay đổi.

Tùy Chỉnh Biểu Tượng Với CSS

Bạn có thể tùy chỉnh kích thước, màu sắc và vị trí của biểu tượng bằng CSS. Ví dụ:

.menu-item a i.fas {
  font-size: 1.2em;
  color: #333;
  margin-right: 5px;
}

Thêm đoạn code này vào file style.css của theme hoặc sử dụng trình tùy biến CSS trong WordPress.

3. Sử Dụng Hình Ảnh SVG

SVG (Scalable Vector Graphics) là một định dạng hình ảnh vector, cho phép bạn tạo các biểu tượng chất lượng cao mà không bị vỡ hình khi phóng to. Sử dụng SVG mang lại nhiều ưu điểm về hiệu suất và khả năng tùy biến.

Cách Thêm SVG Vào Menu

Chuẩn bị ảnh SVG: Tạo hoặc tải xuống các biểu tượng SVG bạn muốn sử dụng. Đảm bảo các biểu tượng này được tối ưu hóa để có kích thước nhỏ nhất có thể.
Tải ảnh SVG lên thư viện media: Vào “Media” -> “Add New” và tải các ảnh SVG lên.
Lấy URL của ảnh SVG: Sau khi tải lên, nhấp vào ảnh SVG để xem chi tiết và sao chép URL của ảnh.
Sử dụng HTML trong label menu: Vào “Appearance” -> “Menus”. Thêm mã HTML sau vào nhãn của menu, thay thế [URL_ẢNH_SVG] bằng URL bạn đã sao chép:
```
  <img src="[URL_ẢNH_SVG]" alt="Biểu tượng" style="width: 20px; height: 20px; vertical-align: middle;" /> Trang chủ
  
```
Lưu menu: Nhấp vào nút “Save Menu” để lưu các thay đổi.

Tùy Chỉnh Kích Thước và Vị Trí Của Ảnh SVG

Bạn có thể tùy chỉnh kích thước và vị trí của ảnh SVG bằng các thuộc tính CSS. Ví dụ:

.menu-item a img {
  width: 25px;
  height: 25px;
  vertical-align: middle;
  margin-right: 5px;
}