Hướng dẫn cách thêm Preloader Animation vào WordPress

Preload là một hiệu ứng thể hiện cho người dùng biết rằng tiến trình tải trang đang được thực hiện. Từ đó cải thiện trải nghiệm người dùng và giảm tỷ lệ người dùng thoát trang. Trong bài viết này, Vietnix sẽ hướng dẫn cho bạn chi tiết các bước thêm Preloader Animation vào WordPress đơn giản và hiệu quả.

Mua Web Hosting chỉ từ 28,080đ

Preload Animation là gì và tại sao cần thêm vào WordPress?

Nếu một website mất nhiều thời gian để tải trang, có thể người truy cập sẽ nghĩ rằng trang web của bạn bị lỗi và nhanh chóng thoát trang. Để ngăn chặn điều này, bạn có thể thêm Preload Animation cho trang web. Đây là một hiệu ứng hiển thị nhằm thông báo cho người dùng biết trang đang được tải.

Bạn có thể xem một ví dụ thực tế về hiệu ứng preload khi thêm bài viết mới trong WordPress. Chỉ cần nhấp vào nút Preview trong trình chỉnh sửa bài viết, WordPress sẽ hiển thị một hiệu ứng preload trong quá trình xem trước.

Nếu hầu hết nội dung của bạn là văn bản với rất ít hình ảnh và video thì thông thường việc thêm preload vào trang web là không cần thiết. 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 hoặc nâng cấp lên nhà cung cấp WordPress hosting tốt hơn.

Nói đến tốc độ và hiệu suất bạn không thể bỏ qua dịch vụ hosting tốc độ cao của Vietnix với hạ tầng và công nghệ luôn được chú trọng đầu tư, các gói hosting tại Vietnix đang cung cấp luôn được đánh giá cao nhờ các tính năng hiện đại, ổn định, bảo mật gồm: Hosting Giá Rẻ, Hosting Cao Cấp, Business Hosting, SEO Hosting và WordPress Hosting.

Đặc biệt hơn nữa, khi đăng ký sử dụng dịch vụ hosting tại Vietnix, bạn còn được tặng kèm bộ theme và plugin WordPress trị giá đến 26.000.000 VND/Năm.

Danh sách theme và plugin được tặng bởi Vietnix bao gồm: Plugin WP Rocket, Rank Math SEO Pro, itheme Security Pro, WPML, WP Smush Pro, WP Astra, Elementor Pro, theme Divi và 164 theme + plugin của MyThemeShop. Giúp bạn có thể xây dựng website WordPress chất lượng với mức giá tốt nhất.

Nhanh tay đăng ký dịch vụ hosting tại Vietnix để nhận được nhiều ưu đãi hấp dẫn nhất ngay hôm nay!

71,280đ -20%

89,100đ

/Tháng

2 Core

3GB RAM

3GB NVMe

1 Domain

SSL Miễn Phí

Tặng theme & plugin trị giá 26 triệu

85,680đ -20%

107,100đ

/Tháng

2 Core

3GB RAM

3GB NVMe

2 Domain

SSL Miễn Phí

Tặng theme & plugin trị giá 26 triệu

107,280đ -20%

134,100đ

/Tháng

2 Core

4GB RAM

4GB NVMe

2 Domain

SSL Miễn Phí

Tặng theme & plugin trị giá 26 triệu

157,680đ -20%

197,100đ

/Tháng

4 Core

4GB RAM

4GB NVMe

4 Domain

SSL Miễn Phí

Tặng theme & plugin trị giá 26 triệu

215,280đ -20%

269,100đ

/Tháng

4 Core

6GB RAM

6GB NVMe

4 Domain

SSL Miễn Phí

Tặng theme & plugin trị giá 26 triệu

287,280đ -20%

359,100đ

/Tháng

4 Core

8GB RAM

8GB NVMe

4 Domain

SSL Miễn Phí

Tặng theme & plugin trị giá 26 triệu

395,280đ -20%

494,100đ

/Tháng

8 Core

10GB RAM

10GB NVMe

4 Domain

SSL Miễn Phí

Tặng theme & plugin trị giá 26 triệu

28,080đ -20%

35,100đ

/Tháng

1 Core

1GB RAM

1GB NVMe

