Kiến thức Hữu ích 😍

Hướng Dẫn Tạo Nút Back To Top Cho WordPress Đơn Giản, Tiêu Hao Thời Gian Ngắn

Kiến thức Wordpress

Bạn đã bao giờ truy cập một trang web có nội dung rất dài, đọc đến cuối và muốn quay lại menu ở đầu trang? Chắc hẳn bạn đã phải dùng ngón tay hoặc chuột để cuộn lên một cách mệt mỏi. Đây là một trải nghiệm khá phổ biến và có thể làm giảm sự hứng thú của người dùng khi duyệt web. Vấn đề nằm ở việc thiếu một công cụ điều hướng tiện lợi, khiến người dùng mất thời gian và công sức không cần thiết chỉ để quay lại vị trí ban đầu.

Giải pháp cho vấn đề này vô cùng đơn giản: nút “Back to Top” (hay còn gọi là nút “Lên đầu trang”). Đây là một biểu tượng nhỏ, thường xuất hiện ở góc dưới màn hình khi người dùng cuộn xuống, giúp họ nhanh chóng trở về đầu trang chỉ bằng một cú nhấp chuột. Việc tích hợp tính năng này không chỉ cải thiện sự thuận tiện mà còn nâng cao đáng kể trải d_nghiệm người dùng (UX), giúp họ điều hướng trang web của bạn một cách dễ dàng và mượt mà hơn. Trong bài viết này, AZWEB sẽ hướng dẫn bạn chi tiết cách sử dụng WordPress để tạo nút back to top cho website WordPress bằng cả code thủ công và plugin.

Hình minh họa

Hướng dẫn tạo nút back to top bằng code thủ công trong WordPress

Đối với những ai yêu thích việc kiểm soát hoàn toàn giao diện và chức năng website của mình, việc tạo nút back to top bằng code là một lựa chọn tuyệt vời. Phương pháp này không cần cài thêm plugin, giúp trang web nhẹ hơn và giảm thiểu nguy cơ xung đột. Dù bạn không phải là một lập trình viên chuyên nghiệp, bạn vẫn có thể thực hiện theo các bước dưới đây một cách dễ dàng. Chúng ta sẽ bắt đầu bằng việc thêm các đoạn mã HTML, CSS và JavaScript cần thiết vào theme WordPress của bạn.

Thêm đoạn HTML và CSS cơ bản cho nút back to top

Đầu tiên, chúng ta cần tạo ra cấu trúc HTML cho nút bấm. Đây là thành phần cơ bản nhất để người dùng có thể nhìn thấy và tương tác. Bạn có thể thêm đoạn mã HTML này vào file footer.php của theme, ngay trước thẻ đóng </body>.

Mã HTML rất đơn giản, chỉ cần một thẻ <a> với một ID hoặc class để chúng ta có thể tạo kiểu và thêm chức năng sau này: <a id="backToTopBtn" title="Go to top">↑</a>

Tiếp theo, chúng ta cần dùng CSS để định vị và tạo kiểu cho nút này. Bạn có thể thêm đoạn mã CSS sau vào file style.css của theme hoặc trong phần “Additional CSS” của trình tùy biến WordPress. Đoạn mã này sẽ giúp nút luôn cố định ở góc dưới bên phải màn hình, có giao diện ưa nhìn và chỉ hiển thị khi cần thiết.

#backToTopBtn {
  display: none; /* Ẩn nút mặc định */
  position: fixed; /* Giữ nút cố định khi cuộn */
  bottom: 20px; /* Cách lề dưới 20px */
  right: 30px; /* Cách lề phải 30px */
  z-index: 99; /* Đảm bảo nút nổi lên trên các thành phần khác */
  border: none;
  outline: none;
  background-color: #555;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
  font-size: 18px;
}
#backToTopBtn:hover {
  background-color: #333; /* Thay đổi màu khi di chuột qua */
}

Đoạn CSS trên không chỉ tạo kiểu cơ bản mà còn đảm bảo nút bấm sẽ tương thích tốt trên nhiều kích thước màn hình khác nhau (responsive). Bạn có thể tìm hiểu thêm về theme WordPress để học cách chỉnh sửa giao diện hiệu quả.

