Hướng dẫn cách tạo nút Back to Top trong giao diện Genesis đơn giản – Tính năng Back to Top hay còn được gọi là quay lên đầu trang được sử dụng để tạo thuận lợi cho độc giả nếu họ muốn cuộn trang lên phía trên đầu trang Web. Đây là chức năng rất hữu ích, cung cấp trải nghiệm người dùng tích cực với blog hoặc website của bạn. Nó giúp độc giả đơn giản hơn với các thao tác di chuyển thay vì phải sử dụng liên tục các thao tác để di chuyển thì chỉ cần thực hiện thao tác kích chuột là độc giả có thể quay lên đầu trang nhanh chóng.
Thực hiện 3 bước sau đây để tích hợp Back to Top vào giao diện Genesis
Đầu tiên bạn hãy truy cập vào tài khoản hosting và tạo một tập tin với tên là “scroll.js”, hãy tạo tập tin này trong thư mục JS của giao diện con đang sử dụng (…/public_html/wp-content/themes/<your_child_theme>/ js/scroll.js), sau đó hãy sao chép toàn bộ đoạn mã bên dưới và dán vào tập tin “scroll.js”.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
// ===== Back to Top Button ====
jQuery(document).ready(function($){
//grab the “back to top” link
$back_to_top = $(‘.topButton’);
$(window).scroll(function(){
if ($(this).scrollTop() >= 100) { // If page is scrolled to bottom less than 50px
$(‘.topButton’).fadeIn(200); // Fade in the arrow
} else {
$(‘.topButton’).fadeOut(200); // Else fade out the arrow
}
});
$back_to_top.on(‘click’, function(event){ // When arrow is clicked
event.preventDefault();
$(‘body,html’).animate({
scrollTop : // Scroll to top of body
}, 500);
});
});
|
Sau khi tạo được tập tin “scroll.js”, tiếp tục hãy sao chép đoạn mã bên dưới và dán vào trong tập tin Functions.php của giao diện con đang sử dụng (dán ở cuối tập tin Functions.php).
|
1
2
3
4
5
6
7
8
9
10
|
//* Enqueue Back to Top Button script
add_action( ‘wp_enqueue_scripts’, ‘back_to_top_script’ );
function back_to_top_script() {
wp_enqueue_script( ‘scroll’, get_stylesheet_directory_uri() . ‘/js/scroll.js’, array( ‘jquery’ ), ”, true );
}
// Add To Top button
add_action( ‘genesis_before’, ‘genesis_to_top’);
function genesis_to_top() {
echo ‘<a href=”#” class=”topButton”>↑</a>’;
}
|
Tùy biến nút Back to Top
Như vậy là bạn đã tạo được nút Back to Top rồi đấy, tuy nhiên còn rất xấu vì thế bạn hãy sao chép đoạn mã bên dưới và dán vào cuối tập tin “style.css” của giao diện con đang sử dụng là xong.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
/* # Back to Top Button ————– */
.topButton{
display:inline–block;
height:60px;
width:60px;
position:fixed;
bottom:40px;
right:10px;
padding–top: 20px;
background–color: #8dc746;
color: #fff;
opacity:0.6;
text–decoration: none;
text–align: center;
}
.topButton:hover{
opacity:1;
color: #fff;
transition:1s;
}
|
Sau đó hãy lưu lại và xóa Cache, ra ngoài trang chủ và tận hưởng thành quả.
Topics #THu thuat wordpress