Cách thêm hiệu ứng chờ tải trang trong WordPress

Bạn có muốn thêm hiệu ứng chờ tải trang cho WordPres site của mình? Hiệu ứng chờ tải trang là một ảnh động cho biết tiến trình tải trang ở chế độ nền. Hiệu ứng này cho người dùng biết rằng website của bạn đang thực hiện việc tải trang. Hiệu ứng chờ tải trang giúp cải thiện trải nghiệm người dùng và giảm tỷ lệ thoát trang. Trong bài viết này tôi sẽ chia sẻ cách thêm hiệu ứng chờ tải trang cho WordPress site của bạn.

Hiệu ứng chờ tải trang là gì và khi nào thì nên dùng nó

Hiệu ứng chờ tải trang hoặc thông báo trạng thái cho biết tiến trình tải trang trong chế độ nền.

Thường thì khi bạn truy cập vào một website, trình duyệt của bạn sẽ thực hiện việc tải các phần nội dung khác nhau. Có một số phần của website tải nhanh hơn (ví dụ như mã HTML, CSS), nhưng cũng có những phần tải chậm hơn (ví dụ như hình ảnh hoặc video).

Nếu nội dung trên trang của bạn chủ yếu là văn bản, có ít hình ảnh hoặc video thì bạn không cần phải thêm hiệu ứng chờ tải trang. Thay vào đó bạn cần tập trung vào việc cải thiện tốc độ và hiệu suất để website tải được nhanh hơn.

Nếu nội dung trên trang của bạn được nhúng nhiều hình ảnh, video thì độc giả của bạn cần phải đợi một lúc trước khi có thể nhìn thấy toàn bộ nội dung.

Trong quá trình tải xuống, bạn sẽ có cảm giác như tốc độ của website chậm chạp rất nhiều. Đôi khi người dùng có thể nghĩ rằng website của bạn bị hỏng. Thêm hiệu ứng chờ tải trang sẽ giúp bạn giải quyết được vấn đề này. Nó cho người dùng biết rằng nội dung trên trang của bạn vẫn đang trong tiến trình tải xuống.

Bạn có thể nhìn thấy ví dụ về hiệu ứng chờ tải xuống bằng cách nhấp vào nút Preview khi viết bài trong WordPress. WordPress sẽ mở bản xem trước của bài viết trong một cửa sổ mới với hiệu ứng chờ tải trang trước khi hiển thị đầy đủ nội dung bài viết của bạn.

Thật tuyệt vời đúng không? Giờ chúng ta cùng tìm hiểu các cách đơn giản nhất để thêm hiệu ứng chờ tải trang cho WordPress site.

Cách 1. Thêm hiệu ứng chờ tải trang bằng plugin WP Smart Preloader

Cách này được khuyên dùng vì nó bổ sung hiệu ứng chờ tải trang mà không làm thay đổi WordPress Theme của bạn.

Việc đầu tiên bạn cần làm là cài đặt và kích hoạt plugin có tên là WP Smart Preloader.

wp smart preloader

Nếu bạn chưa biết cách cài đặt và kích hoạt plugin, hãy đọc lại bài viết [Hướng dẫn cài đặt và quản lý plugin trong WordPress].

Sau khi kích hoạt, bạn cần truy cập vào trang  Settings » WP Smart Preloader để cấu hình các cài đặt của plugin.

wp smart preloader settings

Đầu tiên, bạn cần chọn kiểu, hiệu ứng chờ tải trang. Plugin có sáu kiểu hiệu ứng chờ tải trang để bạn lựa chọn. Bạn cũng có thể tải lên mã HTML và CSS tùy chỉnh để tạo hiệu ứng chờ tải trang theo ý mình.

Tiếp đó bạn có thể phép hiệu ứng chờ tải trang chỉ xuất hiện trên trang chủ bằng cách chọn tùy chọn “Show only on Home Page”.