Hình minh họa

Áp dụng JavaScript để xử lý sự kiện cuộn trang

Sau khi đã có cấu trúc HTML và giao diện CSS, chúng ta cần “thổi hồn” cho nút bấm bằng JavaScript. Đoạn mã này sẽ thực hiện hai nhiệm vụ chính: lắng nghe sự kiện cuộn trang để quyết định khi nào nên hiện hoặc ẩn nút, và xử lý hành động cuộn lên đầu trang một cách mượt mà khi người dùng nhấp vào.

Bạn nên thêm đoạn mã JavaScript này vào một file .js riêng và gọi nó trong theme, hoặc thêm trực tiếp vào file footer.php bên trong cặp thẻ <script>.

Đây là đoạn script bạn cần:

// Lấy đối tượng nút
var mybutton = document.getElementById("backToTopBtn");
// Khi người dùng cuộn xuống 20px từ đầu trang, hiển thị nút
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// Khi người dùng nhấp vào nút, cuộn lên đầu trang
mybutton.addEventListener("click", function() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
  // Để có hiệu ứng cuộn mượt mà hơn, bạn có thể dùng code sau:
  // window.scrollTo({top: 0, behavior: 'smooth'});
});

Đoạn mã này rất nhẹ và hiệu quả. Nó sẽ kiểm tra vị trí cuộn của trang. Nếu người dùng cuộn xuống quá 20 pixels, nút sẽ hiện ra. Khi họ nhấp vào, trang sẽ ngay lập tức hoặc từ từ cuộn lên đầu. Bạn có thể bổ sung thêm hiệu ứng mượt bởi plugin như cài đặt plugin hoặc dùng Elementor pro để tạo hiệu ứng phần này nếu muốn.

Sử dụng plugin để thêm nút back to top trên WordPress

Nếu bạn không quen với việc chỉnh sửa code hoặc đơn giản là muốn một giải pháp nhanh chóng và tiện lợi, sử dụng plugin là phương án lý tưởng. Hệ sinh thái WordPress cung cấp rất nhiều plugin giúp bạn thêm nút back to top vào website chỉ trong vài cú nhấp chuột. Phương pháp này không đòi hỏi kiến thức kỹ thuật, dễ cài đặt và đi kèm nhiều tùy chọn cấu hình trực quan.

Giới thiệu các plugin phổ biến và dễ sử dụng

Trên thư viện plugin của WordPress, có hàng trăm lựa chọn khác nhau, nhưng không phải plugin nào cũng tốt. AZWEB gợi ý một vài plugin đã được cộng đồng tin dùng vì tính ổn định, nhẹ và dễ sử dụng:

WPFront Scroll Top: Đây là một trong những plugin phổ biến nhất. Nó cung cấp nhiều tùy chọn để tùy chỉnh nút, từ việc chọn biểu tượng (icon), văn bản, kích thước, màu sắc cho đến cài đặt hiệu ứng cuộn. Bạn cũng có thể thiết lập để nút ẩn trên các thiết bị di động nếu muốn.
To Top: Một plugin tối giản nhưng rất mạnh mẽ. Nó tập trung vào việc thực hiện tốt một chức năng duy nhất. Plugin này rất nhẹ, không làm ảnh hưởng đến tốc độ tải trang và cung cấp các tùy chỉnh giao diện cơ bản nhưng đầy đủ.
Simple Back To Top: Đúng như tên gọi, plugin này mang đến sự đơn giản tối đa. Chỉ cần cài đặt và kích hoạt, bạn đã có ngay một nút back to top hoạt động. Các tùy chọn được thiết kế trực quan, giúp bạn dễ dàng thay đổi màu sắc và vị trí mà không cần xem tài liệu hướng dẫn.

