Tạo nút trở về đầu trang cho WordPress

Tạo nút trở về đầu trang cho WordPress không cần phải sử dụng bất kỳ một Plugin nào cả. Bạn chỉ cần làm theo hướng dẫn được chia sẻ trong bài viết này là đã có thể thêm dễ dàng nút Back to top cho Website WordPress mà bạn đang sử dụng rồi.

Tạo nút trở về đầu trang cho wordpress

Nếu như theme bạn đang sử dụng không được tác giả thêm nút trở về đầu trang và bạn muốn thêm nút này vào theme nhưng lại không muốn sử dụng plugin. Thì bài viết này mình sẽ hướng dẫn bạn cách tạo nút trở về đầu trang cho WordPress mà không cần dùng plugin. Như bạn thấy thì hiện mình cũng đang sử dụng đoạn code bên dưới để thêm nút trở về đầu trang cho This PC Blog, bạn có thể xem demo trực tiếp trên Blog nhé.

Tạo nút trở về đầu trang cho WordPress

Đầu tiên, bạn cần thêm đoạn sau vào file footer.php của theme mà bạn đang sử dụng. Nhớ thêm trước thẻ đóng body nhé.

<!-- Scroll back to top -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="backtotop"> 
<a href="javascript:void(0)" class="backtotop"></a> 
</div>                 
<script type="text/javascript"> 
$(function () { 
    $("#backtotop").hide(); 
    $(window).scroll(function () { 
        if ($(this).scrollTop() > 500) { 
            $('#backtotop').fadeIn(); 
        } else { 
            $('#backtotop').fadeOut(); 
        } 
    }); 
}); 
jQuery('.backtotop').click(function () { 
    jQuery('html, body').animate({ 
        scrollTop: 0 
    }, 'slow'); 
}); 
</script>
<!-- End of Scroll back to top --> 

Sau đó bạn thêm đoạn css sau vào file style.css. Khuyến khích bạn nên dùng Plugin TJ Custom CSS để tiện thêm hoặc xóa css cho theme.

#backtotop { 
        bottom: 7px; 
        display: none; 
        margin: 0 20px 20px 0; 
        position: fixed; 
        right: 0; 
        z-index: 2; 
} 
#backtotop a { 
        background: url("http://i.imgur.com/zODWZlw.png") no-repeat scroll 50% 50% rgba(0, 0, 0, 0.5); 
        border: 0 none; 
        display: block; 
        height: 40px; 
        text-decoration: none; 
        transition: all 0.1s ease-in-out 0s; 
        width: 40px; 
} 
#backtotop a:hover { 
        -webkit-box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.5); 
        box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.5); 
        background-color: red; 
}  

Như vậy ở bài viết trên mình đã hướng dẫn bạn cách tạo nút trở về đầu trang cho wordpress mà không cần sử dụng đến bất kỳ plugin nào rồi đó. Hy vọng bài viết này sẽ có ích cho bạn. Chúc bạn thành công!

Tạo nút trở về đầu trang cho WordPress 5.00/5 (1 vote)
Dorin

Done Is Better Than Perfect.

View more articles Subscribe

Leave a Reply

Hãy là người bình luận đầu tiên!

Thông báo khi
avatar
wpDiscuz
menu
menu