VietNetwork.Vn

Bạn có muốn thêm biểu tượng hình ảnh vào menu điều hướng WordPress của mình không?

Hình ảnh có thể giúp khách truy cập hiểu nhanh về điều hướng trang web của bạn. Bạn thậm chí có thể sử dụng các biểu tượng để làm nổi bật nội dung quan trọng nhất của menu hoặc kêu gọi hành động.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách thêm biểu tượng hình ảnh vào menu điều hướng trong WordPress.

1. Tại sao Thêm Biểu tượng Hình ảnh Với Menu Điều hướng trong WordPress?

Thông thường, các menu điều hướng của WordPress là các liên kết văn bản thuần túy. Các liên kết này hoạt động với hầu hết các trang web, nhưng chúng không phải lúc nào trông cũng thú vị hoặc hấp dẫn.

Bằng cách thêm các biểu tượng hình ảnh vào menu điều hướng, bạn có thể khuyến khích khách truy cập chú ý đến menu và khám phá thêm trang web của bạn.


Nếu menu của bạn có nhiều tùy chọn khác nhau, thì các biểu tượng hình ảnh có thể giúp khách truy cập quét nội dung và tìm thấy những gì họ đang tìm kiếm dễ dàng hơn. Đây có thể là một cách dễ dàng để tăng số lần xem trang và giảm tỷ lệ thoát trong WordPress.

Bạn thậm chí có thể sử dụng biểu tượng hình ảnh để đánh dấu mục menu quan trọng nhất, chẳng hạn như liên kết Thanh toán trên thị trường trực tuyến của bạn.


Bằng cách làm nổi bật lời kêu gọi hành động trong thanh menu, bạn thường có thể nhận được nhiều lượt đăng ký, bán hàng, thành viên và các chuyển đổi khác.

Như đã nói, hãy xem cách bạn có thể thêm các biểu tượng hình ảnh vào menu điều hướng WordPress của mình. Chỉ cần sử dụng các liên kết nhanh bên dưới để chuyển thẳng đến phương pháp bạn muốn sử dụng.

2. Phương pháp 1: Thêm Biểu tượng Hình ảnh vào Menu Điều hướng bằng Plugin (Nhanh chóng và Dễ dàng)

Cách dễ nhất để thêm các biểu tượng hình ảnh vào menu WordPress của bạn là sử dụng plugin Menu Image. Plugin này đi kèm với các biểu tượng dashicon mà bạn có thể thêm chỉ bằng vài cú nhấp chuột.


Nếu bạn đã thêm các biểu tượng Font Awesome vào trang web của mình thì bạn có thể sử dụng chúng với plugin miễn phí này. Để biết thêm thông tin về cách thiết lập Phông chữ tuyệt vời, hãy xem hướng dẫn của chúng tôi về cách dễ dàng thêm phông chữ biểu tượng vào chủ đề WordPress của bạn.

Nếu bạn muốn sử dụng các tệp biểu tượng của riêng mình, thì Menu Image cũng cho phép bạn chọn một hình ảnh hoặc biểu tượng từ thư viện phương tiện WordPress.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Hình ảnh Menu. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.

Sau khi kích hoạt, hãy nhấp vào Menu Image trong bảng điều khiển WordPress. Trên màn hình này, bạn có thể chọn nhận thông báo bảo mật và tính năng hoặc nhấp vào nút 'Bỏ qua'.


Thao tác này sẽ đưa bạn đến màn hình nơi bạn có thể định cấu hình cài đặt của plugin. Để bắt đầu, bạn sẽ thấy tất cả các kích thước khác nhau mà bạn có thể sử dụng cho các biểu tượng hình ảnh.

Nếu bạn định sử dụng các biểu tượng từ Font Awesome hoặc dashicons, thì Menu Image sẽ tự động thay đổi kích thước của chúng. Tuy nhiên, nếu bạn sử dụng hình ảnh từ thư viện phương tiện thì bạn sẽ cần chọn kích thước theo cách thủ công.

Plugin hỗ trợ các kích thước hình ảnh mặc định của WordPress, chẳng hạn như hình thu nhỏ, hình ảnh và lớn. Nó cũng thêm ba kích thước duy nhất được đặt thành 24 × 24, 36 × 36 và 48 × 48 pixel theo mặc định.


Các cài đặt này sẽ hoạt động tốt đối với hầu hết các trang web nhưng bạn có thể làm cho các biểu tượng lớn hơn hoặc nhỏ hơn bằng cách nhập các số khác nhau cho kích thước Hình ảnh Menu thứ nhất, thứ hai hoặc thứ ba.

