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

[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.

Đố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.

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.

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).

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).

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!

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
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
newest oldest most voted
Vinh
Guest

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 ạ

Vinh
Guest

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

Nguyễn Hữu Thuần
Guest

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