Bạn đang làm website wordpress, và bạn muốn thêm icon vào menu của web wordpress để cho menu trở nên sinh động và trông thật chuyên nghiệp hơn? Để có thể làm được việc đó thì trithucweb.com.vn sẽ giới thiệu đến các bạn những cách thêm icon vào menu đơn giản nhất có thể. Hãy cùng chúng tôi theo dõi ngay trong bài viết dưới đây nhé!
Lý do bạn nên thêm icon vào menu wordpress
Thông thường khi thiết kế website giá rẻ những người code thường sử dụng menu dạng thuần túy, cho nên website của bạn sẽ trông không được sinh động và bắt mắt chính vì vậy bạn nên sử dụng những icon trên menu website wordpress để chúng có thể trở nên sinh động và hấp dẫn hơn rất nhiều.
Hướng dẫn thêm icon vào menu wordpress
Thêm icon vào menu bằng plugin
Đây được xem là cách đơn giản nhất để thêm icon vào menu. Cách này rất dễ thực hiện và được rất nhiều người sử dụng cho website wordpress, vì nó không bắt bạn phải biết nhiều về code.
Đầu tiên bạn cần phải cài đặt và kích hoạt plugin menu image, Khi đã kích hoạt xong, bạn hãy vào Appearance (Giao diện) và chọn Menu (Danh sách).
Tại đây bạn sẽ có quyền click vào bất kỳ mục nào ở cột bên phải để mở rộng menu. Bạn cũng sẽ thấy các mục ‘Menu image’ và ‘Image on hover’ (Hình ảnh khi di chuyển) trong mục cài đặt.
Khi sử dụng các mục này, bạn cần tải các hình ảnh icon lên để sử dụng. bạn cũng có thể chỉ tải lên một hình ảnh cho mục ‘menu image’ và bỏ qua mục ‘image on hover’. Với mục ‘Image size’ sẽ cho phép bạn chọn kích thước của Icon. Kích thước này sẽ được áp dụng cho cả hai mục đã nói ở trên.
Plugin này kèm theo nhiều sự lựa chọn về kích cỡ. Tuy nhiên bạn nên để icon ở kích cỡ 24×24 hoặc 36×36.
Nếu bạn muốn điều chỉnh kích thước theo ý mình cho Menu Image, hãy thêm đoạn code này vào file functions.php của theme mà bạn đang sử dụng.
add_filter( ‘menu_image_default_sizes’, function($sizes){
// remove the default 36×36 size
unset($sizes[‘menu-36×36’]);
// add a new size
$sizes[‘menu-50×50’] = array(50,50);
// return $sizes (required)
return $sizes;
});
Bạn có thể đặt vị trí tiêu đề ở phía trên, dưới, trước hoặc sau Icon. Nó sẽ cho phép bạn ẩn tiêu đề và chỉ hiển thị Icon cho từng danh sách điều hướng.
Khi bạn đã xác định được cấu hình cài đặt, chỉ cần thêm Icon hình ảnh vào tất cả các mục danh sách điều hướng một cách riêng biệt. Tiếp theo, hãy nhấp vào nút ‘Save Menu’ để xem các icon đấy hoạt động theo ý mình nhé.
Thêm icon vào menu wordpress bằng CSS
Với cách làm này thì bạn cần phải biết cách sử dụng CSS và có một chút kinh nghiệm về CSS thì mới thực hiện một cách hiệu quả.
Bước 1: Bạn chọn Media » Add New để tải lên các icon mà bạn sử dụng để thêm vào menu trong wordpress. Tiếp theo sau đó hãy sao chép URL của hình ảnh đó 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: 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ó những tùy chọn được hiện ra bạn hãy tích vào tùy chọn CSS Classes.
Bước 3: Bạn hãy 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.
Sau đó hãy thêm đoạn code CSS này vào theme đang sử dụng.
.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, file .homeicon chính là tên class mà bạn đã thêm vào tên CSS Classes ở trên.
Tùy vào giao diện wordpress của bạn đang sử dụng mà bạn cần phải tùy chỉnh CSS để có được vị trí tốt nhất cho menu icon. Nếu thấy ưng ý rồi thì hãy làm tương tự cho các danh mục khác trên menu.
Thêm icon vào menu bằng Font Awesome
Bước 1: Truy cập vào link https://fontawesome.com/icons?from=io sau đó hãy chọn những icon đang hiển thị để sử dụng. Khi click vào icon đó sễ xuất hiện một đoạn code và bạn hãy copy đoạn code đó có dạng như: <i class=“fa fa-book” aria-hidden=”true”></i> để chèn vào theme wordpress nhé!
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.
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 file header.php trong thẻ <head> là được.
<link href=”https://use.fontawesome.com/releases/v5.0.8/css/all.css” rel=”stylesheet”>
Kết luận
Trên đây là những cách để thêm icon vào menu wordpress mà chúng tôi muốn chia sẽ đến các bạn. Với những cách này rất đơn giản phải không nào? Hy vọng với kiến thức website hữu ích này sẽ giúp các bạn nhanh chóng có được một thanh menu đẹp hơn, bắt mắt hơn cho trang web WordPress của mình. Nếu bạn thích bài viết này hãy share để mọi người cùng biết nhé, hoặc nếu bạn có bất kì thắc mắc nào thì hãy để lại bình luận bên dưới! Chúng tôi sẽ giải đáp những thắc mắc của bạn sớm nhất. Chúc các bạn thành công.