Trải nghiêm người dùng (UX) của website rất quan trọng đối với khách truy cập. Đặc biệt là khi trang WordPress của bạn có nhiều nội dung dài, bạn sẽ muốn thêm nút back to top vào website để khách truy cập không cảm thấy “ngán” vì phải dùng con lăn chuột để trở về đầu trang.
Các báo cáo người dùng gần đây cho thấy, đa số khách truy cập sẽ không dùng lăn chuột để “lăn” về đầu trang mà sẽ bấm nút “Back” ở trên thanh địa chỉ để truy cập website khác trong Google Search. Và điều đó chắc chắn sẽ làm cho tỉ lệ bounce rate của trang web cao lên. Bạn đâu muốn điều đó xảy ra với trang WordPress của bạn đúng không?
Mà cách giải quyết thì cũng rất đơn giản, bạn chỉ cần tạo nút back to top cho trang WordPress là xong. Nó giống như thế này.
Bài viết này sẽ hướng dẫn bạn cách thêm nút trở về đầu trang cho WordPress mà không cần dùng bất cứ plugin nào. Tất cả những gì bạn cần làm là copy paste code.
Lưu ý
Trước khi thêm code để tạo nút back to top cho WordPress, bạn nên tạo child theme để không bị mất code đã thêm vào phòng trường hợp theme chính của bạn cập nhật. Nếu bạn không biết cách tạo child theme cho WordPress thì hãy đọc bài viết này.
Bước 1: Tạo folder js trong root folder của child theme (bạn có thể bỏ qua bước này nếu bạn đã có folder js trong child theme)
Folder js là nơi bạn sẽ thêm tính năng chính của nút trở về đầu trang bằng script javascript.
Nếu bạn làm theo hướng dẫn tạo child theme cho WordPress của Bác Sĩ SEO, hãy bỏ qua bước này và xem tiếp bước 2.
Để tạo folder js trong child theme, bạn chỉ cần đăng nhập vào dịch vụ hosting hoặc sử dụng phần mềm FTP Client như FileZilla để kết nối với root folder của trang WordPress.
Nếu bạn đã tạo child theme cho WordPress theo cách thông thường, bạn sẽ thấy trong child theme có 2 files là style.css và functions.php. Đây cũng là vị trí mà bạn sẽ tạo folder js cho child theme của mình.
Mặc dù bạn đã tạo folder js trong root folder của child theme, nếu bạn truy cập mục Giao diện >> Sửa giao diện của child theme, bạn sẽ không thấy folder này vì hiện folder đang rỗng. Để thấy được folder này, bạn phải tạo ít nhất một file cho nó. Và đó chính là những gì bước 2 sẽ hướng dẫn bạn thực hiện.
Bước 2: Tạo file back-to-top.js trong folder js mà bạn vừa tạo
Cũng trong phần chỉnh sửa File (File Manager) của dịch vụ hosting hoặc FTP Client, bạn tiếp tục tạo một file mới trong folder js mà bạn vừa tạo và đặt tên file đó là back-to-top.js. Đây chính là file bạn sẽ thêm tính năng trở về đầu trang bằng code javascript.
Sau đó, bạn hãy paste đoạn code dưới đây vào trong file này. Bạn có thể sử dụng các phần mềm trình chình sửa văn bản (text editor) như Visual Studio Code hoặc Notepad để thêm và lưu code vào file back-to-top.js.
jQuery(document).ready(function($){
var offset = 100;
var speed = 250;
var duration = 500;
$(window).scroll(function(){
if ($(this).scrollTop() < offset) {
$('.back-to-top-button') .fadeOut(duration);
} else {
$('.back-to-top-button') .fadeIn(duration);
}
});
$('.back-to-top-button').on('click', function(){
$('html, body').animate({scrollTop:0}, speed);
return false;
});
});Bước 3: Tạo nút back to top bằng file hình ảnh hoặc icon
Thông thường nút trở về đầu trang sẽ có icon mũi tên 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 cho nút back to 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 (vẽ) hình ảnh tượng trưng cho nút back to top của riêng bạn.
Hoặc nếu bạn không có thời gian hay không giỏi thiết kế, bạn có thể truy cập vào trang Flaticon và tìm kiếm bằng từ khóa “back to top” để tải về icon mà bạn ưng ý cho nút trở về đầu trang trong WordPress.
Bác Sĩ SEO sẽ dùng icon miễn phí này để tạo nút back to top cho WordPress.
Bạn có thể tải icon trên về với định dạng file ảnh PNG (nên chọn 512px để ảnh không bị vỡ khi bị scale lên scale xuống) hoặc file vector SVG và dùng các phần mềm vector như Illustrator, Inkscape,… để custom lại icon trên (chọn màu khác, cho dài rộng nhỏ hơn,…).
Nếu bạn tải PNG, bạn có thể đọc bài viết này để biết cách giảm dung lượng ảnh trước khi upload ảnh lên Thư viện của WordPress.
Sau khi tải icon về, bạn chỉ cần upload ảnh lên WordPress như bình thường, click vào ảnh để copy URL ảnh và chuyển sang bước 4.
Bước 4: Tùy chỉnh nút back to top bằng CSS
Bạn paste đoạn mã CSS dưới đây vào mục Tùy biến >> CSS bổ sung (Additional CSS) của WordPress. Bạn có thể điều chỉnh height và width tùy ý.
/* Style nút back to 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 file functions.php để tạo nút back to top cho WordPress
Bạn paste đoạn code dưới đây vào file functions.php của child theme để gọi 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.
/* Tạo 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() { ?>
<a href="#" class="back-to-top-button"><img src="https://bacsiseo.com/wp-content/uploads/2021/01/icon-back-to-top.png" alt="icon back to top"></a>
<?php }
add_action('wp_footer', 'html_bss_back_to_top');
Giờ bạn chỉ cần refresh lại trang WordPress và tận hưởng thành quả.
BONUS: Làm cho nút back to top nhỏ hơn trên điện thoại di động (responsive)
Đây là đoạn code bạn có thể thêm vào Tùy biến >> CSS bổ sung để làm cho nút back to top hiển thị nhỏ hơn cho phiên bản mobile (điện thoại di động) của trang WordPress. Bạn cũng có thể điều chỉnh height và width tùy ý cho phù hợp với trang web.
@media screen and (max-width: 768px) {
.back-to-top-button {
height: 50px;
width: 50px;
}
}