Blog thủ thuật tin học và kiếm tiền

  • Vlogs
  • Về tôi
    • Cộng tác viên
    • About
    • Private
    • Term
    • Donate
  • Máy tính
    • Lỗi Windows
    • Mẹo Windows
    • Tip Windows
  • WordPress
    • Sử dụng Plugin
    • Theme miễn phí
    • Mẹo vặt hay
    • Tip WordPress
  • Văn phòng
    • Thủ thuật Word
    • Thủ thuật Excel
    • Hỗ trợ Office
  • Bảo mật
    • Bảo mật Win
    • Tip bảo mật
  • Mã coupon
You are here: Home / Thủ thuật / Thủ thuật Web / Cách tạo nút quay về đầu trang bằng code trong Wordpress

Cách tạo nút quay về đầu trang bằng code trong WordPress

19/12/2014

Chọn để xem

  • Tạo nút quay về đầu trang bằng code trong WordPress
  • Tùy chỉnh code
  • Tùy chỉnh CSS
  • Tùy chỉnh hình ảnh
  • Tùy chỉnh Javascript

[Thủ thuật WordPress] Hướng dẫn cách tạo nút quay về đầu trang bằng code trong WordPress – Bạn có đang sử dụng WordPress để viết blog hay không? những bài viết của bạn tương đối dài và rất hữu ích cho người đọc nhưng khi đọc xong một bài viết rất là dài người dùng muốn quay lên đầu trang thì họ phải cuộn chuột hoặc kích vô thanh trượt của trình duyệt rất là bất tiện đúng không vậy sao bạn không thiết kế một cái nút kèm theo bên hông của các bài viết và khi người dùng kích chọn nút này thì tự động nó quay về đầu trang thật là tiện dụng phải không nào?

Trong bài viết trước đây về thủ thuật WordPress mình có hướng dẫn các bạn cách tạo nút quay lên đầu trang chuyên nghiệp cho wordpress bằng cách sử dụng Plugin giúp bạn có thể nhanh chóng tạo nút quay về đầu trang nhanh chóng tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách tạo nút quay về đầu trang bằng code trong WordPress.

tạo nút quay về đầu trang bằng code trong WordPress

Tạo nút quay về đầu trang bằng code trong WordPress

Tạo nút quay về đầu trang bằng code trong WordPress

Việc sử dụng quá nhiều Plugin sẽ khiến cho trang Web của bạn trở nên chậm chạp và dễ bị tấn công hơn bởi lẽ các Plugin luôn tìm ẩn những nguy cơ khó lường vì thế việc sử dụng code để tùy chỉnh mã nguồn là một phương pháp khá tối ưu cho trang Web hãy cùng blog thủ thuật tìm hiểu cách tạo nút quay về đầu trang bằng code trong WordPress.

Tùy chỉnh code

Đầu tiên đối với các bạn sử dụng giao diện không phải là giao diện “Genesis child theme” thì bạn thêm đoạn code sau vào file footer.php trong theme của bạn.

<a href="#" id="scrolltotop" title="Lên trên"></a>

Đối với những ai đang sử dụng giao diện “Genesis child theme” thì nó đã có sẵn “Back to top” ở bên dưới file footer.php rồi, và bạn có thể chỉnh sửa nó bằng cách thêm đoạn mã sau vào file Functions.php là được.

add_filter('genesis_footer_backtotop_text','it60s.org_backtop');
function raynoblog_backtop() {
    $backtotop = '<a href="#wrap" rel="nofollow">""</a>';
    return '<a href="#" id="scrolltotop" title="Lên trên"></a>';
}

Tùy chỉnh CSS

Bây giờ bạn sẽ làm nổi bật các nút này bằng cách tùy chỉnh file CSS của giao diện bằng cách sao chép đoạn mã sau dán vào file CSS của theme thường là style.css.

#scrolltotop { 
    height: 50px; 
    width: 50px; 
    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; 
}

Tùy chỉnh hình ảnh

Tiếp theo bạn chuẩn bị 1 file ảnh có kích thước theo tùy chọn ở phần code bạn dán vào “Style.CSS” bên trên nếu phần height: 50px; width: 50px; thì hình ảnh bạn chọn phải có độ dài và rộng là 50×50 sau đó bạn bỏ vào thư mục images của theme (với đoạn code css trên thì file hình ảnh của bạn có tên là top.png, bạn có thể vào google và tìm kiếm bên mục hình ảnh với tên là: top back … tùy chỉnh cho phù hợp với trang Web của mình).

Tùy chỉnh Javascript

