0

Cách thêm biểu tượng hình ảnh với menu điều hướng trong WordPress

Bạn có muốn thêm các biểu tượng hình ảnh trong menu điều hướng WordPress của mình không? Gần đây, một trong những người dùng của chúng tôi đã yêu cầu một cách dễ dàng để thêm các biểu tượng menu. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thêm biểu tượng hình ảnh với menu điều hướng trong WordPress.

Adding navigation menu icons in WordPress

Tại sao Bạn nên Thêm Biểu tượng Hình ảnh với Menu Điều hướng?

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 tương tác hơn bằng cách thêm các biểu tượng hình ảnh.

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.

Như đã nói, chúng ta hãy xem cách dễ dàng thêm các biểu tượng hình ảnh với menu điều hướng trong WordPress.

Video hướng dẫn

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

Phương pháp 1: 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 người dùng mới bắt đầu vì nó không liên quan đến mã.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Menu Image . Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress .

Sau khi kích hoạt, bạn cần truy cập trang Giao diện »Menu .

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 nó. Bạn sẽ thấy các nút ‘Hình ảnh menu’ và ‘Hình ảnh khi di chuột’ trong cài đặt cho từng mục.

Menu image buttons

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. Nếu muốn, bạn chỉ có thể tải lên hình ảnh menu và bỏ qua hình ảnh di chuột.

Trong menu thả xuống ‘Kích thước hình ảnh’, 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ả hình ảnh biểu tượng menu và hình ảnh khi di chuột.

Plugin đi kèm với nhiều tùy chọn để bạn lựa chọn. Tuy nhiên, chúng tôi khuyên 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.

Menus icon size

Nếu bạn muốn thêm kích thước tùy chỉnh của riêng mình cho các hình ảnh menu, thì bạn có thể làm điều đó bằng cách thêm mã này vào tệp functions.php của chủ đề hoặc plugin dành riêng cho trang web của bạn .

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ể đặ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 điều hướng.

Title position

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.

Image icons in navigation menu

Phương pháp 2: Thêm biểu tượng menu bằng đoạn mã

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

Đầu tiên, bạn cần truy cập Media »Add New để tải lên tất cả các biểu tượng hình ảnh của bạn trong WordPress. Sau khi tải lên, bạn cần sao chép URL của chúng và dán chúng vào trình soạn thảo văn bản như Notepad.

Tiếp theo, bạn cần vào Appearance »Menus và nhấp vào nút ‘ Screen Options ‘ ở góc trên cùng bên phải của màn hình. Trong các tùy chọn màn hình, bạn cần chọn tùy chọn ‘Lớp CSS’.

Add CSS classes

Sau đó, cuộn xuống và nhấp vào bất kỳ mục menu nào để mở rộng cài đặt của nó. Bạn sẽ nhận thấy trường ‘Lớp CSS (Tùy chọn)’ nơi bạn cần thêm tên lớp CSS cho mục menu.

Add class name

Bây giờ bạn cần thêm CSS tùy chỉnh này vào chủ đề 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 mà bạn đã thêm vào trường Lớp CSS ở trên.

Tùy thuộc vào chủ đề của bạn, bạn có thể cần điều chỉnh CSS một chút để có được vị trí hoàn hảo cho các biểu tượng menu. Khi bạn hài lòng với kết quả, hãy lặp lại quy trình cho tất cả các mục trong menu.

Đó là tất cả. Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm biểu tượng hình ảnh với menu điều hướng trong WordPress. Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách tạo kiểu cho các menu điều hướng trong WordPress .

.

Windy

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *