TẠO NÚT BACK TO TOP CHO WEBSITE

  -  

Trải nghiêm người tiêu dùng (UX) của trang web rất quan trọng đối với khách hàng truy cập. Đặc biệt là lúc trang WordPress của bạn có khá nhiều nội dung dài, các bạn sẽ muốn thêm nút back to đứng top vào website để khách truy vấn không cảm thấy “ngán” vì đề nghị dùng con lăn loài chuột để trở về đầu trang.

Bạn đang xem: Tạo nút back to top cho website

Các báo cáo người dùng gần đây cho thấy, phần lớn khách truy cập sẽ không dùng lăn chuột để “lăn” về đầu trang nhưng mà sẽ bấm nút “Back” ngơi nghỉ trên thanh địa chỉ để truy vấn website không giống trong Google Search. Cùng điều đó chắc hẳn rằng sẽ tạo cho tỉ lệ bounce rate của trang web cao lên. Chúng ta đâu muốn điều đó xảy ra với trang WordPress của chúng ta đúng không?

Mà cách giải quyết thì cũng tương đối đơn giản, bạn chỉ cần tạo nút back lớn top mang đến trang WordPress là xong. Nó giống hệt như thế này.


Bài viết này vẫn hướng dẫn chúng ta cách thêm nút về bên đầu trang mang đến WordPress mà lại không phải dùng bất kể plugin nào. Toàn bộ những gì bạn phải làm là copy paste code.

Lưu ý

Trước khi thêm code để sản xuất nút back to top mang lại WordPress, chúng ta nên tạo child theme để không bị mất code đã chế tạo phòng trường vừa lòng theme chính của người tiêu dùng cập nhật. Nếu bạn không biết cách tạo child theme cho WordPress thì nên đọc nội dung bài viết này.


Bước 1: Tạo thư mục js vào root thư mục của child theme (bạn có thể bỏ qua công đoạn này nếu bạn đã có folder js trong child theme)

Folder js là nơi các bạn sẽ thêm kỹ năng chính của nút quay trở lại đầu trang bằng script javascript.

Nếu bạn làm theo hướng dẫn chế tạo ra child theme mang đến WordPress của chưng Sĩ SEO, hãy làm lơ bước này và xem tiếp cách 2.

Để tạo folder js trong child theme, bạn chỉ việc đăng nhập vào dịch vụ hosting hoặc sử dụng ứng dụng FTP Client như FileZilla để kết nối với root thư mục của trang WordPress.

Nếu các bạn đã chế tạo child theme đến WordPress theo phong cách thông thường, các bạn sẽ thấy trong child theme tất cả 2 files là style.css cùng functions.php. Đây cũng chính là vị trí mà các bạn sẽ tạo thư mục js mang đến child theme của mình.


*
Tạo folder js trong child theme cùng với file functions.php với style.css

Mặc dù bạn đã tạo thư mục js vào root thư mục của child theme, nếu khách hàng truy cập mục Giao diện >> Sửa giao diện của child theme, bạn sẽ không thấy thư mục này vị hiện thư mục đang rỗng. Để thấy được folder này, bạn phải lập ít nhất một file mang đến nó. Và đó đó là những gì cách 2 đang hướng dẫn các bạn thực hiện.

Bước 2: chế tạo file back-to-top.js trong thư mục js mà chúng ta vừa tạo

Cũng trong phần chỉnh sửa File (File Manager) của thương mại dịch vụ hosting hoặc FTP Client, bạn liên tục tạo một file new trong thư mục js mà các bạn vừa sinh sản và khắc tên file sẽ là back-to-top.js. Đây chính là file các bạn sẽ thêm kỹ năng trở về đầu trang bởi code javascript.


*
Tạo tệp tin back-to-top.js trong thư mục js mà chúng ta vừa tạo

Sau đó, các bạn hãy paste đoạn code dưới đây vào trong tệp tin này. Bạn cũng có thể sử dụng các phần mềm trình chình sửa văn phiên bản (text editor) như Visual Studio Code hoặc Notepad nhằm thêm với lưu code vào tệp tin back-to-top.js.

