Dịch Vụ
Ưu Đãi
Thư ViệnNội dung
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.
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.
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.
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.
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.
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.
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 .
<link href=”https://use.fontawesome.com/releases/v5.0.8/css/all.css” rel=”stylesheet”>
Tùng Bùi SEO tôi là CEO & Founder Công ty SEO Tùng Phát. Với hơn + 10 năm kinh nghiệm làm SEO thực chiến ( Seo từ khóa website, Thiết Kế Website).
Tôi sẽ mang đến cho Anh/Chị – Giải pháp tiếp cận khách hàng hiệu quả cao thông qua các chiến lược tối ưu Seo tổng thể, seo từ khóa website lên top Google.
Nến bạn cần tư vấn chiến lược seo hãy ib qua zalo Mr. Tùng: 0902.313.677.
Xem thêm về Chuyên gia SEO: Tùng Bùi tại đây:https://tungphat.com/tung-bui
Dịch Vụ
Blog chia sẻ kiến thức