1 Domain

SSL Miễn Phí

Tặng theme & plugin trị giá 26 triệu

42,480đ -20%

53,100đ

/Tháng

1 Core

2GB RAM

2GB NVMe

1 Domain

SSL Miễn Phí

Tặng theme & plugin trị giá 26 triệu

49,680đ -20%

62,100đ

/Tháng

2 Core

2GB RAM

2GB NVMe

1 Domain

SSL Miễn Phí

Tặng theme & plugin trị giá 26 triệu

Sau đây, Vietnix sẽ hướng dẫn cho bạn cách dễ dàng để thêm Preloader Animation vào WordPress:

Phương pháp 1	Thêm preload trong WordPress bằng WP Smart preload (Phương pháp đơn giản)
Phương pháp 2	Thêm Preloader Animation vào WordPress bằng LoftLoader (Nhiều tùy chỉnh hơn)

Xem thêm: Cách thêm nút mua ngay cho Woocommerce đơn giản

Phương pháp 1: Thêm preload trong WordPress bằng WP Smart preload

Cách dễ nhất để thêm preload vào WordPress là sử dụng WP Smart preload. Plugin này có sẵn sáu hiệu ứng preload tích hợp sẵn mà bạn có thể sử dụng, hoặc bạn có thể tạo ra những hiệu ứng riêng bằng cách sử dụng mã HTML và CSS tùy chỉnh.

Đầu tiên, bạn cần cài đặt và kích hoạt plugin WP Smart preload.

Sau khi kích hoạt, vào Settings > WP Smart Preloader và mở danh sách drop down Smart preload. Đây là nơi hiển thị tất cả các hiệu ứng khác nhau mà bạn có thể sử dụng.

Plugin sẽ hiển thị một bản xem trước của hiệu ứng bạn chọn giúp bạn dễ dàng chọn hiệu ứng phù hợp nhất.

Mặc định, hiệu ứng sẽ xuất hiện trên toàn bộ website WordPress, tuy nhiên bạn có thể điều chỉnh để hiệu ứng này chỉ hiển thị trên trang chủ. Bạn chỉ cần chọn vào ô Show only on Home Page.

Nếu bạn muốn tạo hiệu ứng CSS riêng của mình, chỉ cần nhập mã của bạn vào ô Custom CSS.

Một cách khác dành cho bạn đó là tạo một hiệu ứng HTML5 tùy chỉnh bằng cách thêm mã vào ô Custom Animation.

custom animation preloader — Tạo preload tùy chỉnh bằng code

Sau khi chọn một hiệu ứng, cuộn xuống phần Duration to show Loader. Ở đây, bạn có thể thay đổi thời gian mà preload sẽ chạy.

Tùy chọn mặc định là 1500 mili giây hoặc 1,5 giây. Thời gian thiết lập này thường hoạt động tốt cho hầu hết các trang web, nhưng bạn có thể nhập một số khác nếu muốn.

Mặc định, hiệu ứng sẽ mất 2500 mili giây hoặc 2,5 giây để hoàn toàn mờ đi. Để thay đổi điều này, chỉ cần nhập một số lớn hơn hoặc nhỏ hơn vào trường Loader to Fade Out.

Khi đã hài lòng với các thiết lập preload, chỉ cần nhấp vào nút Save Changes để lưu các cài đặt.

Bây giờ, bạn có thể truy cập vào trang WordPress của mình để xem hiệu ứng preload hoạt động.

Hiệu ứng preload bằng plugin WP Smart Preloader

Xem thêm: Top 5 plugin tạo hiệu ứng cho WordPress tốt nhất hiện nay

Phương pháp 2: Thêm Preloader Animation vào WordPress bằng LoftLoader

Một cách khác để thêm hiệu ứng preload vào trang web WordPress đó là sử dụng LoftLoader. Plugin này đi kèm với những hiệu ứng tích hợp sẵn và cho phép bạn tùy chỉnh preload theo nhiều cách khác nhau.

Đầu tiên, bạn cần cài đặt và kích hoạt plugin LoftLoader.

Sau khi kích hoạt, vào Settings > LoftLoader Lite để cấu hình các thiết lập plugin. LoftLoader Lite tích hợp với trình tùy chỉnh theme WordPress, do đó giao diện này sẽ khá quen thuộc với bạn.