Lợi ích lớn nhất của việc dùng plugin so với code thủ công là sự tiện lợi và an toàn. Bạn không cần lo lắng về việc vô tình làm hỏng theme. Hơn nữa, các plugin uy tín thường xuyên được cập nhật để đảm bảo tương thích với phiên bản WordPress mới nhất. Bạn có thể tìm hiểu thêm thông tin về Jetpack là gì để khám phá các plugin hỗ trợ.

Hình minh họa

Hướng dẫn cài đặt và kích hoạt plugin

Quá trình cài đặt plugin trên WordPress vô cùng đơn giản. Dưới đây là các bước chi tiết để bạn có thể tự thực hiện:

Đăng nhập vào trang quản trị WordPress: Truy cập vào trang Dashboard của bạn (thường là yourdomain.com/wp-admin).
Đi đến mục Plugin: Trên thanh menu bên trái, chọn Plugins > Add New (Plugin > Cài mới).
Tìm kiếm plugin: Trong ô tìm kiếm ở góc trên bên phải, gõ tên plugin bạn muốn cài đặt, ví dụ: “WPFront Scroll Top”.
Cài đặt plugin: Khi plugin xuất hiện trong kết quả tìm kiếm, nhấp vào nút Install Now (Cài đặt ngay). WordPress sẽ tự động tải về và cài đặt plugin cho bạn.
Kích hoạt plugin: Sau khi cài đặt xong, nút “Install Now” sẽ chuyển thành nút Activate (Kích hoạt). Hãy nhấp vào đó để plugin bắt đầu hoạt động.

Sau khi kích hoạt, bạn thường sẽ tìm thấy mục cài đặt của plugin trong menu Settings (Cài đặt) hoặc một mục riêng trên thanh menu quản trị. Tại đây, bạn có thể cấu hình nút theo ý muốn, chẳng hạn như thay đổi biểu tượng, điều chỉnh màu sắc cho phù hợp với thương hiệu, chọn vị trí hiển thị (trái hoặc phải) và thiết lập các hiệu ứng động khi nút xuất hiện hoặc biến mất.

Cách tùy chỉnh giao diện và vị trí của nút back to top

Dù bạn sử dụng code hay plugin, việc tùy chỉnh giao diện của nút back to top để nó hòa hợp với thiết kế tổng thể của website là rất quan trọng. Một nút bấm được thiết kế tốt không chỉ đẹp mắt mà còn thu hút người dùng tương tác. May mắn là WordPress cung cấp nhiều cách để bạn có thể tinh chỉnh từng chi tiết nhỏ nhất.

Tùy chỉnh bằng CSS trong theme hoặc plugin

Nếu bạn đang sử dụng phương pháp code thủ công, bạn có thể dễ dàng thay đổi mọi thứ bằng cách chỉnh sửa đoạn mã CSS đã thêm trước đó. Ví dụ, để thay đổi màu nền, kích thước và làm cho nút có hình tròn, bạn có thể cập nhật như sau:

#backToTopBtn {
  /* ... các thuộc tính khác ... */
  background-color: #007bff; /* Thay đổi màu nền */
  width: 50px; /* Đặt chiều rộng */
  height: 50px; /* Đặt chiều cao */
  border-radius: 50%; /* Bo góc thành hình tròn */
  font-size: 24px; /* Tăng kích thước icon/chữ */
  line-height: 50px; /* Căn giữa icon/chữ theo chiều dọc */
  text-align: center; /* Căn giữa icon/chữ theo chiều ngang */
}
#backToTopBtn:hover {
  background-color: #0056b3; /* Thay đổi màu khi di chuột */
}

Nếu bạn dùng plugin, hầu hết các plugin tốt đều cung cấp một ô nhập “Custom CSS” trong trang cài đặt. Bạn có thể dán các đoạn mã CSS tùy chỉnh vào đây để ghi đè lên thiết lập mặc định của plugin mà không cần chỉnh sửa file theme. Điều này giúp các tùy chỉnh của bạn được giữ lại ngay cả khi plugin hoặc theme được cập nhật.

Sử dụng trình chỉnh sửa giao diện WordPress để tinh chỉnh