Tiếp tục bạn tạo một file JavaScript tên là scrolltotop.js với nội dung như bên dưới (để tạo file này bạn có thể copy đoạn code sau và dán vào file notepad sau đó bạn lưu với tùy chọn là ALL File và đặt tên file là scrolltotop.js).

// 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 đó bạn upload file trên vào trong thư mục JS của theme mà bạn đang sử dụng (bạn có thể sử dụng phần mềm Cute FTP, FileZilla … Nhưng để nút này hoạt động bạn cần thêm đoạn code sau vào file Functions.php của giao diện đang sử dụng).

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

Và sau đó bạn ra trang chủ và Refresh lại, quá đơn giản để bạn có thể tạo nút quay về đầu trang bằng code trong WordPress phải không?

Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!

Đánh giá trung bình / 5. Số phiếu:

9 Comments · Thủ thuật Web

9
bình luận. Để lại câu hỏi & nhận trả lời nhanh qua email.

avatar
Nhập địa chỉ trang Web của bạn nếu có. Bạn có thể để trống!
3 Comment threads
6 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
VinhThuần Te TuaNguyễn Hữu Thuần Recent comment authors
avatar
Nhập địa chỉ trang Web của bạn nếu có. Bạn có thể để trống!
newest oldest most voted
Vinh
Guest
Vinh

Mình đã vô hiệu các Script liên hệ và số điện thoại nhưng vẫn không được bạn , không thấy cái nút quay về đầu trang đâu hết ạ

Vote Up0Vote Down  Reply
24/08/2018 1:44 chiều
Hữu Thuần
Author
Hữu Thuần

Chắc theme của bạn không tương thích với các mã lệnh này rồi! bạn thử sử dụng một số Plugin xem sao!

Vote Up0Vote Down  Reply
28/08/2018 3:53 chiều
Vinh
Guest
Vinh

Trên giao điện máy tính thì hiển thị tốt và sử dung rất ok . Tuy nhiên trên giao diện diện thoại lại không hiển thị nút quay về đầu trang , vậy làm sao để nó hiển thị trên cả điện thoại

Vote Up0Vote Down  Reply
20/08/2018 10:50 sáng
Hữu Thuần
Author
Hữu Thuần

Bạn đang sử dụng giao diện gì? mình đang áp dụng cách này cho theme mình đang sử dụng đấy bạn!

Vote Up0Vote Down  Reply
20/08/2018 3:42 chiều
Vinh
Guest
Vinh

mình dùng giao diện flatsome , nó có sẵn nút quay về đầu trang , tuy nhiên nó lại không hiển thị trên điên thoại á bạn . Bạn có giải pháp nào không ? ,giúp mình với nhé , cám ơn bạn !

Vote Up0Vote Down  Reply
20/08/2018 4:43 chiều
Hữu Thuần
Author
Hữu Thuần

Bạn vui lòng cho mình xem trang Web của bạn được không?

Vote Up0Vote Down  Reply
21/08/2018 10:01 sáng
Vinh
Guest
Vinh

https://muradbeauty.com/ đây bác ơi , bác xem giúp em thử

Vote Up0Vote Down  Reply
21/08/2018 10:03 sáng
Hữu Thuần
Author
Hữu Thuần

Bạn thử vô hiệu các Script liên hệ và số điện thoại xem sao? mình nghĩ chắc nó bị sung đột Script!

Vote Up0Vote Down  Reply
21/08/2018 10:42 sáng
Nguyễn Hữu Thuần
Guest
Nguyễn Hữu Thuần

Bạn đã sử dụng nó chưa?

Vote Up0Vote Down  Reply
19/12/2014 11:22 sáng

Gõ để tìm kiếm

Ads Google

VPS nên dùng

Bình luận mới nhất

  • Hữu Thuần trong Mgid mạng quảng cáo ngữ cảnh kẻ thay thế Google Adsense?
  • Hữu Thuần trong Nhận ngay 700K khi liên kết ví MMO với tài khoản ngân hàng
  • Minh Khanh trong Nhận ngay 700K khi liên kết ví MMO với tài khoản ngân hàng
  • vanhien trong Mgid mạng quảng cáo ngữ cảnh kẻ thay thế Google Adsense?
  • Có cần thiết đăng ký thẻ Payoneer hay không? trong Cách đăng ký tài khoản Payoneer nhận 25$ miễn phí

ADS Google

Liên kết bạn bè

Võ Thanh Điền / Blog Duy Đàm / sharenhanh.com / Sơn Zim / Blog An Quách / Tự Học MMO / Thiết kế website wordpress / Kiếm Tiền Chuần / Kiếm tiền Speed

Dự án đang làm !

My Tips PC/NHT Vlogs /Seo Website 1$

Copyright © 2014–2019 · Design by huuthuan.net · WordPress · Log in

wpDiscuz