Để bắt đầu, nhấp vào Display on. Trên màn hình này, bạn có thể chọn việc sử dụng cùng một preload trên toàn bộ blog WordPress hoặc chỉ trên trang chủ.

Ví dụ, nếu trang chủ của bạn có nhiều hình ảnh và video so với các trang khác của website, khi đó bạn có thể lựa chọn hiển thị preload chỉ trên trang chủ.

Tùy chỉnh hiệu ứng preload trong WordPress

Sau khi chọn xong, nhấp vào mũi tên Back để trở lại trang cài đặt chính.

Tiếp theo, nhấp vào tùy chọn Background.

Tại đây, bạn có thể thay đổi màu nền bằng cách nhấp vào ô Pick Color. Đồng thời bạn cũng có thể thay đổi độ mờ của nền và chọn hiệu ứng kết thúc mới như Fade hoặc Slide Up & Down.

Khi đã thay đổi, bản xem trước sẽ cập nhật, vì vậy bạn có thể thử nghiệm các cài đặt khác nhau để xem cái nào phù hợp nhất. Khi đã hài lòng với cài đặt nền, hãy nhấp vào mũi tên Back.

Tiếp theo, bạn có thể thay đổi hiệu ứng bằng cách nhấp vào tùy chọn Loader.

Bạn có thể chọn một hiệu ứng mới bằng cách nhấp vào các hình thu nhỏ khác nhau trong ô Loader Animation. Để thay đổi màu sắc của preload, chỉ cần chọn một màu mới trong ô Pick Color.

Sau đó, nhấp vào mũi tên Back.

Tại giao diện đang hiển thị, hãy nhấp vào tùy chọn More. Ở đây, bạn có thể thay đổi thời gian mà hiệu ứng chạy bằng cách chọn Maximum Load Time.

Thay đổi thời gian tải tối đa trong preload

Sau đó, bạn có thể nhập vào thời gian mà preload sẽ chạy.

Bạn cũng có thể đưa ra cho người dùng một lựa chọn để đóng hiệu ứng, đặc biệt là nếu bạn đang sử dụng thời gian tải tối đa dài. Để thêm nút thoát, hãy nhấp vào Close Button và sử dụng các cài đặt để cấu hình nút thoát theo ý thích.

Khi bạn hài lòng với cách thiết lập nút thoát, chỉ cần nhấp vào nút Pulish để page preloader bắt đầu hoạt động. Bây giờ, bạn có thể truy cập vào trang web của mình để xem hiệu ứng preload mới.

Với phương châm “Lấy sự thành công của khách hàng làm mục tiêu” hạ tầng và nhân lực là hai yếu tố Vietnix luôn chú trọng đầu tư nên khi sử dụng dịch vụ tại đây khách hàng chỉ cần an tâm phát triển website WordPress và tập trung vào vấn đề cốt lõi mà không cần lo lắng về những vấn đề kỹ thuật, tốc độ hay chất lượng dịch vụ.

Tính đến thời điểm hiện tại Vietnix tự hào vì đã đạt được những con số ấn tượng như sau mà khách hàng có thể hoàn toàn an tâm khi sử dụng dịch vụ:

Hơn 50.000 khách hàng.
97% khách hàng đánh giá 5* và giới thiệu dịch vụ sau khi sử dụng.
89% khách hàng duy trì dịch vụ đến thời điểm hiện tại.
Hơn 100.000 dịch vụ được kích hoạt.

Mọi vấn đề thắc mắc cần tư vấn, quý khách vui lòng liên hệ:

Địa chỉ: 265 Hồng Lạc, Phường 10, Quận Tân Bình, Thành Phố Hồ Chí Minh
Hotline: 1800 1093
Email: sales@vietnix.com.vn

Lời kết

Như vậy, Vietnix đã hướng dẫn cho bạn hai cách để thêm Preloader Animation vào WordPress. Với việc thêm hiệu ứng này, website của bạn sẽ trông chuyên nghiệp và thân thiện với người dùng hơn, giảm tỷ lệ thoát trang hiệu quả. Đừng quên theo dõi thêm các bài viết khác của Vietnix để cập nhật những kiến thức hữu ích.