Một công cụ mạnh mẽ khác là Trình tùy biến giao diện của WordPress (WordPress Customizer). Bạn có thể truy cập bằng cách vào Appearance > Customize (Giao diện > Tùy biến).

Tại đây, hãy tìm đến mục Additional CSS (CSS bổ sung). Đây là nơi lý tưởng để bạn thêm các đoạn mã CSS của mình và xem thay đổi được áp dụng ngay lập tức trên bản xem trước (live preview). Điều này giúp bạn dễ dàng thử nghiệm các màu sắc, kích thước và vị trí khác nhau cho đến khi tìm được phong cách ưng ý nhất.

Khi tùy chỉnh vị trí, hãy cân nhắc đến các yếu tố khác trên trang. Nút back to top không nên che khuất các nội dung quan trọng như nút chat, banner quảng cáo hay thông báo cookie. Vị trí phổ biến và an toàn nhất là góc dưới bên phải màn hình, nhưng bạn hoàn toàn có thể điều chỉnh để nó phù hợp nhất với bố cục trang web của mình. Tham khảo thêm hướng dẫn category là gì trong WordPress để sắp xếp nội dung và bố cục trang web hiệu quả hơn.

Kiểm tra và tối ưu hiệu quả của nút back to top trên website

Sau khi đã thêm và tùy chỉnh nút back to top, công việc vẫn chưa kết thúc. Bước tiếp theo và cũng rất quan trọng là kiểm tra kỹ lưỡng để đảm bảo nó hoạt động hoàn hảo trên mọi phương diện và không gây ra bất kỳ tác dụng phụ nào. Việc tối ưu hóa sẽ giúp tính năng này thực sự nâng cao trải nghiệm người dùng thay vì trở thành một sự phiền toái.

Kiểm tra tính tương thích trên các thiết bị và trình duyệt

Thế giới kỹ thuật số rất đa dạng, người dùng có thể truy cập website của bạn từ nhiều thiết bị và trình duyệt khác nhau. Vì vậy, bạn cần đảm bảo nút back to top hoạt động ổn định ở mọi nơi.

Kiểm tra trên Desktop: Mở website của bạn trên các trình duyệt phổ biến như Chrome, Firefox, Safari và Edge để chắc chắn rằng nút hiển thị đúng và hoạt động mượt mà.
Kiểm tra trên Mobile và Tablet: Đây là bước cực kỳ quan trọng vì phần lớn lưu lượng truy cập hiện nay đến từ thiết bị di động. Hãy sử dụng trình giả lập của trình duyệt (Developer Tools) hoặc kiểm tra trực tiếp trên điện thoại và máy tính bảng. Hãy chắc chắn rằng nút không quá to, không che mất nội dung chính và dễ dàng để người dùng chạm vào bằng ngón tay.
Kiểm tra tính responsive: Thay đổi kích thước cửa sổ trình duyệt để xem nút có tự động điều chỉnh vị trí một cách hợp lý hay không.

Một vấn đề thường gặp là nút back to top có thể che mất thanh menu dưới cùng hoặc các nút kêu gọi hành động (CTA) trên giao diện di động. Hãy tinh chỉnh CSS để thêm khoảng cách hoặc ẩn nút trên các màn hình có kích thước quá nhỏ nếu cần thiết. Bạn có thể tham khảo một số mẹo tối ưu từ học WordPress từ cơ bản đến nâng cao để nâng cao kỹ năng trong việc điều chỉnh giao diện responsive.

Tối ưu hiệu suất hiển thị và giảm tải cho website

Một tính năng nhỏ như nút back to top không nên làm ảnh hưởng đến tốc độ tải trang của bạn. Hiệu suất là yếu tố then chốt cho cả SEO và trải nghiệm người dùng.