jQuery(document).ready(function($){ var offset = 100; var speed = 250; var duration = 500; $(window).scroll(function(){ if ($(this).scrollTop()

Bước 3: tạo thành nút back to lớn top bởi file hình hình ảnh hoặc icon

Thông thường xuyên nút quay trở lại đầu trang sẽ có được icon mũi thương hiệu chỉ lên trên. Để khách truy cập website click hay tap được, bạn phải upload hình ảnh hoặc icon tượng trưng đến nút back to lớn top.

Bạn có thể sử dụng các phần mềm chỉnh sửa ảnh như Canva, Photoshop, Illustrator, GIMP,… để tạo thành (vẽ) hình hình ảnh tượng trưng mang lại nút back to đứng top của riêng biệt bạn.

Xem thêm: Các trò chơi slot cổ điển hay nhất bạn không nên bỏ qua

Hoặc nếu như bạn không có thời gian giỏi không xuất sắc thiết kế, chúng ta cũng có thể truy cập vào trang Flaticon với tìm kiếm bởi từ khóa “back to lớn top” để tải về icon cơ mà bạn vừa lòng cho nút quay trở lại đầu trang trong WordPress.

Bác Sĩ SEO sẽ cần sử dụng icon miễn phí tổn này để chế tạo ra nút back to top đến WordPress.


*
Icon back to đứng đầu miễn tổn phí của Flaticon

Bạn rất có thể tải icon bên trên về với định dạng file ảnh PNG (nên lựa chọn 512px để ảnh không bị vỡ khi bị scale lên scale xuống) hoặc file vector SVG và cần sử dụng các ứng dụng vector như Illustrator, Inkscape,… để custom lại icon trên (chọn màu sắc khác, đến dài rộng bé dại hơn,…).

Nếu các bạn tải PNG, chúng ta có thể đọc bài viết này để biết phương pháp giảm dung lượng hình ảnh trước lúc upload ảnh lên Thư viện của WordPress.

Sau khi cài icon về, bạn chỉ việc upload ảnh lên WordPress như bình thường, click vào hình ảnh để copy URL hình ảnh và gửi sang bước 4.


*
Copy URL biểu tượng trở về đầu trang bạn vừa cài lên

Bước 4: tùy chỉnh cấu hình nút back lớn top bởi CSS

Bạn paste đoạn mã CSS sau đây vào mục Tùy biến >> CSS bổ sung cập nhật (Additional CSS) của WordPress. Bạn có thể điều chỉnh height cùng width tùy ý.

/* Style nút back to đứng top */.back-to-top-button height: 75px;width: 75px;position: fixed;right: 5px;bottom: 5px;z-index: 1;background-repeat: no-repeat;display: none;

*

Bước 5: Thêm code vào tệp tin functions.php để sinh sản nút back to top đến WordPress

Bạn paste đoạn code dưới đây vào tệp tin functions.php của child theme để call file back-to-top.js trong footer của WordPress.

Bạn nhớ thay thế đường dẫn URL của icon back to top vào img scr=””.

Đừng quên bấm nút Cập nhật tập tin.

/* chế tạo ra nút trở về đầu trang cho WordPress */function bss_custom_scripts() wp_enqueue_script("back-to-top-script", get_stylesheet_directory_uri() . "/js/back-to-top.js", array( "jquery" ), false, true);add_action("wp_enqueue_scripts", "bss_custom_scripts");function html_bss_back_to_top() { ?>

*
*
Giờ bạn chỉ cần refresh lại trang WordPress và tận thưởng thành quả.


*
Nút back khổng lồ top đang được sinh sản thành công, với animation fade in fade out chuyển động mượt mà.

Xem thêm: 12 Công Cụ Không Thể Bỏ Qua Nếu Bạn Muốn Tạo Website Miễn Phí


BONUS: khiến cho nút back khổng lồ top nhỏ tuổi hơn trên điện thoại cảm ứng di rượu cồn (responsive)

Đây là đoạn code bạn cũng có thể thêm vào Tùy biến >> CSS vấp ngã sung để làm cho nút back to vị trí cao nhất hiển thị nhỏ hơn mang lại phiên bạn dạng mobile (điện thoại di động) của trang WordPress. Chúng ta cũng có thể điều chỉnh height cùng width tùy ý cho cân xứng với trang web.


media screen & (max-width: 768px) .back-to-top-button height: 50px;width: 50px;
Danh mục Không đề nghị plugin,WordPress Thẻ back to đứng top wordpress,cách tạo nên nút back khổng lồ top đến wordpress,hướng dẫn tạo nên nút back to lớn top mang lại wordpress,nút trở về đầu trang wordpressĐiều hướng bài viết
Redirect 301 htaccess: cách thêm redirect 301 bởi code trong file .htaccess của WordPress tự A mang đến Z
2 biện pháp tạo mục lục cho bài viết trong WordPress không phải plugin