Tạo nút Back To Top trong WordPress


Đôi khi các bạn vào một trang web, thấy các bài viết có nội dung tương đối dài. Và lúc đó, các bạn muốn trở về đầu trang ngay lập tức để xem các chuyên mục khác với một hình thức nào đó thật nhanh chóng và dễ dàng. Hôm nay, Thiết kế Website WordPress sẽ hướng dẫn các tạo nút Back To Stop (nút trở về đầu trang) cho Blog WordPress với các bước đơn giản, khi độc giả đọc bài viết họ chỉ cần click vào nút đó thì sẽ được di chuyển lên trên đầu trang ngay lập tức. Chúng ta cùng bắt đầu nhé!

Tạo nút back to top wordpress

Tạo nút back to top wordpress

Đầu tiên, bạn  thêm đoạn code sau vào file footer.php trong theme mà bạn đang sử dụng

<a href="#" id="scrolltotop" title="Di chuyển lên trên"></a>

Đối với các bạn sử dụng Genesis child themes đã có sẵn dòng chữ Back To Top ở bên dưới footer, bạn có thể chỉnh sửa nó bằng cách thêm code sau vào file functions.php

add_filter('genesis_footer_backtotop_text','raynoblog_backtop');
function raynoblog_backtop() {
    $backtotop = '<a href="#wrap" rel="nofollow">""</a>';
    return '<a href="#" id="scrolltotop" title="Di chuyển lên trên"></a>';
}

Tiếp đến ta sẽ thêm một số code css vào file style.css trong theme

#scrolltotop {
    height: 40px;
    width: 40px;
    position:fixed;
    bottom:50px;
    right:10px;
    text-indent:-9999px;
    display:none;
    background: url(images/top.png) no-repeat;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s; transition-duration: 0.4s;
}

Khi đó, bạn phải chuẫn bị một ảnh cho nút Back To Top có kích thước 40x40px với tên là top.png và đặt vào folder images trong theme của bạn.

Tiếp theo là tạo một file JavaScript tên là scrolltotop.js với nội dung như sau:

// JavaScript Document
jQuery(document).ready(function($){
    $(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
            $('#scrolltotop') .fadeOut();
        } else {
            $('#scrolltotop') .fadeIn();
        }
    });
    $('#scrolltotop').on('click', function(){
        $('html, body').animate({scrollTop:0}, 'fast');
        return false;
        });
});

Sau đó lưu file này vào folder js trong theme của bạn. Đoạn jQuery trên sẽ giúp hiển thị nút croll to top khi bạn cuộn trang xuống phía dưới. Nhưng để đoạn jQuery trên hoạt động, bạn phải thêm một đoạn code sau vào file functions.php trong theme

add_action( 'wp_enqueue_scripts', 'scroll_top' );
function scroll_top () {
 wp_enqueue_script( 'scrolltotop', get_stylesheet_directory_uri() . '/scrolltotop.js', array( 'jquery' ) );
}

Bây giờ bạn có thể nhấn F5 để xem lại kết quả

Vậy là Thiết kế Website đã hướng dẫn xong các bạn , hi vọng qua bài viết này các bạn sẽ tạo được cho mình một nút Back To Top thật là đẹp và làm cho blog, website của các bạn trở nên phong phú, đa dạng,  thu hút được nhiều độc giả hơn.

Chúc các bạn thành công!