Trải nghiệm người dùng là một phần hết sức quan trọng nhưng điều này lại thường bị bỏ qua. Nó ảnh hưởng tới rất nhiều thứ hạng của trang web của bạn trên bộ máy tìm kiếm.
Một tính năng nhỏ nhưng không thể thiếu đối với mỗi trang web đó chính là nút “back to top”. Back to top giúp người đó dễ dàng hơn trong việc trải nghiệm trang web của bạn. Chính vì vậy, hôm nay, mình sẽ giúp các bạn tạo nút Back to top cho Genesis Child Theme.
Đầu tiên, các bạn thêm đoạn code sau vào file functions.php của child theme.
// Add Back to top buttonadd_action( 'wp_enqueue_scripts', 'cswp_to_top_script' );function cswp_to_top_script() { wp_enqueue_script( 'to-top', get_stylesheet_directory_uri() . '/js/to-top.js', array( 'jquery' ), '1.0', true );}add_action( 'genesis_before', 'cswp_genesis_to_top');function cswp_genesis_to_top() { echo '<a href="#0" class="to-top" title="Back To Top">Top</a>';}
// Add Back to top button
add_action( 'wp_enqueue_scripts', 'cswp_to_top_script' );
function cswp_to_top_script() {
wp_enqueue_script( 'to-top', get_stylesheet_directory_uri() . '/js/to-top.js', array( 'jquery' ), '1.0', true );
}
add_action( 'genesis_before', 'cswp_genesis_to_top');
function cswp_genesis_to_top() {
echo '<a href="#0" class="to-top" title="Back To Top">Top</a>';
}
Sau đó thêm đoạn code sau vào file style.css của theme để tạo css cho nút Back to top.
/*Back to top---------------------------------------------------------------------------------------------------- */.to-top {display:inline-block;height:40px;width:40px;position:fixed;bottom:40px;right:10px;box-shadow:0 0 10px rgba(0,0,0,0.05);overflow:hidden;text-indent:100%;white-space:nowrap;background:rgba(232,98,86,0.8) url(images/back-to-top.png) no-repeat center 50%;visibility:hidden;opacity:0;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;}.to-top.top-is-visible {visibility:visible;opacity:1;}.to-top.top-fade-out {opacity:.5;}.no-touch .to-top:hover {background-color:#e86256;opacity:1;}@media only screen and (min-width: 768px) {.to-top {right:20px;bottom:20px;}}@media only screen and (min-width: 1024px) {.to-top {right:30px;bottom:30px;}}
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
40
41
42
43
44
45
46
47
48
49
/*
Back to top
---------------------------------------------------------------------------------------------------- */
.to-top {
display:inline-block;
height:40px;
width:40px;
position:fixed;
bottom:40px;
right:10px;
box-shadow:0 0 10px rgba(0,0,0,0.05);
overflow:hidden;
text-indent:100%;
white-space:nowrap;
background:rgba(232,98,86,0.8) url(images/back-to-top.png) no-repeat center 50%;
visibility:hidden;
opacity:0;
-webkit-transition:all .3s;
-moz-transition:all .3s;
transition:all .3s;
}
.to-top.top-is-visible {
visibility:visible;
opacity:1;
}
.to-top.top-fade-out {
opacity:.5;
}
.no-touch .to-top:hover {
background-color:#e86256;
opacity:1;
}
@media only screen and (min-width: 768px) {
.to-top {
right:20px;
bottom:20px;
}
}
@media only screen and (min-width: 1024px) {
.to-top {
right:30px;
bottom:30px;
}
}
Tiếp tục, các bạn tạo một file to-top.js, đặt vào trong thư mục js của theme. Trong file to-top.js, các bạn paste đoạn code sau vào.
jQuery(document).ready(function(o){var t=100,l=1200,s=700,i=o(".to-top");o(window).scroll(function(){o(this).scrollTop()>t?i.addClass("top-is-visible"):i.removeClass("top-is-visible top-fade-out"),o(this).scrollTop()>l&&i.addClass("top-fade-out")}),i.on("click",function(t){t.preventDefault(),o("body,html").animate({scrollTop:0},s)})});
jQuery(document).ready(function(o){var t=100,l=1200,s=700,i=o(".to-top");o(window).scroll(function(){o(this).scrollTop()>t?i.addClass("top-is-visible"):i.removeClass("top-is-visible top-fade-out"),o(this).scrollTop()>l&&i.addClass("top-fade-out")}),i.on("click",function(t){t.preventDefault(),o("body,html").animate({scrollTop:0},s)})});
Tất nhiên, bạn cũng cần một file ảnh back-to-top.png, đặt vào thư mục images của theme, các bạn có thể lấy ảnh của Chia sẻ WP tại đây, hoặc tạo cho mình một ảnh mới mang phong cách riêng. 😛
Và cuối cùng là F5 và tận hưởng thành quả nào. Chúc các bạn thành công. 🙂
Nguồn: Việt Hùng admin https://chiasewp.com/ 
Bình Luận