HomeThủ thuật

Thêm nút Back To Top cho website wordpress

Like Tweet Pin it Share Share Email

Trải nghiệm người dùng thường bị bỏ qua khi thiết kế website. Nhưng thật không may là nó đóng một vai trò cực kỳ quan trọng trong việc điều hướng người dùng trên trang web của bạn.

Một tính năng nhỏ mà nhiều website hay dùng, đó là nút “Back To Top” (mình không dịch ra tiếng Việt vì không sát nghĩa được). Nút này giúp người dùng nhanh chóng trở về đầu trang thay vì phải cuộn chuột hoặc touch nhiều lần, đặc biệt là những bài viết có nội dung dài.

chen-nut-back-to-top-cho-website-wordpress
Nút back to top trên website của mình

Bài viết này mình sẽ hướng dẫn các bạn chèn nút Back To Top vào website bằng wordpress một cách nhanh chóng và dễ dàng.

Với wordpress, một mã nguồn mở có cộng đồng lớn mạnh, không khó để các bạn tinh chỉnh nó cho phù hợp với ý mình. Mình sẽ hướng dẫn bạn 2 cách chèn nút Back Top Top dễ dàng:

Bằng js, không dùng plugin

Ưu điểm là bạn chỉ cần dùng 1 javascript mà không cần cài thêm plugin. Khi cài plugin sẽ phát sinh thêm nhiều code, làm cho website load chậm hơn.

Trước khi bắt đầu

Chúng ta sẽ chọn vị trí góc phải dưới, vì nó dễ dàng trong tầm mắt người đọc, không làm vướng víu trang web. Cần lưu ý thêm rằng: sẽ có những chỉnh sửa trong các file style.css, function.php…cho nên bạn cần backup lại các file này nhé!

Tạo file javascript

Bạn dùng FTP client kết nối tới hosting của mình, vào folder theme mà bạn đang sử dụng tìm folder js (thư mục chứa các tập tin javascript sử dụng cho website). Nếu bạn khó khăn để tìm ra nó, hãy tạo một folder có tên là js ở /theme/theme-cua-ban/

Tạo một file có tên là topbutton.js và chèn nội dung đoạn code bên dưới:

Bạn cũng có thể chỉnh tốc độ hiện nút Back To Top nhanh hay chậm bằng cách chỉnh thời gian cho nó ở dòng  var speed (tốc độ là ms).

Tạo nút

Dùng một phần mềm chỉnh sửa hình ảnh để tạo hình tuỳ ý bạn. Hoặc bạn có thể tải các nút đó trên mạng. Kích thước khuyến nghĩ là 50×50 px.

Sau đó upload lên website của bạn. Các bạn có thể upload bằng ftp client hoặc trong phần media ở Dashboard. Sau đó copy URL hình ảnh đó lại để sử dụng. Nếu bạn muốn, bạn có thể sử dụng ký tự làm nút này cũng được. Tất nhiên là bạn cần sửa css để cho nút này đẹp hơn.

Sửa file style.css

Mở file style.css của bạn ra và điền vào đoạn css mẫu bên dưới vào cuối cùng của file. Tất nhiên bạn có thể tuỳ chỉnh sao cho đúng ý mình. Hoặc bạn có thể tuỳ chỉnh css trực tiếp vào vị trí mà nút này cần hiển thị (hướng dẫn ở bước tiếp theo)

Bạn hãy thay url trong phần background-image thành URL hình ảnh mà bạn đã copy ở bước trên nhé!

Sửa file function.php

Mở file funtion.php ở thư mục gốc của theme lên và thêm vào đoạn code bên dưới vào cuối cùng của file.

Chèn nút Back To Top

Bạn có thể đặt nút này ở từng trang mà bạn muốn, hoặc trong file header.php. Tuy nhiên, chúng ta hãy đặt nó ở footer.php để mọi thứ hoạt động suôn sẻ, dễ dàng cho việc thay đổi trong tương lai.

Mở file footer.php trong thư mục gốc của theme và chèn vào code bên dưới trước thẻ đóng </body>

Ok, nếu bạn không sửa được style.css ở bước trên thì bạn có thể thay thế nó vào “css bên trên“. Sau đó lưu tất cả lại và refresh trình duyệt để thưởng thức thành quả.

Bằng plugin Scroll Back To Top

Ưu điểm là bạn không cần phải trải qua nhiều bước chèn code bên trên. Nhược điểm thì “càng sử dụng nhiều plugin thì website tải càng chậm đi” .

Các bạn cài plugin Scroll Back To Top và kích hoạt nó. Mọi thiết lập bạn khám phá bên trong Settings > Scroll Back to Top nhé!

Và bây giờ chúng ta đã có nút Back To Top cho website nhằm tăng sự trải nghiệm người dùng trên trang rồi đấy! Chúc các bạn thành công!

Thêm nút Back To Top cho website wordpress
5 (100%) 1 vote

Comments (0)

Leave a Reply

Chú ý tất cả comment đều được kiểm duyệt cẩn thận, xin đừng cố gắng spam hoặc quảng cáo. Hãy dùng tên của bạn khi comment, không sử dụng keyword trong ô Name. Xin cảm ơn! *