Khi bạn thêm các biểu tượng vào menu của mình, theo mặc định, bạn sẽ thấy trường 'hình ảnh khi di chuột'. Điều này cho phép bạn hiển thị một biểu tượng khác khi khách truy cập di chuột qua mục menu đó.

Chỉ cần lưu ý rằng cài đặt này chỉ khả dụng khi bạn đang sử dụng hình ảnh của riêng mình. Bạn không cần phải lo lắng về tính năng 'hình ảnh khi di chuột' nếu định sử dụng biểu tượng dấu gạch ngang hoặc biểu tượng Phông chữ tuyệt vời.

Hiển thị một biểu tượng khác có thể giúp khách truy cập biết họ đang ở đâu trong menu điều hướng. Điều này đặc biệt hữu ích nếu một menu có nhiều mục khác nhau. Ví dụ: bạn có thể sử dụng các màu hoặc kích thước biểu tượng khác nhau để làm nổi bật mục menu hiện được chọn.

Nếu bạn muốn thử các hiệu ứng di chuột khác nhau, hãy đảm bảo rằng bạn đã chọn 'Bật hình ảnh trên trường di chuột'.


Khi đã xong, nhấp vào 'Lưu thay đổi' để lưu cài đặt của bạn.

Để thêm các biểu tượng vào menu điều hướng, hãy đi tới Giao diện »Menu. Theo mặc định, WordPress sẽ hiển thị menu chính của trang web của bạn.


Nếu bạn muốn chỉnh sửa một menu khác, thì chỉ cần mở menu thả xuống 'Chọn menu để chỉnh sửa' và chọn một menu từ danh sách. Sau đó, nhấp vào 'Chọn'.

Bây giờ, hãy tìm mục menu đầu tiên mà bạn muốn thêm một biểu tượng và nhấp vào nó. Sau đó, chỉ cần chọn nút 'Thêm hình ảnh / Biểu tượng' mới.


Giờ đây, bạn có thể quyết định sử dụng hình ảnh của riêng mình hay chọn một biểu tượng.

Để sử dụng biểu tượng làm sẵn, hãy nhấp vào nút radio bên cạnh 'Biểu tượng'. Sau đó, bạn có thể nhấp để chọn bất kỳ biểu tượng dấu gạch ngang hoặc biểu tượng Phông chữ tuyệt vời nào.


Bạn có muốn sử dụng hình ảnh của riêng bạn để thay thế?

Sau đó chọn nút radio bên cạnh 'Hình ảnh' và nhấp vào liên kết 'Đặt hình ảnh'.


Bây giờ bạn có thể chọn một hình ảnh từ thư viện phương tiện WordPress hoặc tải lên một tệp mới từ máy tính của mình.

Nếu bạn đã chọn 'Bật hình ảnh trên trường di chuột' trong cài đặt của plugin thì bạn cũng cần nhấp vào 'Đặt hình ảnh khi di chuột.'


Bây giờ, hãy chọn một hình ảnh để hiển thị khi người dùng di chuột qua mục menu này.

Đôi khi, bạn có thể muốn bỏ qua cài đặt này và hiển thị cùng một biểu tượng bất kể điều gì. Để thực hiện việc này, hãy nhấp vào 'Đặt hình ảnh khi di chuột' và sau đó chọn chính xác hình ảnh đó.

Nếu bạn không làm điều này, thì biểu tượng sẽ biến mất khi khách truy cập di chuột qua nó.


Sau đó, mở trình đơn thả xuống Kích thước hình ảnh và chọn một kích thước từ danh sách. Sử dụng cùng một kích thước cho tất cả các biểu tượng có xu hướng làm cho menu trông có tổ chức hơn.

Tuy nhiên, bạn có thể làm cho biểu tượng quan trọng nhất của menu lớn hơn. Ví dụ: nếu bạn đã tạo cửa hàng trực tuyến bằng cách sử dụng plugin như WooCommerce thì bạn có thể sử dụng biểu tượng lớn hơn cho 'Thanh toán' để biểu tượng nổi bật.

Khi bạn hài lòng với biểu tượng, đã đến lúc xem nhãn của mục menu.

Theo mặc định, plugin hiển thị nhãn tiêu đề sau biểu tượng.


Để thay đổi điều này, hãy chọn bất kỳ nút radio nào trong phần 'Vị trí tiêu đề'.

