[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
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ù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.
|
1 |
<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.
|
1 2 3 4 5 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#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).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 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).
|
1 2 3 4 |
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!
Cách hiển thị Slide Logo của các đối tác trên WordPress đơn giản
[Tin tài trợ] Những thủ thuật hay ho khi thiết kế website
Cách chèn quảng cáo chuyên nghiệp cho WordPress
Để duy trì hoạt động của Blog rất mong các bạn có thể đóng góp
Xin cảm ơn!