Cách thêm icon vào menu của wordpress đơn giản nhất

Bạn muốn thêm icon vào menu của wordpress? Đây là câu hỏi mà những người mới vào nghề hay những người không rành về công nghệ sẽ thắc mắc. Thường thì bạn sẽ chỉnh sửa CSS của theme mà bạn đang dùng, nhưng nhờ có plugin hoàn toàn mới, bạn sẽ không phải làm điều này nữa. Menu icon là một plugin wordpress cho phép bạn làm điều này dễ dàng mà không cần động vào bất kỳ đoạn mã nào. Trong bài viết dưới đây Tungphat.com sẽ giúp bạn.

Tạo icon cho menu website
Tạo icon cho menu website

Vì sao nên thêm icon vào menu của wordpress

Thường thì các menu điều hướng khi thiết kế website wordpress là các textlink thuần túy. Các liên kết này hoạt động hầu hết với các trang web, nhưng bạn có thể làm cho menu điều hướng của mình trông hấp dẫn hơn bằng cách thêm các icon vào. Các icon này làm cho menu của website trở nên dễ nhìn hơn rất nhiều.

Hướng dẫn thêm icon trên menu cho wordpress

Cách thêm icon menu cho wordpress
Cách thêm icon menu cho wordpress

Thêm icon vào menu cho wordpress bằng plugin

Với cách làm này rất dễ, rất phù hợp cho những người mới dùng wordpress vì nó không yêu cầu bạn biết về code.

Sử dụng plugin

Bước 1: Đầu tiên bạn hãy cài đặt và kích hoạt plugin Menu image.

Bước 2: Sau khi kích hoạt xong bạn vào Appearance (Giao diện) rồi chọn Menu.

Bước 3: Bạn có quyền click vào bất kỳ mục nào ở cột bên phải để mở rộng menu. Sau đó bạn sẽ thấy các mục Menu image và Image on hover trong cài đặt.

Khi dùng các mục này, bạn cần phải tải hình ảnh mà bạn muốn sử dụng lên, cũng có thể chỉ tải một hình ảnh cho mục “menu image” và bỏ qua mục image on hover.

Mục image size cho phép bạn thùy chọn kích thước của icon, kích thước này sẽ được áp dụng cho hai mục đã nêu ở trên.

Plugin này kèm theo nhiều lựa chọn về kích thước, nhưng bạn nên để icon với kích thước 24×24 hoặc 36×36.

Nếu bạn muốn chỉnh kích thước theo ý muốn cho menu image thì bạn hãy thêm đoạn code vào file functions.php của theme.

add_filter( ‘menu_image_default_sizes’, function($sizes){

Bạn có thể đặt tiêu đề ở phía trên, dưới, trước hoặc ở sau icon, nó cũng cho phép bạn ẩn tiêu đề và chỉ hiển thị icon cho từng danh sách điều hướng.

Sau khi bạn đã xác định được cấu hình cài đặt, chỉ cần bạn thêm icon hình ảnh vào tất cả các mục danh sách điều hướng riêng biệt, rồi sau đó nhấn nút Save menu để xem các icon hoạt động.

Thêm icon vào menu wordpress bằng CSS

Với cách này thì đòi hỏi người dùng có kinh nghiệm hơn và biết cách dùng CSS.

Chèn css

Bước 1: Đầu tiên bạn chọn Media » Add New để tải lên tất cả icon mà bạn sử dụng trong wordpress. Sau khi tải hoàn tất, hãy sao chép URL rồi dán chúng vào trình soạn thảo văn bản giống như Notepad.

Bước 2: Sau đó bạn truy cập vào Appearance » Menus rồi click vào nút Screen Options ở góc trên cùng bên phải màn hình sẽ có các tùy chọn hiện ra bạn cần phải tích vào tùy chọn CSS Classes.

Bước 3: Tiếp theo bạn kéo xuống rồi nhấp vào bất kỳ mục nào để mở rộng cài đặt, sẽ có mục tên CSS Classes, mục này là mục để điền tên CSS Class cho menu.

Bạn hãy thêm đoạn code CSS này vào theme của bạn.

.homeicon {

background-image: url(‘http://www.example.com/wp-content/uploads/2018/09/home.png’);

background-repeat: no-repeat;

background-position: left;

padding-left: 5px;

}

Trong đoạn code trên, .homeicon chính là tên class mà bạn đã thêm vào tên CSS Classes ở trên.

Tùy vào theme bạn đang sử dụng mà bạn cần phải tùy chỉnh CSS để có được vị trí hoàn hảo cho menu icon. Nếu bạn thấy ưng ý rồi thì hãy lặp lại quy trình này cho tất cả các mục.

Thêm icon menu bằng Font Awesome vào wordpress

sử dụng font awesome

Bước 1: Đầu tiên bạn truy cập vào link: https://fontawesome.com/icons?from=io sau đó click vào các icon đang hiển thị.

Ví dụ tôi chọn icon Home.

Bạn sẽ thấy có một trang mới hiện ra, dưới đây tôi chọn icon fa-address-book.

Bạn hãy copy đoạn code này: <i class=“fa fa-book” aria-hidden=”true”></i>

Bước 2: Bạn vào phần quản trị Menu trong wordpress rồi paste code đó vào phần nhãn điều hướng rồi lưu lại là xong.

Sau đó bạn vào web xem kết quả.

Trường hợp icon không hiển thị thì bạn hãy kiểm tra lại các icon bạn đang sử dụng có chọn đúng trong mục Web Application icon hay là không.

Nếu đúng mà vẫn không xuất hiện icon thì bạn có thể thêm đoạn code dưới đây vào tập tin header.php trong thẻ <head> là được.

<link href=”https://use.fontawesome.com/releases/v5.0.8/css/all.css” rel=”stylesheet”>

Trả lời

CSKH 24/7: 028.7776.8789
Email hỗ trợ: [email protected]