Có phải bạn đang muốn chèn thêm icon vào menu của WordPress? Gần đây chúng tôi đãnhận được các yêu cầu hỗ trợ từ người đọc liên quan đến việc họ muốn chèn thêm hình ảnh dạng icon vào menu. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thêm icon vào menu trong WordPress.
Tại sao bạn nên thêm icon vào menu?
Thông thường, các menu trong WordPress thường chỉ có chữ và chữ. Những mục này bình thường không gây ra vấn đề gì, những nếu có thêm các icon vào thì trông chúng sẽ bắt mắt hơn nhiều.
Các icon cũng có thể làm cho menu của bạn dễ nhận thấy hơn. Ví dụ: một icon bên cạnh trang contact có thể làm cho nó nổi bật giữa các liên kết khác trong menu của bạn.
Như đã nói, chúng ta hãy xem cách để dễ dàng thêm icon vào menu trong WordPress.
Video hướng dẫn
Nếu không muốn xem video hướng dẫn, thì bạn có thể tiếp tục đọc phiên bản văn bản bên dưới:
Hướng dẫn thao tác chèn icon vào menu WordPress
Phương pháp 1: Thêm menu icon bằng plugin
Phương pháp này dễ thực hiện và phù hợp với người dùng mới vì không phải sử dụng mã nguồn.
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Menu Image . Để biết thêm chi tiết, hãy đọc bài viết của chúng tôi về cách cài đặt plugin WordPress .
Sau khi kích hoạt, bạn cần truy cập trang Appearance » Menus.
Từ đây, bạn có thể nhấp vào bất kỳ mục menu nào ở cột bên phải để mở rộng nó. Bạn sẽ thấy các nút Menu image và Image on hover trong phần cài đặt cho từng mục.
Sử dụng các nút này, bạn có thể chọn hoặc tải lên icon menu mà bạn muốn sử dụng. Nếu muốn, bạn chỉ cần upload menu image và bỏ qua phần hover image.
Trong menu Image size bạn có thể chọn kích thước cho icon. Kích thước này sẽ áp dụng cho cả hình ảnh menu icon và image on hover (hình ảnh khi di chuột qua).
Plugin đi kèm với nhiều tùy chọn khác. Tuy nhiên, chúng tôi khuyên bạn nên để nguyên các biểu tượng menu nhỏ bằng cách sử dụng kích thước 24 × 24 hoặc 36 × 36.
Nếu bạn muốn thêm các kích thước của riêng mình, thì bạn có thể chèn thêm đoạn mã này vào file functions.php của theme hoặc site-specific plugin
add_filter( 'menu_image_default_sizes', function($sizes){
// remove the default 36x36 size
unset($sizes['menu-36x36']);
// add a new size
$sizes['menu-50x50'] = array(50,50);
// return $sizes (required)
return $sizes;
});
Bạn cũng có thể đặt vị trí cho text ở trên, dưới, trước hoặc sau icon. Plugin cũng cho phép bạn ẩn tiêu đề và chỉ hiển thị icon.
Khi bạn đã cấu hình xong, chỉ cần thêm các icon vào tất cả các mục menu tương ứng. Tiếp theo, bạn cần nhấp vào nút Save Menu để xem các biểu tượng menu hoạt động trên thực tế như thế nào.
Phương pháp 2: Thêm menu icon bằng cách sửa mã nguồn
Phương pháp này dành cho những người dùng có kinh nghiệm hơn, những người biết cách sử dụng CSS.
Trước tiên, bạn cần truy cập Media »Add New để upload tất cả các icon của bạn vào WordPress. Sau khi upload, bạn cần sao chép URL của chúng và dán vào trình soạn thảo văn bản như Notepad để dùng sau.
Tiếp theo, bạn cần vào Appearance »Menus và nhấp vào nút Screen Options ở góc trên cùng bên phải của màn hình. Trong các tùy chọn, bạn cần chọn mục CSS Classes.
Sau đó, cuộn xuống và nhấp vào bất kỳ menu nào để mở rộng các cài đặt của nó. Bạn sẽ thấy trường CSS Classes (Optional), nơi cho phép bạn thêm CSS class cho menu.
Bây giờ bạn cần chèn đoạn CSS này vào theme của mình.
.homeicon {
background-image: url('https://www.example.com/wp-content/uploads/2018/09/home.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}
Trong đoạn mã CSS này, .homeicon là tên class mà bạn đã thêm vào trường CSS class ở trên.
Tùy thuộc vào theme của bạn, bạn có thể cần phải điều chỉnh lại đoạn CSS này một chút để các icon ở vị trí mong muốn. Khi bạn hài lòng với kết quả, hãy lặp lại quy trình cho tất cả các mục trong menu.
Chúng tôi hy vọng bài viết này đã giúp bạn học được cách thêm icon vào menu trong WordPress. Bạn cũng có thể tham khảo thêm hướng dẫn của chúng tôi về cách trang trí cho các menu trong WordPress .
Nếu thích bài viết này, bạn vui lòng đăng ký Kênh YouTube của chúng tôi để xem video hướng dẫn. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.