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.
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.
[sociallocker id=”3985″] http://www.mediafire.com/download/6sidsbeoolyhfew[/sociallocker]
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.
|
1 2 3 4 5 6 7 8 9 10 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
.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!
