Hướng dẫn thêm icon vào menu điều hướng WordPress

Bạn có muốn thêm icon vào menu điều hướng WordPress của mình? Thêm icon vào menu điều hướng giúp tăng tương tác với người dùng. Trong bài viết này tôi sẽ chia sẻ cách thêm icon vào menu điều hướng của WordPress site.

Tại sao bạn cần thêm icon vào menu?

Thường thì menu điều hướng trong WordPress chỉ là các siêu liên kết thuần túy. Các liên kết này hoạt động trên hầu hết các website. Tuy nhiên bạn có thể làm cho tăng tính tương tác cho nó bằng cách thêm vào các icon.

Các icon có thể sẽ làm cho menu điều hướng của bạn trông nổi bật hơn. Ví dụ biểu tượng hình ảnh đẹp bên cạnh trang liên hệ của bạn có thể làm cho nó nổi bật hơn giữa các trình đơn khác.

Chúng ta hãy cùng tìm hiểu các cách để biểu tượng vào menu điều hướng WordPress của mình.

Cách 1: Dùng plugin để thêm icon vào menu điều hướng

Cách này đơn giản hơn và nó được khuyên dùng cho những người mới vì không cần đụng tới code.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Menu Image. Nếu bạn chưa biết cách cài đặt plugin hãy đọc lại bài viết Hướng dẫn cài đặt và quản lý plugin trong WordPress.

Sau khi cài đặt, bạn cần truy cập vào trang Appearance » Menus.

Tại đây, bạn có thể nhấp vào bất kỳ đối tượng menu nào ở cột bên trái để mở rộng nó. Bạn sẽ nhìn thấy nút “Menu image” và “Image on hover” trong phần cài đặt của mỗi đối tượng.

menu image plugin setting page

Sử dụng các nút này bạn có thể tải lên và thiết lập hình ảnh mà mình muốn làm biểu tượng cho menu điều hướng. Bạn cũng có thể chỉ tải lên ảnh biểu tượng cho Menu image, bỏ qua Image on hover.

Trong menu xổ xuống Image size, bạn có thể chọn kích cỡ của icon. Kích cỡ này sẽ được áp dụng cho cả Menu image và Image on hover.

Plugin cung cấp nhiều tùy chọn kích cỡ cho biểu tượng. Tuy nhiên tôi khuyên bạn nên dùng icon có kích cỡ nhỏ khoảng từ 24×24 đến 36×36.

image size image menu

Nếu bạn muốn thêm kích cỡ tùy chỉnh cho các biểu tượng trên menu, bạn có thể thêm đoạn code bên dưới vào tập tin functions.php.

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ũng có thể thiết lập Title position ở phía trên, bên dưới, trước hoặc sau biểu tượng. Nó cũng cho phép bạn ẩn tiêu đề, chỉ hiển thị các biểu tượng trong menu.

title position

Sau khi bạn đã cấu hình các cài đặt, chỉ cần thêm ảnh biểu tượng vào tất cả các đối tượng menu khác nhau. Tiếp theo, bạn cần nhấp vào nút “Save Menu” để xem các icon hiển thị như thế nào.

add image to nav menu

Cách 2: Dùng Code Snippet để thêm biểu tượng cho menu điều hướng

Cách này dùng cho những người đã có kinh nghiệm và có kiến thức về CSS.

Đầu tiên bạn cần truy cập vào Media » Add New để tải lên tất cả các ảnh biểu tượng trong WordPress. Sau khi tải lên, bạn cần sao chép URL của nó và dán vào Notepad để sử dụng sau này.

Tiếp theo bạn cần truy cập vào Appearance » Menus và nhấp vào nút Screen Options ở góc phải phía trên màn hình. Trong Screen Options, bạn cần kích chọn tùy chọn CSS Classes.

screen option css class

Sau đó, nhấp vào bất kỳ menu nào để mở rộng các thiết lập của nó. Bạn sẽ nhìn thấy trường CSS Classes (Optional) để thêm tên lớp cho đối tượng menu.

add css class in wp

Tiếp đó bạn hãy thêm mã CSS tùy chỉnh bên dưới vào WordPress Theme của mình.

.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 mã CSS này, .homeicon là tên lớp CSS mà bạn đã thêm vào trong trường CSS Classes ở phía trên.

Tùy thuộc vào WordPress Theme của mình, bạn có thể tinh chỉnh đoạn mã trên sao cho phù hợp. Khi bạn cảm thấy hài lòng với kết quả này, hãy lặp lại quy trình cho các đối tượng menu còn lại.

Tôi hy vọng bài viết này sẽ giúp bạn biết cách thêm icon vào menu điều hướng trong WordPress.

Nếu bạn thấy bài viết hữu ích đừng quên Like và Share.

Hẹn gặp lại bạn trong các bài viết tiếp theo./.

Đăng ký nhận bài viết mới nhất

Hãy đăng ký nhận tin để nhận được những nội dung thú vị và tuyệt vời!

Để lại bình luận

Plugins Themes Thủ thuật
Cách hiển thị tổng số bình luận trong WordPress
Hướng dẫn thêm JavaScript trong WordPress
Hướng dẫn thêm JavaScript trong WordPress
HƯỚNG DẪN NHÂN BẢN WORDPRESS SITE
Hướng dẫn nhân bản WordPress site
Keyword Research SEO Offpage SEO Onpage
Từ khoá và website của bạn
Xây dựng Website chuẩn SEO
Xây dựng Website chuẩn SEO
Hướng dẫn chi tiết WordPress SEO
Hướng dẫn chi tiết WordPress SEO cho người mới
Ajax Bootstrap HTML/CSS JavaScript Joomla jQuery PHP/MySQL
Cách đặt tên miền
Tên miền là gì? Cách chọn tên miền cho blog WordPress
Thay đổi tên miền cho website wordpress
Hướng dẫn thay đổi tên miền cho website WordPress
Sự khác nhau giữa tên miền và Web Hosting
Sự khác nhau giữa tên miền và Web Hosting
Amazon Nichesite Google Adsense Product Lauch Social Marketing Viết Blog Youtube Partner
Thêm Google Adsense vào trang web WordPress
Hướng dẫn thêm Google Adsense vào trang web WordPress
Hướng dẫn đăng ký tài khoảnClickbank khi bị chặn ở Việt Nam
Hướng dẫn đăng ký tài khoản Clickbank khi bị chặn tại Việt Nam
Kiếm tiền từ blog WordPress
Kiếm tiền từ blog WordPress như thế nào?