Cách tạo nút back to top trong giao diện Genesis đơn giản

[Thủ thuật WordPress] 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.

Trong bài viết trước đây về thủ thuật WordPress mình có hướng dẫn các bạn cách tùy chỉnh Post Info cho giao diện Genesis chuyên nghiệp giúp bạn có thể dễ dàng tùy biến Post Info cho giao diện Genesis mà không cần phải sử dụng Plugin mà vẫn đảm bảo tính thẩm mĩ và chuyên nghiệp tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách tạo nút Back to Top trong giao diện Genesis không sử dụng Plugin đơn giản nhất.

Cách tạo nút Back to Top trong giao diện Genesis

Trong WordPress có rất nhiều Plugin có thể giúp bạn thực hiện việc tích hợp tính năng Back to Top một cách nhanh chóng và đơn giản tuy nhiên nếu bạn cảm thấy Plugin là không cần thiết thì có thể sử dụng phương pháp sau đây để tích hợp tính năng Back to Top cho giao diện Genesis một cách đơn giản và nhanh chóng, hãy cùng blog thủ thuật tìm hiểu cách tạo nút Back to Top trong giao diện Genesis không dùng Plugin.

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”.

// ===== 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 : 0                       // 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).

//* 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">&uarr;</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.

/* # 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ả.

Xem video hướng dẫn tạo Back to top cho Genesis

Quá đơn giản để bạn có thể tạo nút Back to Top trong giao diện Genesis phải không?

Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!