Bạn muốn thêm Icon trong menu điều hướng của WordPress? Cũng có rất nhiều hỏi mình là làm cách nào để thêm icon vào Menu trên WordPress.Trong bài viết này, tôi sẽ hướng dẫn bạn làm thế nào để để thêm các Icon vào Menu điều hướng trong WordPress.

Tại sao bạn nên thêm icon vào menu điều hướng?

Thông thường, Các menu điều hướng của WordPress là các text link 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, tuy nhiên bạn có thể làm cho menu điều hướng của mình trông tương tác hơn bằng cách thêm vào nhiều icon.

Những icon này rất trực quan, làm cho menu trở nên dễ nhìn hơn rất nhiều. Lấy ví dụ: Một Icon đẹp bên cạnh trang liên hệ, sẽ làm nó nổi bật hơn và dễ nhận biết hơn.

Rất đơn giản, để thêm Icon hình ảnh với menu điều hướng trong WordPress chỉ cần dùng 2 phương pháp sau đây:

Phương pháp 1: Thêm icon vào menu bằng plugin.

Phương pháp này rất dễ và được khuyên dùng cho những người mới dùng WordPress, vì nó không yêu cầu bạn biết về code

Đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Menu Image, bạn hãy tham khảo hướng dẫn làm sao để cài đặt một plugin của WordPress

Khi kích hoạt, bạn cần vào Appearance (Giao diện) và chọn Menu (Danh sách).

Từ đây, 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. 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 cài đặt.

Khi sử dụng các mục này, bạn cần tải lên hình ảnh mà bạn muố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’  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 chúng tôi đề nghị bạn nên để icon ở kích cỡ 24×24 hoặc 36×36.

Nếu muốn tuỳ chỉnh kích thước của riêng mình cho Menu Image, hãy thêm đoạn code này vào file functions.php của theme.

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ó thể đặt vị trí tiêu đề ở phía trên, dưới, trước hoặc sau Icon. Nó 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.

Phương pháp 2: Thêm icon vào menu bằng CSS.

Phương pháp này dành cho những người dùng kinh nghiệm hơn, biết cách sử dụng CSS.

Trước tiên, hãy chọn Media » Add New để tải lên tất cả các icon bạn sử dụng trong WordPress. Sau khi tải lên hoàn tất, sao chép URL và dán chúng vào trình soạn thảo văn bản như Notepad.

Tiếp theo, truy cập vào Appearance » Menus và click vào nút ‘Screen Options‘ ở góc trên cùng bên phải màn hình. Trong các tùy chọn hiện ra, bạn cần tích vào tùy chọn ‘CSS Classes’.

Sau đó, kéo xuống và nhấp vào bất kỳ mục nào để mở rộng cài đặt. Bạn sẽ thấy một mục tên là ‘CSS Classes’, đây là mục cần điền tên CSS class cho menu này.

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

.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 CSS này, .homeicon là tên class mà bạn đã thêm vào tên class CSS ở trên.

Tùy thuộc vào theme đang sử dụng, bạn sẽ cần phải tinh chỉnh CSS một chút để có được vị trí hoàn hảo cho những menu icon. Khi đã cảm thấy ưng ý, hãy lặp lại quy trình cho tất cả các mục.

Với 2 phương pháp trên, chúng tôi hy vọng bài viết này đã giúp được bạn làm thế nào để thêm Icon hình ảnh với menu điều hướng trong WordPress. Nếu có thể, bạn hãy xem thêm bài viết Thêm tiêu đề trong WordPress Menu mà không cần liên kết đến một trang.

Hãy đăng ký Email với chúng tôi để nhận được nhiều thông tin hơn, nếu thấy thông tin này hữu ích hãy chia sẻ với những người khác nhé.