Sử dụng mã nguồn nhẹ: Nếu bạn tự viết code, hãy đảm bảo các đoạn mã CSS và JavaScript là tối giản và hiệu quả. Tránh sử dụng các thư viện JavaScript nặng chỉ để tạo một hiệu ứng cuộn đơn giản. Đoạn mã chúng tôi cung cấp ở trên là một ví dụ về giải pháp gọn nhẹ.
Tối ưu plugin: Nếu bạn sử dụng plugin, hãy chọn những plugin được đánh giá tốt về hiệu suất. Một số plugin có thể tải các file CSS và JavaScript không cần thiết, làm chậm website của bạn. Bạn có thể sử dụng các công cụ như GTmetrix hoặc PageSpeed Insights để kiểm tra xem plugin có ảnh hưởng tiêu cực đến tốc độ trang hay không.
Tránh xung đột: Dù là code hay plugin, chúng đều có thể gây xung đột với theme hoặc các plugin khác. Sau khi cài đặt, hãy duyệt qua các trang quan trọng trên website của bạn để đảm bảo mọi thứ vẫn hoạt động bình thường, đặc biệt là các chức năng liên quan đến JavaScript.

Bằng cách kiểm tra và tối ưu hóa cẩn thận, bạn sẽ có một nút back to top không chỉ đẹp mà còn hoạt động hiệu quả, góp phần tạo nên một website chuyên nghiệp và thân thiện với người dùng. Tham khảo thêm các đánh giá MyThemeShop hoặc Elegant themes để chọn lựa theme và plugin tương thích nâng cao hiệu suất.

Lưu ý về tính tương thích và hiệu suất khi thêm nút back to top

Việc tích hợp nút back to top là một cải tiến nhỏ nhưng có thể mang lại lợi ích lớn. Tuy nhiên, nếu không được triển khai đúng cách, nó cũng có thể gây ra những vấn đề không mong muốn. Dưới đây là những lưu ý quan trọng về tính tương thích và hiệu suất mà bạn cần ghi nhớ để đảm bảo tính năng này hoạt động hài hòa với website của mình.

Đảm bảo nút không ảnh hưởng trải nghiệm người dùng và SEO

Mục đích chính của nút back to top là cải thiện UX, vì vậy đừng để nó trở thành vật cản.

Không che khuất nội dung quan trọng: Đây là quy tắc vàng. Hãy đảm bảo nút không che lấp các yếu tố quan trọng như logo, menu điều hướng, nút kêu gọi hành động (CTA), hoặc các banner quảng cáo ở cuối trang. Đặc biệt trên di động, không gian màn hình rất hạn chế, vì vậy vị trí của nút càng cần được cân nhắc kỹ lưỡng.
Tốc độ tải trang (Page Speed): Google và người dùng đều không thích các trang web chậm chạp. Nếu bạn sử dụng script quá nặng hoặc hình ảnh động phức tạp cho nút back to top, nó có thể làm tăng thời gian tải trang. Điều này ảnh hưởng trực tiếp đến thứ hạng SEO và tỷ lệ thoát của người dùng. Hãy ưu tiên các giải pháp nhẹ nhàng, sử dụng CSS animations thay vì JavaScript animations khi có thể, và đảm bảo script được tải một cách không đồng bộ (asynchronously) để không chặn việc hiển thị nội dung trang.

Đề phòng xung đột với các plugin và theme đang sử dụng

WordPress là một hệ sinh thái mở với hàng ngàn theme và plugin khác nhau. Sự đa dạng này đôi khi dẫn đến các xung đột không lường trước được.

Kiểm tra kỹ sau khi cài đặt: Ngay sau khi bạn thêm code hoặc kích hoạt plugin, hãy dành thời gian để kiểm tra toàn bộ website. Truy cập các trang khác nhau, thử các chức năng (như gửi form, thêm vào giỏ hàng) để đảm bảo không có gì bị lỗi. Các xung đột JavaScript là phổ biến nhất, có thể làm hỏng các menu, slider hoặc các hiệu ứng động khác.
Luôn backup trước khi thay đổi: Đây là một thói quen tốt mà bất kỳ người quản trị website nào cũng nên có. Trước khi thêm bất kỳ đoạn code mới hoặc cài đặt plugin, hãy tạo một bản sao lưu (backup) toàn bộ website của bạn. Nếu có sự cố xảy ra, bạn có thể dễ dàng khôi phục lại trạng thái trước đó.
Sử dụng môi trường Staging: Nếu có thể, hãy thử nghiệm các thay đổi trên một môi trường thử nghiệm (staging site) trước khi áp dụng cho website chính thức. Môi trường staging là một bản sao của website của bạn, cho phép bạn kiểm tra mọi thứ một cách an toàn mà không ảnh hưởng đến người dùng thật.

