Cách tạo nút Back to top cho website Wordpress

499

Đối với hầu hết các theme wordpress miễn phí thì sẽ không có các nút back to top, giúp các bạn nhanh chóng quay trở lại đầu trang khi đọc xuống cuối bài viết. Bài viết này sẽ hướng dẫn cách tạo nút back to top cho website đơn giản.

Nút back to top là gì?

Nếu bạn chưa biết nút Back to top là như thế nào thì bạn có thể lượng một vòng trên ở một trang bất kỳ để kiểm tra. Khi bạn kéo xuống để đọc một bài viết nào đó, ở góc dưới bên phải sẽ xuất hiện một nút với biểu tượng mũi tên hướng lên. Khi bạn bấm vào nút đó thì nó sẽ đưa bạn trở về phần đầu trang. Cụ thể, trong website của mình, trông nó như thế này:

Mình thấy một số website sử dụng giao diện cũ chưa có tích hợp tích năng này, chính vì vậy bài viết này mình sẽ giúp các tạo nút back to top cho website wordpress.

Tại sao cần phải thêm nút Back to top vào website?

Hiện nay hầu hết các website có nội dung khá dài, nhất là các trang post ( bài viết cụ thể ) và page ( trang tĩnh). Việc nội dung dài có tác dụng lớn đối với việc SEO, tuy nhiên lại đem lại khó khăn nếu người dùng muốn quay trở lại đầu trang, việc vê chuột hoặc kéo thanh bên của trình duyệt làm mất nhiều thời gian hơn của họ.

Nếu có nút back to top, chỉ với một cú click họ sẽ lập tức quay trở lại đầu trang. Việc sở hữu nút Back to top làm tăng đáng kể trải nghiệm người dùng. Giúp người dùng dễ dàng thao tác trên website của bạn đến nơi họ muốn rất quan trọng. Góp phần làm giảm tỷ lệ thoát trên website của bạn.

Cách tạo nút Back to top cho website Wordpress

Bước 1: Theme html vào website Wordpress

Bạn chèn đoạn code sau vào file functions.php:

if( !function_exists( 'ptt_add_back_to_top' ) ){
    function ptt_add_back_to_top(){
        echo '<button id="back-to-top"><i class="fa fa-long-arrow-up" aria-hidden="true"></i>
</button>';
    }
    add_filter( 'wp_footer', 'ptt_add_back_to_top', 99 );
}

Trong đó: :

<i class="fa fa-long-arrow-up" aria-hidden="true"></i>

Mình sử dụng font Awesome để tạo biểu tượng icon hướng lên trên. Nếu website của bạn chưa cài đặt font awesome thì sẽ nó sẽ không hiện đúng. Để cài đặt font Awesome vào website Wordpress, bạn có thể cài đặt plugin Font Awesome.

Bước 2: Thêm code css để làm đẹp nút.

#back-to-top {
    background: #eee;
    color: #102039;
    position: fixed;
    bottom: 0;
    right: 15px;
    padding: 14px 15px;
    line-height: 1;
    display: none;
}

Nếu bạn không biết thêm đoạn code css ở đâu, bạn có thể sử dụng plugin Header and Footer Scripts để chèn. Tuy nhiên cần thêm một đoạn code để khai báo đoạn code này là css như sau:

<style type="text/css">
      //đoạn code css bên trên
</style>

Bước 3: Thêm code js để làm hiệu ứng chạy lên chậm.

$(window).scroll(function() {
     if($(window).scrollTop() != 0) {
	  $('#back-to-top').fadeIn();
     } else {
	  $('#back-to-top').fadeOut();
     }
});
$('#back-to-top').click(function() {
     $('html, body').animate({scrollTop:0},500);
});

Nếu bạn không biết thêm đoạn code js ở đâu, bạn có thể sử dụng plugin Header and Footer Scripts như bên trên để chèn. Tuy nhiên cần thêm một đoạn code để khai báo đoạn code này là js như sau:

<script type="text/javascript">
      //đoạn code js bên trên
</script>

Vậy là hoàn thành rồi đấy. Nếu tạo nút back to top cho website không thành công hãy để lại bình luận để mình kiểm tra giúp nhé. Chúc bạn thành công!