Hotline : 0908.103.092

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!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

CHÚNG TÔI MANG ĐẾN
WEBSITE WORDPRESS CHUYÊN NGHIỆP
VỚI ĐẦY ĐỦ TÍNH NĂNG ƯU VIỆT
ZoomWorld giới thiệu tới khách hàng dịch vụ thiết kế website bán hàng chuyên nghiệp với tính sẵn sàng luôn đáp ứng yêu cầu của khách hàng mọi lúc mọi nơi một cách nhanh chóng nhất kết hợp với tính tùy biến cao có khả năng thay đổi website phù hợp theo từng hoàn cảnh của Doanh nghiệp bạn.
thiet ke website wordpress
0908 103 092