Tiếp theo, bạn cần lăn xuống dưới và tìm đến phần “Duration to show Loader”. Bạn cần chỉ rõ khoảng thời gian sử dụng hiệu ứng chờ tải trang. Tùy chọn mặc định là 1,5 giây, bạn có thể thay đổi tùy nhu cầu sử dụng của mình.

Bạn cũng có thể thiết lập khoảng thời gian mờ dần của hiệu ứng chờ tải trang. Tùy chọn mặc định là 2,5 giây.

Xong khi thực hiện xong, đừng quên nhấp vào nút Save Changes để lưu lại các thay đổi của bạn.

Giờ bạn có thể truy cập vào website của mình để xem hiệu ứng chờ tải trang hoạt động như thế nào.

Thêm hiệu ứng chờ tải trang bằng code

Cách 2. Thêm hiệu ứng chờ tải trang bằng plugin Preloader

Cách này linh hoạt nhưng đòi hỏi phải thêm các bước để triển khai đúng cách trên WordPress site của bạn.

Việc đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Preloader.

Sau khi kích hoạt, bạn cần truy cập vào trang Plugins » Preloader để cấu hình các cài đặt cho plugin.

preloader settings

Trước hết bạn cần nhập mã HEX cho màu nền bạn muốn dùng cho màn hình tải trang. Mã màu mặc định là #FFFFFF (tức màu trắng). Bạn có thể dễ dàng tìm được mã màu mà mình muốn sử dụng bằng Google.

Tiếp đó, bạn cần cung cấp địa chỉ URL của hình ảnh chờ tải trang mà mình muốn dùng. Plugin tích hợp ảnh chờ tải trang mặc định. Nếu bạn muốn sử dụng hiệu ứng chờ tải trang khác, bạn sẽ nhìn thấy liên kết để download hình ảnh chờ tải trang của bên thứ ba. Sau đó bạn có thể tải hình ảnh đó lên thư mục wp-content và dán địa chỉ URL vào đây.

Sau đó bạn cần chọn nơi bạn muốn hiển thị hiệu ứng chờ tải trang.

display preloader place

Bạn có thể cho phép hiệu ứng chờ tải trang hiển thị trên cả website hoặc chỉ hiển thị ở một khu vực nào đó.

Cuối cùng bạn sẽ nhìn thấy hướng dẫn để thêm đoạn code bên dưới vào tập tin header.php

<div id=”wptime-plugin-preloader”></div>

Nhưng trước khi rời khỏi trang này, đừng quên nhấp vào nút Save changes để lưu lại các thay đổi của bạn.

Việc thêm đoạn code vào tập tin header.php có một bất lợi đó là khi bạn cập nhật WordPress Theme, đoạn code sẽ bị xóa.

Nếu bạn đang sử dụng Child Theme thì hãy thêm dòng code vào tập tin header.php của Child Theme.

function add_preloader(){
echo '<div id="wptime-plugin-preloader"&gt;&lt;/div>';
}
add_action('wp_body_open','add_preloader');
Lưu ý: Cách thêm code này sẽ chỉ hoạt động đối với WordPress Theme tương thích với hàm wp_body_open() đã được thêm vào trong phiên bản WordPress 5.2

Cách thêm code này đảm bảo rằng đoạn code sẽ không bị ghi đè khi bạn cập nhật WordPress Theme.

Khi bạn đã thêm đoạn code rồi, hãy truy cập lại website của mình để xem cách hiệu ứng chờ tải trang hoạt động.

Thêm hiệu ứng chờ tải trang bằng code

Tôi hy vọng bài viết này sẽ giúp bạn biết cách thêm hiệu ứng chờ tải trang cho WordPress site của mình.

Nếu bạn thấy bài viết hữu ích, đừng quên Like và Share.

Hẹn gặp lại bạn trong bài viết tiếp theo./.

Đăng ký nhận bài viết mới nhất

Hãy đăng ký nhận tin để nhận được những nội dung thú vị và tuyệt vời!

Để lại bình luận