Bạn muốn thêm một trình tải trước vào trang web WordPress của bạn? 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 đ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.
Bộ sạ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 mức độ 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 (ví dụ: văn bản, HTML, CSS) trong khi các phần khác tải chậm hơn (ví dụ: 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, bạn không cần thêm trình tải trước vào trang web của mình. Thay vào đó, hãy tập trung vào việc cải thiện tốc độ và hiệu suất trang web của bạn để 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, 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ó vẻ 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 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 với Trình tải trước thông minh WP
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 cần làm là cài đặt và kích hoạt plugin WP Smart Preloader. Để biết thêm thông tin, 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 để cấu hình các cài đặt plugin.
Trước tiên, bạn phải 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 của riêng mình để tạo trình tải trước tùy chỉnh.
Sau đó, bạn có thể có 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 phải cuộn xuống phần "Thời lượng 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 hoạt động.
phương pháp 2. Thêm Trình tải trước WordPress với Plugin Trình tải trước
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 cần làm là cài đặt và kích hoạt plugin Preloader. Để biết thêm thông tin, 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 Plugin »Trình tải trước để 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 để tải màn hình. 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 phải nhập URL của hình ảnh được tải mà bạn muốn sử dụng. Các plugin có một hình ảnh hoạt hình tiêu chuẩn.
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ừ mộ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.
Sau đó, bạn phải 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 chọn một phần cụ thể.
Cuối cùng, hãy xem hướng dẫn để thêm đoạn mã sau vào tệp header.php trong chủ đề WordPress của bạn.
Antes de từ bỏ la página, không có olvide hacer clic en el botón "Guardar cambios" para almacenar su configureación.
Không có recomendamos tổng hợp một từ về một chủ đề của WordPress vì nó nhàm chán chủ đề thực tế.
Chúng được sử dụng trong một chủ đề thứ hai, nhưng chúng cũng được tổng hợp bởi lưu trữ tiêu đề archive.php trong chủ đề phụ.
Ngoài một loạt các tập hợp lớn hơn, chúng ta có thể bổ sung các đoạn mã bằng cách tách chúng và bổ sung cho tình huống cụ thể.
Aquí está el código que debe agregar:
hàm wpb_add_preloader () {echo ''; } add_action ('wp_body_open', 'wpb_add_preloader');
lưu ý: Phương pháp thêm mã này 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 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 và Facebook.
