Cách thêm icon bằng hình ảnh trước menu trong WordPress

Mến chào các bạn đã ghé vào trang web của mình 1 lần nữa 😆, nếu các bạn thấy hay thì đăng ký kênh ủng hộ nhé. Kênh youtube

Mình không thích vòn vo dài dòng nên nói thẳng ra là hôm nay sẽ hướng dẫn các bạn cách thêm icon bằng hình ảnh đứng  trước menu trong wordpress

Nào cùng mình làm nhé….

Tại sao bạn nên thêm biểu tượng hình ảnh với menu?

Thông thường, các menu điều hướng trong WordPress là các liên kết văn bản 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 đẹp hơn và dễ tương tác hơn bằng cách thêm các biểu tượng hình ảnh.

Các biểu tượng hình ảnh cũng có thể được sử dụng để làm cho menu của bạn dễ nhận thấy hơn. Ví dụ: một 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 giữa các liên kết khác trong menu của bạn.

Video hướng dẫn

sẽ cập nhật sớm tại đây

Nếu bạn không muốn xem video hướng dẫn, bạn có thể tiếp tục  văn bản bên dưới:

Phương pháp : Thêm biểu tượng menu bằng plugin

Phương pháp này dễ dàng hơn và nó được khuyến khích cho bạn nào mới bắt đầu vì nó không cần phải viết đoạn code nào cả

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Menu Image

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. Bạn sẽ thấy nút “Menu image” và “Image on hover” trong 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 biểu tượng hình ảnh menu mà bạn muốn sử dụng.

Trong phần ‘Image size‘, bạn có thể chọn kích thước cho biểu tượng hình ảnh. Kích thước này sẽ áp dụng cho cả menu icon imagemage on hover.

Plugin đi kèm với nhiều tùy chọn để bạn lựa chọn. Tuy nhiên, mình khuyên các bạn nên giữ 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 kích thước tùy chỉnh của riêng mình cho hình ảnh menu, thì bạn có thể làm điều đó bằng cách thêm mã này vào chủ đề của bạn trong file functions.php file or 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í tiêu đề ở trên, dưới, trước hoặc sau biểu tượng hình ảnh. Nó cũng cho phép bạn ẩn tiêu đề và chỉ hiển thị biểu tượng hình ảnh cho mỗi menu.

hình ảnh trước menu trong WordPress

Khi bạn đã định cấu hình cài đặt, chỉ cần thêm các biểu tượng hình ảnh vào tất cả các mục menu điều hướng của bạn một cách riêng biệt. Tiếp theo, bạn cần nhấp vào nút ‘Save Menu’ để xem các biểu tượng menu đang hoạt động.

Và thế là xong rồi nhé các bạn! chúc các bạn thành công i love u 😆

1
0
Would love your thoughts, please comment.x
()
x