Cách tạo nút back to top trong giao diện Genesis đơn giản

[Thủ thuật WordPress] Hướng dẫn cách tạo nút Back to Top trong giao diện Genesis đơn giản – Tính năng Back to Top hay còn được gọi là quay lên đầu trang được sử dụng để tạo thuận lợi cho độc giả nếu họ muốn cuộn trang lên phía trên đầu trang Web. Đây là chức năng rất hữu ích, cung cấp trải nghiệm người dùng tích cực với blog hoặc website của bạn. Nó giúp độc giả đơn giản hơn với các thao tác di chuyển thay vì phải sử dụng liên tục các thao tác để di chuyển thì chỉ cần thực hiện thao tác kích chuột là độc giả có thể quay lên đầu trang nhanh chóng.

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ùy chỉnh Post Info cho giao diện Genesis chuyên nghiệp giúp bạn có thể dễ dàng tùy biến Post Info cho giao diện Genesis mà không cần phải sử dụng Plugin mà vẫn đảm bảo tính thẩm mĩ và chuyên nghiệp 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 Back to Top trong giao diện Genesis không sử dụng Plugin đơn giản nhất.

tạo nút back to top trong giao diện Genesis đơn giản

Tạo nút back to top trong giao diện Genesis đơn giản

Cách tạo nút Back to Top trong giao diện Genesis

Trong WordPress có rất nhiều Plugin có thể giúp bạn thực hiện việc tích hợp tính năng Back to Top một cách nhanh chóng và đơn giản tuy nhiên nếu bạn cảm thấy Plugin là không cần thiết thì có thể sử dụng phương pháp sau đây để tích hợp tính năng Back to Top cho giao diện Genesis một cách đơn giản và nhanh chóng, hãy cùng blog thủ thuật tìm hiểu cách tạo nút Back to Top trong giao diện Genesis không dùng Plugin.

Thực hiện 3 bước sau đây để tích hợp Back to Top vào giao diện Genesis

Đầu tiên bạn hãy truy cập vào tài khoản hosting và tạo một tập tin với tên là “scroll.js”, hãy tạo tập tin này trong thư mục JS của giao diện con đang sử dụng (…/public_html/wp-content/themes/<your_child_theme>/ js/scroll.js), sau đó hãy sao chép toàn bộ đoạn mã bên dưới và dán vào tập tin “scroll.js”.

Sau khi tạo được tập tin “scroll.js”, tiếp tục hãy sao chép đoạn mã bên dưới và dán vào trong tập tin Functions.php của giao diện con đang sử dụng (dán ở cuối tập tin Functions.php).

Tùy biến nút Back to Top

Như vậy là bạn đã tạo được nút Back to Top rồi đấy, tuy nhiên còn rất xấu vì thế bạn hãy sao chép đoạn mã bên dưới và dán vào cuối tập tin “style.css” của giao diện con đang sử dụng là xong.

Sau đó hãy lưu lại và xóa Cache, ra ngoài trang chủ và tận hưởng thành quả.

Xem video hướng dẫn tạo Back to top cho Genesis

Quá đơn giản để bạn có thể tạo nút Back to Top trong giao diện Genesis 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!

Share

Thuần Te Tua

Chào các bạn mình tên thật là Nguyễn Hữu Thuần là một người nội tâm, thích sống khép kín tuy nhiên có nhiều lúc cũng rất tăng động, trang web huuthuan.net là nơi lưu giữ những kiến thức, kinh nghiệm cũng như góc cuộc sống của mình, nếu bạn thích tôi hãy tìm kiếm tôi trên kênh Youtube hoặc liên hệ với tôi tại đây.

You may also like...

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

avatar
4 Comment threads
5 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
Thuần Te TuaHuyVũ Đức MạnhVũNguyễn Hữu Thuần Recent comment authors
newest oldest most voted
Huy
Guest

cảm ơn anh nhiều ạ, anh cho em hỏi em muốn thêm đếm số view vào phần post info cạnh số comment như nào được k anh Thuần ơi ^^

Thanks anh nhiều lắm

Vũ Đức Mạnh
Guest

Phải áp dụng ngay vào web mới đc! cảm ơn bác thuần vì bài viết chất lượng!

Vũ
Guest

cảm ơn bài viết của anh. Nó rất hữu ích. Nhưng nếu em muốn sử dụng hình ảnh để làm nút back to top thì phải làm thế nào ạ. Em cảm ơn anh

Đặng Quốc Thắng
Guest

Bài viết hay và hữu ích. Cảm ơn bạn !