Bằng cách chú ý đến những điểm này, bạn có thể tự tin thêm nút back to top vào trang web của mình, biết rằng nó sẽ hoạt động như một công cụ hỗ trợ hữu ích thay vì gây ra sự cố kỹ thuật.

Best Practices

Để đảm bảo nút back to top của bạn mang lại hiệu quả tối đa và góp phần vào một trải nghiệm người dùng xuất sắc, hãy tuân thủ các nguyên tắc thực hành tốt nhất (best practices) dưới đây. Đây là những kinh nghiệm được đúc kết để giúp bạn triển khai tính năng này một cách chuyên nghiệp và tinh tế.

Luôn đặt nút ở vị trí dễ thấy và thuận tiện thao tác: Vị trí phổ biến nhất là góc dưới bên phải màn hình. Đây là khu vực ít khi chứa nội dung quan trọng và dễ dàng tiếp cận bằng cả chuột (trên desktop) và ngón tay cái (trên mobile).
Ưu tiên sử dụng plugin uy tín hoặc viết code tối giản, sạch: Tránh các plugin ít được cập nhật hoặc có đánh giá thấp. Nếu tự viết code, hãy giữ cho nó đơn giản và tập trung vào chức năng chính để đảm bảo hiệu suất tốt nhất.
Đảm bảo nút không che mất nội dung quan trọng trên mọi thiết bị: Luôn kiểm tra giao diện trên di động. Nếu cần, hãy giảm kích thước nút hoặc tăng khoảng cách của nó so với lề màn hình trên các thiết bị nhỏ hơn.
Không dùng hiệu ứng quá phức tạp gây gián đoạn trải nghiệm người dùng: Một hiệu ứng xuất hiện và biến mất nhẹ nhàng (fade in/out) là đủ. Tránh các hiệu ứng nhảy múa, nhấp nháy hoặc rung lắc có thể gây mất tập trung và khó chịu cho người đọc.
Thường xuyên kiểm tra và cập nhật để tương thích với phiên bản WordPress mới: WordPress, theme và plugin đều được cập nhật thường xuyên. Hãy định kỳ kiểm tra xem nút back to top của bạn có còn hoạt động tốt sau mỗi lần cập nhật lớn hay không.

Kết luận

Việc tích hợp nút back to top vào website WordPress là một cải tiến nhỏ nhưng mang lại tác động lớn đến trải nghiệm người dùng. Nó không chỉ giúp người truy cập điều hướng các trang nội dung dài một cách dễ dàng và nhanh chóng mà còn thể hiện sự chuyên nghiệp và quan tâm đến sự tiện lợi của khách hàng. Một trải nghiệm duyệt web mượt mà có thể khuyến khích người dùng ở lại lâu hơn, khám phá nhiều nội dung hơn và tăng khả năng họ quay trở lại trong tương lai.

Qua bài viết này, AZWEB đã hướng dẫn chi tiết hai phương pháp phổ biến để thêm nút back to top: sử dụng code thủ công cho những ai muốn toàn quyền kiểm soát và tối ưu hóa, và sử dụng plugin cho những ai ưu tiên sự nhanh chóng và tiện lợi. Cả hai cách đều hiệu quả và bạn có thể lựa chọn phương pháp phù hợp nhất với kỹ năng và nhu cầu của mình.

Bây giờ là lúc bạn bắt tay vào hành động. Hãy áp dụng ngay những hướng dẫn trên để trang bị cho website của mình tính năng hữu ích này. Đừng quên kiểm tra, tối ưu và cá nhân hóa giao diện nút bấm để nó thực sự hòa hợp với phong cách thương hiệu của bạn, góp phần tạo nên một trang web thân thiện và chuyên nghiệp hơn.

Hình minh họa