Sử dụng hình ảnh trên thanh Menu trong WordPress


Mặc định của WordPress sẽ hiển thị Menu item dưới dạng Text, và cách hiển thị này hoạt động rất ổn với 99.9% website. Tuy nhiên, vì 1 lý do nào đó, bạn sẽ muốn sử dụng hình ảnh trên thanh Menu thay thế cho text giống như hình bên dưới (nút Đăng ký học thử).

su dung hinh anh menu item wordpress

Có thể có nhiều Plugin sẽ hỗ trợ bạn hoàn thành mong muốn này. Ở đây, tôi chia sẻ một cách đơn giản hơn bằng CSS thay cho việc cài thêm Plugin.

Trong WordPress, mỗi Menu item có 1 ID duy nhất. Bạn có thể tìm thấy ID của Menu item trong cửa sổ Inspect của Chrome/Firefox. Ví dụ như:

<li id="menu-item-532" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-532"><a href="http://thuthuatwebsite.net/">Thủ thuật Website</a></li>

Tiếp theo, bạn có thể thêm 1 đoạn CSS vào cuối file style.css (hoặc trong theme option có thể có nơi để bạn viết thêm code CSS) ví dụ như:

li#menu-item-532 a {
display: block;
background-image:url('http://url.to/your-image.jpg');
background-repeat: no-repeat;
width: 100px;
height: 50px;
text-indent: -9000px;
}

Set widthheight bằng đúng kích thước hình ảnh của bạn. Có thể sử dụng thêm padding hoặc margin để hình ảnh hiển thị cân đối trên Menu.

Property text-indent sẽ ẩn nội dung text ra khỏi màn hình (hoặc bạn có thể sử dụng font-size:0px), và hình ảnh background sẽ thay thế vào nội dung text của Menu item. Lặp lại cho tất cả Menu item mà bạn muốn sử dụng hình ảnh.

Bạn có thể xem ví dụ tại website http://embietdoc.com/.

Vui lòng để nguồn Thủ thuật Website khi đăng tải lại bài viết này.

+ There are no comments

Add yours

*