Categories Wordpress

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

FacebookTwitterRedditPinterest

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 bạn thêm nó vào 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 thêm nút Back to top vào 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 code không hãy liên hệ với mình để mình kiểm tra giúp nhé. Chúc bạn thành công!

Tham gia group hỗ trợ.

Mình vừa tạo một group hỗ trợ Freelancer nói riêng và MMO nói chung. Hoan nghênh mọi người tham gia để trao đổi và học hỏi kiến thức nhé.

Tham gia Group ngay

FacebookTwitterRedditPinterest
Phùng Thắng
Mình bắt đầu kiếm tiền online toàn thời gian từ 2012. Thích chia sẻ những điều mình biết. Để lại bình luận để trao đổi kiến thức với mình nhé. Hy vọng học thêm nhiều thứ từ mọi người.
Nhận thông báo qua Email
Thông báo về
guest
0 Comments
Inline Feedbacks
Xem tất cả bình luận
8
0
Hãy để lại bình luận hoặc câu hỏi nhé!x
()
x