Tạo nút cuộn trang scroll to top trong genesis

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Tạo nút cuộn trang scroll to top trong genesis

Genesis có sẵn nút back to top nằm ở widget đầu tiên của phần footer, một thành phần được thành lập bởi genesis có sử dụng shortcode nên khá thuận tiện.

Nút back to top tạo bởi filter genesis_footer_backtotop_text . Thêm vào functions.php genesis child theme đoạn code sau để kích hoạt tính năng back to top:

 add_filter('genesis_footer_backtotop_text', 'custom_footer_backtotop_text'); function custom_footer_backtotop_text($backtotop){ $backtotop = '[footer_backtotop text="Top"]'; return $backtotop; }  

Tham số $backtotop được truyền vào hàm là nội dung mặc định của nút. Nội dung đây là shortcode cấu tạo tính năng nút mặc định sẽ là [ footer_backtotop ] với nhãn “ Return to top of page “, bạn có thể tùy biến tính năng sử dụng của shortcode này như ở trên. Sử dụng tính chất text nếu muốn thêm nhãn cho nút back to top [ footer_backtotop text="Lên đầu trang" ] .

Trong trang mình để dấu cách trong shortcode vì sẽ hiển thị nguyên mã shortcode để bạn tiện theo dõi, nếu muốn copy thì nhớ bỏ dấu cách ở đầu và cuối shortcode đi nhé

Tuy nhiên bạn cũng cũng đều có thể tạo riêng cho mình nút back to top thành scroll to top hoặc tạo mới shortcode của nút không sử dụng shortcode mặc định của genesis. Copy đoạn code dưới đây vào functions.php

 add_shortcode('footer_custombacktotop', 'set_footer_custombacktotop'); function set_footer_custombacktotop($atts) { return 'Top'; }  

Sửa lại filter genesis_footer_backtotop_text thay đổi bằng tên shortcode mới tạo ở trên.

 add_filter('genesis_footer_backtotop_text', 'custom_footer_backtotop_text'); function custom_footer_backtotop_text($backtotop){ $backtotop='[footer_custombacktotop]'; return $backtotop; }  

Scroll to stop

Genesis không bổ trợ tính năng scroll to top, tức là lúc bạn ấn vào nút trang sẽ nhảy lên đầu trang 1 cách đột ngột chứ không chạy thanh cuộn từ từ. Để thêm tính năng này chúng ta cần sử dụng thêm jquery. Đoạn js sau được thêm nữa cuối thẻ body bằng cách dùng action hook wp_footer . Chép tiếp đoạn code này vào functions.php

        

Sử dụng plugin jquery Smooth scroll

Nếu không thích sử dụng tính năng back to top sẵn có này, bạn cũng có thể có thể loại bỏ nó rời khỏi genesis framework và tạo mới nút scroll to top cho website bằng wordpress plugin.

 add_filter('genesis_footer_backtotop_text', 'custom_footer_backtotop_text'); function custom_footer_backtotop_text($backtotop){ return ''; }  

Hoặc xóa nó đi:

 remove_filter('genesis_footer_backtotop_text','sp_footer_backtotop_text');  

Xem cách thêm nút scroll to top cho wordpress sử dụng jquery Smooth scroll tại đây.

Để thu được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng cũng có thể có thể nhận được sự trợ giúp trên Twitter và Facebook

Bài viết Tạo nút cuộn trang scroll to top trong genesis được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang