Bài viết liên quan
Chúng ta cùng trở lại chủ đề tạo nút Back to Top cho WordPress. Nếu bạn nào còn nhớ, trước đây tôi đã từng viết bài tạo nút Back to Top cho Genesis Child Theme, và hôm nay lại có bạn hỏi tôi các theme khác thì phải code như thế nào. Đây chính là lí do để cho tôi viết bài này.
Vẫn như bài trước, để tạo được một nút Back to Top chúng ta cần phải qua 3 bước:
Tạo file .js để tạo hiệu ứng cuộn trang.Tạo stylesheet cho nút Back to Top.Thêm link vào footer của trang.Nhưng trong bài này, tôi gói gọn nó vào 3 hàm, các bạn không cần phải chỉnh sửa gì nhiều mà chỉ cần thêm đoạn code sau vào file function.php của theme là xong.
add_action( 'wp_footer', 'cswp_back_to_top_script' );function cswp_back_to_top_script() { echo '<script type="text/javascript"> jQuery(document).ready(function($){ $(window).scroll(function () { if ( $(this).scrollTop() > 400 ) $("#totop").fadeIn(); else $("#totop").fadeOut(); }); $("#totop").click(function () { $("body,html").animate({ scrollTop: 0 }, 800 ); return false; }); }); </script>';}add_action( 'wp_head', 'cswp_back_to_top_stylesheet' );function cswp_back_to_top_stylesheet() { echo '<style type="text/css"> #totop {background-image: url(https://chiasewp.r.worldssl.net/wp-content/themes/minimalist-pro/images/back-to-top.png); height: 40px;width: 40px; position: fixed; right: 30px; bottom: 30px; display: none; outline: none; } </style>';}add_action( 'wp_footer', 'add_back_to_top' );function add_back_to_top() { echo '<a id="totop" href="#"></a>';}
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
37
38
39
add_action( 'wp_footer', 'cswp_back_to_top_script' );
function cswp_back_to_top_script() {
echo '<script type="text/javascript">
jQuery(document).ready(function($){
$(window).scroll(function () {
if ( $(this).scrollTop() > 400 )
$("#totop").fadeIn();
else
$("#totop").fadeOut();
});
$("#totop").click(function () {
$("body,html").animate({ scrollTop: 0 }, 800 );
return false;
});
});
</script>';
}
add_action( 'wp_head', 'cswp_back_to_top_stylesheet' );
function cswp_back_to_top_stylesheet() {
echo '<style type="text/css">
#totop {
background-image: url(https://chiasewp.com/wp-content/themes/minimalist-pro/images/back-to-top.png);
height: 40px;
width: 40px;
position: fixed;
right: 30px;
bottom: 30px;
display: none;
outline: none;
}
</style>';
}
add_action( 'wp_footer', 'add_back_to_top' );
function add_back_to_top() {
echo '<a id="totop" href="#"></a>';
}
Các bạn có thể thay hình ảnh của bạn vào thuộc tính background-image bên trên. Tôi đã test thành công trên theme Twenty Seventeen, còn các bạn thì sao, hãy cho tôi biết ở phần comment nhé.
Nguồn: Việt Hùng admin https://chiasewp.com/
Thẻ :
Wordpress
Bình Luận