Bạn có muốn thêm một trình tải trước vào trang web WordPress của mình không? Trình tải trước là một hình ảnh động cho biết tiến trình tải trang ở chế độ nền.
Trình tải trước đảm bảo cho người dùng rằng trang web đang hoạt động để tải trang. Điều này có thể giúp cải thiện trải nghiệm người dùng và giảm tỷ lệ thoát tổng thể.
Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thêm trình tải trước vào WordPress.
Trình tải trước là gì và khi nào bạn nên sử dụng nó?
Trình tải trước là một hình ảnh động hoặc thông báo trạng thái cho biết tiến trình tải trang dưới nền.
Thông thường, khi bạn truy cập một trang web, trình duyệt của bạn bắt đầu tải xuống các phần khác nhau của nội dung. Một số phần của trang web tải nhanh hơn (tức là văn bản, HTML, CSS) trong khi các phần khác tải chậm hơn (tức là hình ảnh và video).
Nếu hầu hết nội dung của bạn là văn bản có rất ít hình ảnh và video thì bạn không thực sự cần phải thêm trình tải trước vào trang web của mình. Thay vào đó, bạn nên tập trung vào việc cải thiện tốc độ và hiệu suất trang web để tải trang nhanh hơn.
Mặt khác, nếu hầu hết nội dung của bạn là hình ảnh, hình ảnh và video được nhúng, thì người dùng của bạn nên đợi một chút trước khi họ có thể xem tất cả nội dung.
Trong những lần tải xuống một phần, trang web của bạn có thể xuất hiện chậm. Đôi khi người dùng thậm chí có thể nghĩ rằng nó bị hỏng. Thêm trình tải trước sẽ lấp đầy khoảng trống này và hiển thị cho người dùng chỉ báo tiến trình trong khi tải trang.
Bạn có thể xem ví dụ trực tiếp về trình tải trước bằng cách nhấp vào nút Xem trước trong khi viết bài đăng trên blog trên WordPress.
WordPress sẽ mở bản xem trước trực tiếp bài đăng trên blog của bạn trong một cửa sổ mới và hiển thị trình tải trước trước khi nó thực sự hiển thị bản xem trước trực tiếp.
Như đã nói, chúng ta hãy xem làm thế nào bạn có thể dễ dàng thêm trình tải trước vào trang web WordPress của mình.
Phương pháp 1. Thêm trình tải trước WordPress bằng WP Smart Preloader
Phương pháp này được khuyến nghị vì dễ thực hiện hơn và không yêu cầu bất kỳ thay đổi nào đối với chủ đề WordPress của bạn.
Điều đầu tiên bạn nên làm là cài đặt và kích hoạt plugin WP Smart Preloader. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.
Sau khi kích hoạt, bạn phải truy cập Cài đặt »Trình tải trước thông minh WP trang để cấu hình các cài đặt plugin.
Trước tiên, bạn cần chọn một kiểu tải trước hoặc hoạt hình tải trang. Plugin đi kèm với sáu hình ảnh động tích hợp để lựa chọn. Bạn cũng có thể tải lên HTML và CSS tùy chỉnh của riêng mình để tạo trình tải trước tùy chỉnh.
Sau đó, bạn có thể làm cho trình tải trước chỉ xuất hiện trên trang chủ bằng cách chọn tùy chọn "Chỉ hiển thị trên trang chủ".
Sau đó, bạn cần cuộn xuống phần "Thời lượng để hiển thị trình tải". Bạn phải chỉ định thời lượng của trình tải trước. Tùy chọn mặc định là 1500 mili giây (1,5 giây), sẽ hoạt động cho hầu hết các trang web, nhưng bạn có thể thay đổi nó nếu bạn muốn.
Bạn cũng có thể định cấu hình thời gian cần để bộ sạc biến mất hoàn toàn. Tùy chọn mặc định là 2500 giây hoặc 2.5 giây
Cuối cùng, đừng quên nhấp vào nút "Lưu thay đổi" để lưu trữ cài đặt của bạn.
Bây giờ bạn có thể truy cập trang web của họ để xem trình tải trước hoạt động.
Phương pháp 2. Thêm Trình tải trước WordPress bằng Trình tải trước Preloader
Phương pháp này linh hoạt nhưng yêu cầu các bước bổ sung để triển khai đúng cách trên trang web WordPress của bạn.
Điều đầu tiên bạn nên làm là cài đặt và kích hoạt plugin Preloader. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.
Sau khi kích hoạt, bạn phải truy cập vào Plugin »Trình tải trước trang để cấu hình các cài đặt plugin.
Trước tiên, bạn cần nhập mã thập lục phân cho màu nền bạn muốn sử dụng cho màn hình tải. Tùy chọn mặc định là #FFFFFF (màu trắng). Bạn có thể sử dụng công cụ chọn màu trực tuyến để tìm mã HEX cho màu bạn muốn sử dụng.
Tiếp theo, bạn cần cung cấp URL của hình ảnh trình tải trước mà bạn muốn sử dụng. Các plugin đi kèm với một hình ảnh hoạt hình mặc định.
Nếu bạn muốn sử dụng một hình ảnh động khác, bạn sẽ tìm thấy một liên kết để tải xuống một hình ảnh tải trước hoạt hình từ trang web của bên thứ ba. Sau đó, bạn có thể tải hình ảnh đó lên thư mục nội dung wp của mình và dán URL vào đây.
Tiếp theo, bạn cần chọn nơi bạn muốn hiển thị trình tải trước.
Bạn có thể chọn hiển thị nó trên mỗi trang của trang web của bạn hoặc bạn có thể chọn một phần cụ thể.
Cuối cùng, bạn sẽ thấy các hướng dẫn để thêm đoạn mã sau vào tệp header.php của chủ đề WordPress của bạn.
Antes de abandonar la página, no olvide hacer clic en el botón "Guardar cambios" para almacenar su configuración.
No recomendamos agregar código a su tema de WordPress porque se borrará cuando actualice el tema.
Si está utilizando un tema secundario, entonces está bien agregar el código al archivo header.php de su tema secundario.
Una solución aún mejor sería agregar este código usando un complemento de fragmentos de código por separado, o en un complemento específico del sitio.
Aquí está el código que debe agregar:
function wpb_add_preloader() {
echo '';
}
add_action( 'wp_body_open', 'wpb_add_preloader' );
Lưu ý: Phương pháp thêm mã này sẽ chỉ hoạt động trên các chủ đề WordPress hỗ trợ chức năng wp_body_open () được thêm vào trong WordPress 5.2.
Phương pháp thêm mã này đảm bảo rằng mã của bạn vẫn ở đó ngay cả khi bạn cập nhật chủ đề.
Khi bạn đã thêm mã, bạn có thể truy cập trang web của họ để xem trình tải trước hoạt động.
Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách dễ dàng thêm Trình tải trước vào trang web WordPress của bạn. Bạn cũng có thể muốn xem danh sách các mẹo, thủ thuật và hack hack hữu ích nhất của chúng tôi để biết thêm ý tưởng thú vị.
Nếu bạn thích bài viết này, đăng ký kênh của chúng tôi YouTube để xem video hướng dẫn WordPress. Bạn cũng có thể tìm thấy chúng tôi tại Twitter y Facebook.