Một tùy chọn khác là loại bỏ hoàn toàn nhãn điều hướng, tạo menu chỉ có biểu tượng. Điều này có thể ngăn menu có nhiều mục trông lộn xộn.

Tuy nhiên, bạn chỉ nên ẩn các nhãn nếu rõ ràng ý nghĩa của từng biểu tượng. Nếu nó không rõ ràng, thì khách truy cập sẽ gặp khó khăn khi điều hướng blog hoặc trang web WordPress của bạn.

Để tiếp tục và ẩn nhãn, hãy chọn nút radio bên cạnh 'Không có'.


Khi bạn hài lòng với cách thiết lập mục menu, hãy nhấp vào 'Lưu Thay đổi'.

Để thêm một biểu tượng vào các mục menu khác, chỉ cần làm theo quy trình tương tự được mô tả ở trên.

Khi bạn hoàn tất, đừng quên nhấp vào nút 'Lưu Menu'. Bây giờ, nếu bạn truy cập trang web của mình, bạn sẽ thấy menu điều hướng được cập nhật trực tiếp.

3. Phương pháp 2: Thêm biểu tượng vào menu WordPress bằng mã (Tùy chỉnh thêm)

Bạn cũng có thể thêm các biểu tượng hình ảnh vào menu điều hướng của mình bằng cách sử dụng CSS tùy chỉnh. Điều này cho phép bạn linh hoạt hơn để kiểm soát chính xác vị trí các biểu tượng xuất hiện trong menu của mình.

Tuy nhiên, nó yêu cầu bạn thêm mã tùy chỉnh vào WordPress, vì vậy, nó được khuyến nghị cho những người dùng WordPress trung cấp hoặc cao cấp hơn.


Trước khi bạn bắt đầu, hãy tiếp tục và tải tất cả các tệp hình ảnh của bạn lên thư viện phương tiện WordPress. Đối với mỗi hình ảnh, hãy đảm bảo rằng bạn sao chép URL của nó và dán vào trình soạn thảo văn bản như Notepad. Bạn sẽ cần sử dụng các liên kết trong mã của mình, vì vậy điều này có thể giúp bạn tiết kiệm rất nhiều thời gian.

Để tìm URL của hình ảnh, chỉ cần chọn nó trong thư viện phương tiện WordPress rồi xem trường 'URL tệp'.


Để biết hướng dẫn chi tiết hơn, vui lòng xem hướng dẫn của chúng tôi về cách lấy URL của hình ảnh bạn tải lên trong WordPress.

Sau đó, vào Giao diện » Menus.


Tiếp theo, mở menu thả xuống 'Chọn menu để chỉnh sửa' và chọn menu nơi bạn muốn thêm các biểu tượng hình ảnh.

Sau đó, hãy tiếp tục và nhấp vào 'Chọn'.


Tiếp theo, bạn cần bật các lớp CSS tùy chỉnh bằng cách nhấp vào 'Tùy chọn màn hình'.

Trong bảng điều khiển xuất hiện, hãy chọn hộp bên cạnh 'Lớp CSS'.


Khi đã xong, bạn có thể thêm các lớp CSS tùy chỉnh vào bất kỳ mục nào trong menu điều hướng. Đây là cách bạn sẽ liên kết từng mục menu với một hình ảnh trong thư viện phương tiện WordPress.

Bạn có thể gọi những lớp này là bất cứ thứ gì bạn muốn, nhưng tốt hơn hết là sử dụng thứ gì đó giúp bạn xác định mục menu.

Để bắt đầu, chỉ cần nhấp vào mục đầu tiên bạn muốn thêm biểu tượng hình ảnh vào. Trong trường 'Lớp CSS (tùy chọn)', nhập tên lớp bạn muốn sử dụng.


Bạn sẽ sử dụng các lớp CSS tùy chỉnh này trong bước tiếp theo, vì vậy hãy ghi lại chúng trong Notepad hoặc ứng dụng tương tự của bạn.

Chỉ cần làm theo quy trình tương tự để thêm một lớp riêng biệt vào tất cả các mục menu của bạn. Sau đó, nhấp vào 'Lưu Menu' để lưu cài đặt của bạn.

Lưu ý: Mỗi biểu tượng sẽ được gắn với lớp CSS riêng, vì vậy hãy đảm bảo gắn nhãn các mục menu khác nhau nếu bạn muốn sử dụng các biểu tượng riêng biệt.


