Chèn social icon vào menu trong WordPress

Như các bạn đã thấy, mình vừa thay đổi theme cho Raynoblog, theme mới vẫn là một childtheme của Genesis. Trong theme này, mình có tích hợp vào menu một số social icon như các bạn có thể thấy. Vậy làm thế nào để chèn icon vào menu? Trong bài viết này mình sẽ hướng dẫn các bạn chèn icon vào thanh menu trong WordPress.

menu-social-icons

Trước tiên, bạn cần chuẩn bị các icon phù hợp, nếu bạn chưa tìm thấy icon vừa ý, bạn có thể sử dụng các icon mà mình đang dùng, tải về bằng link bên dưới. Sau khi tải về, bạn đặt các icon này vào thư mục images trong theme bạn sử dụng.

Tiếp theo ta sẽ sử dụng một đoạn code nhỏ dưới đây chèn vào file functions.php trong theme bạn đang sử dụng.

add_filter('wp_nav_menu_items','add_social_primary_menu', 10, 2); 
function add_social_primary_menu($items, $args) {
if ($args->theme_location == 'primary') { 
    $items .= '<li class="social face"><a href="http://facebook.com/raynoblog.giamgiahosting" target="_blank"></a></li>
			   <li class="social google"><a href="https://plus.google.com/u/0/104385682012314748291" target="_blank"></a></li>
			   <li class="social twitter"><a href="http://twitter.com/raynoblog" target="_blank"></a></li>
			   <li class="social feed"><a href="http://feeds.feedburner.com/raynoblog" target="_blank"></a></li>'; 
  }
  return $items;
 }

Bạn nhớ sửa các link trong code trên thành link của bạn. Đoạn code trên có tác dụng chèn vào thanh primary menu một số item . Bạn cũng có thể bổ sung thêm nhìu item khác nếu muốn.

Tiếp theo, mở file style.css và thêm vào một số lớp CSS dưới đây để hiển thị các icon ra bên ngoài.

.social{
	width: 20px;
	height: 20px;
	padding: 0px;
	float: right !important;
	margin: 10px;
}
.social a, .social a:hover{
	width: 20px;
	height: 20px;
	padding: 0px !important;
}
.face a{
	background: url(images/face.png);
}
.face a:hover {
	background: url(images/face-hover.png);
}
.google a{
	background: url(images/google.png);
}
.google a:hover {
	background: url(images/google-hover.png);
}
.twitter a{
	background: url(images/twitter.png);
}
.twitter a:hover {
	background: url(images/twitter-hover.png);
}
.feed a{
	background: url(images/feed.png);
}
.feed a:hover {
	background: url(images/feed-hover.png);
}

Bạn có thể chỉnh sửa lại các lớp CSS trên cho phù hợp với site của bạn như kích thước, canh lề…

Như vậy là bạn đã hoàn tất thủ thuật, giờ bạn có thể kiểm tra lại xem các icon đã hiện ra chưa nhé. Nếu bạn đang sử dụng theme có hỗ trợ secondary menu như Genesis chẳng hạn, bạn có thể sửa lại đoạn theme_location == ‘primary’ thành theme_location == ‘secondary’ để chèn icon vào secondary menu.

Chúc bạn năm mới nhiều may mắn và thành công!

Đánh giá bài viết này

Chú ý - WordPress Hosting 1$/tháng - miễn phí tên miền

Bạn có biết GoDaddy đang có khuyến mãi WordPress hosting chỉ còn 1$/tháng kèm theo một tên miền .COM .NET .ORG miễn phí. Hãy đăng ký ngay để tiết kiệm chi phí nhất nhé.
Xem ngay

ĐĂNG KÝ NHẬN TIN QUA EMAIL

Nếu thấy bài viết trên blog có ích cho bạn, hãy đăng ký nhận tin qua email để cập nhật bài viết mới nhanh nhất và thỉnh thoảng nhận quà bất ngờ!

Comments

  1. Cho mình hỏi Ad sử dụng Plugin gì để khóa đoạn Code vậy.

Gửi bình luận

Lưu ý: Không sử dụng keyword để thay cho tên của bạn, hãy sử dụng tên thật. Cảm ơn bạn đã tham gia bình luận trên blog!