Tạo nút Back To Top cho WordPress

Với các website WordPress có bài viết dài, khi người sử dụng muốn trở về đầu trang phải cuộn chuột mất rất nhiều thời gian.

Trong bài viết hôm nay sẻ hướng dẫn mọi người cách tạo nút Back To Top WordPress một cách đơn giản mà nhanh chóng. Thường thì việc thêm nút Back To Top phải mất rất nhiều bước để thực hiện tuy nhiên trong bài viết hôm nay chúng ta chỉ cần thêm đoạn code bên dưới vào file functions.php của theme là được.

Đề vào file functions.php chúng ta có 2 cách 1 là vào thẳng trên Quạn trị Website WordPress và 2 là vào Hosting.

Trong bài viết này chúng ta vào file functions.php trên Quạn trị Website WordPress luôn cho nhanh.
Chúng ta chọn Giao diện –> chọn Sửa –> tìm đến file functions.php. Ở file functions.php chúng ta thêm đoạn code này vào bên dưới là được.

/*top*/
add_action( 'wp_footer', 'cswp_back_to_top_script' );
function cswp_back_to_top_script() {
    echo '<script type="text/javascript">
        jQuery(document).ready(function($){
            $(window).scroll(function () {
                if ( $(this).scrollTop() > 400 )
                    $("#totop").fadeIn();
                else
                    $("#totop").fadeOut();
            });
 
            $("#totop").click(function () {
                $("body,html").animate({ scrollTop: 0 }, 800 );
                return false;
            });
        });
    </script>';
}

add_action( 'wp_head', 'cswp_back_to_top_stylesheet' );
function cswp_back_to_top_stylesheet() {
    echo '<style type="text/css">
        #totop {
			background-image: url(https://gocchiase.net/wp-content/uploads/2019/07/gotop1.png);
            height: 40px;
			width: 40px;
            position: fixed;
            right: 30px;
            bottom: 30px;
            display: none;
            outline: none;
        }
    </style>';
}

add_action( 'wp_footer', 'add_back_to_top' );
function add_back_to_top() {
    echo '<a id="totop" href="#"></a>';
}

Thế là xong, bây giờ chúng ta xem sự hoạt động của nút Back To Top.

Lưu ý: Chúng ta thay đường dẫn https://gocchiase.net/wp-content/uploads/2019/07/gotop1.png icon nút top bằng hình ảnh của chúng ta.
Việc tạo nút Back To Top trong website WordPress có rất nhiều cách trong đó chúng ta có thể sử dụng Plugin cũng có được.

Lời kết:
Như vậy là chúng ta đã tạo được nút Back To Top trong WordPress. Với nút Back To Top chúng ta có thể trở về đầu trang một cách nhanh nhất mà không phải kéo chuột nữa.
Chúc các bạn thành công.