Bây giờ bạn đã sẵn sàng để thêm các biểu tượng hình ảnh vào menu điều hướng WordPress của mình bằng CSS.

Thông thường, các hướng dẫn về WordPress sẽ yêu cầu bạn thêm đoạn mã vào các tệp chủ đề WordPress của mình. Tuy nhiên, làm như vậy có thể gây ra các lỗi WordPress phổ biến và không thân thiện với người mới bắt đầu.

Đó là lý do tại sao chúng tôi khuyên dùng WPCode.

WPCode là plugin đoạn mã phổ biến nhất được hơn 1 triệu trang web WordPress sử dụng. Nó cho phép bạn thêm mã tùy chỉnh mà không cần chỉnh sửa tệp tin functions.php của chủ đề.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin WPCode miễn phí. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.

Sau khi kích hoạt, hãy truy cập Code Snippets » Add Snippet.


Tại đây, chỉ cần di chuột qua 'Thêm mã tùy chỉnh của bạn.'

Khi nó xuất hiện, nhấp vào 'Sử dụng đoạn trích.'


Để bắt đầu, hãy nhập tiêu đề cho đoạn mã tùy chỉnh. Đây có thể là bất kỳ thứ gì giúp bạn xác định đoạn trích trong bảng điều khiển WordPress.

Khi đã xong, hãy mở trình đơn thả xuống 'Loại mã' và chọn 'Đoạn mã CSS'.


Trong trình chỉnh sửa mã, bạn sẽ cần thêm một số mã cho mọi biểu tượng mà bạn muốn hiển thị.

Để giúp bạn hiểu, chúng tôi đã tạo một đoạn mã mẫu bên dưới. Bạn có thể tiếp tục và thay đổi '.carticon' thành lớp CSS tùy chỉnh mà bạn đã tạo ở bước trước. Bạn cũng sẽ cần thay thế URL bằng liên kết tới hình ảnh trong thư viện phương tiện WordPress của mình:

.carticon {
background-image: url('http://localhost:10013/wp-content/my-media/cartcheckout.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}
Lưu ý: Bạn sẽ cần giữ nguyên dấu chấm '.' trước lớp CSS trong đoạn mã. Đó là những gì nói với WordPress rằng đó là một lớp chứ không phải một loại bộ chọn CSS khác.

Bạn sẽ cần điều chỉnh đoạn mã trên cho từng mục menu riêng lẻ mà bạn đã tạo ở trên. Bạn có thể chỉ cần dán tất cả chúng vào trường 'Xem trước mã'.

Khi bạn hài lòng với mã của mình, hãy cuộn đến phần 'Chèn'. WPCode có thể thêm mã vào các vị trí khác nhau, chẳng hạn như sau mỗi bài đăng, chỉ giao diện người dùng hoặc chỉ quản trị viên.

Bạn muốn sử dụng mã CSS tùy chỉnh trên toàn bộ trang web WordPress của chúng tôi, vì vậy hãy nhấp vào 'Chèn tự động' nếu nó chưa được chọn.

Sau đó, mở trình đơn thả xuống 'Vị trí' và chọn 'Tiêu đề toàn trang'.


Sau đó, bạn đã sẵn sàng cuộn lên đầu màn hình và nhấp vào nút chuyển đổi 'Không hoạt động' để nút này chuyển thành 'Hoạt động'.

Cuối cùng, nhấp vào 'Lưu đoạn trích' để làm cho CSS tùy chỉnh hoạt động.


Bây giờ, nếu bạn truy cập trang web của mình, bạn sẽ thấy tất cả các biểu tượng hình ảnh trong menu điều hướng.

Tùy thuộc vào chủ đề của bạn, bạn có thể cần điều chỉnh CSS để nó hiển thị các biểu tượng hình ảnh ở đúng vị trí. Nếu đúng như vậy, hãy đi tới Đoạn mã » Đoạn mã trong bảng điều khiển WordPress.

Sau đó, chỉ cần di chuột qua đoạn mã và nhấp vào liên kết 'Chỉnh sửa' khi nó xuất hiện.


Thao tác này sẽ mở trình chỉnh sửa mã, sẵn sàng để bạn thực hiện một số thay đổi.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm biểu tượng hình ảnh vào menu điều hướng WordPress của mình. Bạn cũng có thể xem qua hướng dẫn của chúng tôi về trình tạo trang WordPress kéo và thả tốt nhất và cách kiếm tiền từ việc viết blog trực tuyến với WordPress.