Trong bài viết này, chúng ta sẽ tìm hiểu về lợi ích của hiệu ứng nạp trang và cách thêm hiệu ứng nạp trang trong WordPress.
Contents
Hiệu Ứng Nạp Trang là Gì?
Hiệu ứng nạp trang, hay ‘preloader animation’, thông báo cho người dùng biết trang đang được tải. Đây là một hiệu ứng đơn giản có thể được sử dụng như một chỉ báo tiến trình cho những trang chỉ tải một số phần nội dung.
Bạn đang xem: Hướng Dẫn Thêm Hiệu Ứng Nạp Trang (Preloader) trong WordPress
Khi Nào Nên Sử Dụng Hiệu Ứng Nạp Trang?
Nếu trang web của bạn chứa nhiều video hoặc hình ảnh và tốn nhiều thời gian để tải, sử dụng hiệu ứng nạp trang là một lựa chọn thông minh. Việc này giúp người dùng yên tâm rằng trang web của bạn hoạt động như dự định mà không bị lỗi.
Tuy nhiên, nếu trang web của bạn chủ yếu là văn bản, không cần thiết phải sử dụng hiệu ứng nạp trang. Thay vào đó, bạn nên tập trung vào việc cải thiện tốc độ tải trang.
Hai Phương Pháp Thêm Hiệu Ứng Nạp Trang trong WordPress
Có hai phương pháp chính để thêm hiệu ứng nạp trang trong WordPress. Bạn có thể sử dụng một plugin, đó là phương pháp dễ dàng hơn, hoặc thực hiện công việc thủ công. Dưới đây là cách bắt đầu với cả hai phương pháp.
Phương Pháp 1: Sử Dụng Plugin
Thêm hiệu ứng nạp trang thông qua một plugin là phương pháp nhanh và dễ dàng nhất đối với phần lớn người dùng. Có một số plugin bạn có thể sử dụng, nhưng chúng tôi khuyến nghị sử dụng WP Smart Preloader.
WP Smart Preloader là một plugin miễn phí, có thể tùy chỉnh cao. Nó sử dụng CSS và HTML tối thiểu để giúp giảm nguy cơ người dùng rời khỏi trang web của bạn trong quá trình tải nội dung. Tuy nhiên, plugin này chưa được kiểm tra với phiên bản mới nhất của WordPress, vì vậy bạn cần thử nghiệm nó trên môi trường phát triển cục bộ trước.
Dưới đây là cách thêm hiệu ứng nạp trang bằng plugin.
Bước 1: Tải Plugin WP Smart Preloader
Bạn có thể tải plugin WP Smart Preloader từ WordPress Plugin Directory. Sau đó, tải file .zip lên trang web WordPress của bạn bằng cách vào Plugins > Add New > Upload Plugin trong bảng điều khiển quản trị:
Một lựa chọn khác là tìm kiếm plugin thông qua thanh tìm kiếm trên trang Plugin > Add New:
Dù bạn chọn cách nào, khi plugin được cài đặt, hãy nhấp vào nút Activate. Tiếp theo, bạn có thể tìm các tùy chọn của nó trong mục Settings > WP Smart Preloader.
Bước 2: Chọn Kiểu Hiệu Ứng
Trên trang Cài đặt WP Smart Preloader, điều đầu tiên cần làm là chọn kiểu hiệu ứng cho hiệu ứng nạp trang. Dưới phần Select Preloader, bạn sẽ thấy một menu thả xuống cho phép bạn chọn từ sáu kiểu hiệu ứng khác nhau, cũng như một tùy chọn cho hiệu ứng tùy chỉnh:
Sau khi bạn chọn một kiểu hiệu ứng, bạn có thể xem trước nó trong cửa sổ bên dưới. Nếu bạn muốn thêm hiệu ứng tùy chỉnh của riêng mình, bạn có thể bao gồm mã HTML của bạn dưới phần Custom Animation:
Ở cuối trang này, bạn có thể thiết lập thời gian cho hiệu ứng và hiệu ứng ‘fade out’:
Xem thêm : Thiết kế website giới thiệu sản phẩm thu hút mọi khách hàng
Nếu bạn để trống các trường này, giá trị mặc định sẽ là 1500 miligiây (1.5 giây) và 2500 miligiây (2.5 giây) tương ứng. Khi bạn hoàn thành, hãy nhấp vào nút Save Changes.
Bước 3: Xem Trước Hiệu Ứng Nạp Trang Của Bạn
Sau khi bạn cấu hình xong các tùy chọn, hãy truy cập trang web WordPress của bạn trong một tab trình duyệt mới để xem trước hiệu ứng nạp trang. Bạn có thể quay lại để thay đổi kiểu dáng cần thiết. Khi bạn hài lòng với hiệu ứng nạp trang của mình, nó đã sẵn sàng hoạt động.
Phương Pháp 2: Thêm Hiệu Ứng Nạp Trang Bằng Tay
Nếu bạn không quan tâm đến việc sử dụng plugin, bạn vẫn có thể thêm tính năng này vào trang web của bạn bằng tay. Lợi ích chính của việc tạo ra một hiệu ứng nạp trang tùy chỉnh là bạn có nhiều linh hoạt hơn trong cách thiết kế nó.
Tuy nhiên, đây là quá trình khó khăn hơn. Tiếp theo, chúng tôi sẽ hướng dẫn bạn cách tạo, tải lên và định dạng hiệu ứng nạp trang tùy chỉnh cho trang web WordPress của bạn.
Bước 1: Lên ý tưởng cho Hiệu Ứng Nạp Trang
Bước đầu tiên là quyết định loại hiệu ứng nạp trang bạn sẽ sử dụng. Bạn có thể tìm hiểu các công cụ hiệu ứng nạp trang khác để có ý tưởng về kiểu dáng bạn thích. Có một số hiệu ứng miễn phí bạn có thể sử dụng và khám phá trên Codepen, đó có thể là một cách tuyệt vời để thu thập ý tưởng.
Bước 2: Tạo hoặc Tải Về Hiệu Ứng Nạp Trang Của Bạn
Để tạo hiệu ứng của bạn, bạn có thể sử dụng các công cụ như Photoshop để tạo GIF hoặc hiệu ứng quay tròn. Bạn cũng có thể tham khảo nguồn tài liệu của chúng tôi về việc tạo hiệu ứng trong WordPress bằng CSS.
Chúng tôi khuyến nghị sử dụng phương pháp sau, vì thêm một hiệu ứng nạp trang dạng GIF vào trang web WordPress của bạn tốt nhất bằng cách sử dụng plugin. Ngoài Codepen (đã đề cập ở trên), bạn cũng có thể tải hiệu ứng từ các trang web như Spinkit và LoadLab.
Cho bài viết này, chúng tôi sẽ sử dụng một hiệu ứng nạp trang từ Spinkit. Dù bạn lấy hiệu ứng từ đâu, bạn cần mã CSS của nó để thêm vào trang web WordPress của bạn:
Hầu hết các hiệu ứng nạp trang miễn phí sẽ bao gồm một liên kết nguồn, bạn có thể tìm thấy cả mã HTML và CSS của nó:
Hãy nhớ rằng bạn cũng có thể sử dụng mã CSS từ hiệu ứng nạp trang, sau đó sau đó tùy chỉnh nó theo ý thích của mình.
Bước 3: Tạo Một Chủ Đề Con
Sau khi bạn có hiệu ứng của bạn, bạn có thể thêm nó vào trang web WordPress của bạn. Cách an toàn nhất để làm điều đó là tạo một chủ đề con. Nếu bạn không biết cách làm điều đó, bạn có thể xem lại hướng dẫn của chúng tôi về cách tạo một chủ đề con WordPress.
Bước 4: Thêm Mã HTML vào Tệp header.php Của Chủ Đề
Xem thêm : Mua Themeforest Giá Rẻ 2023 – Đảm Bảo Chất Lượng với Giá Siêu Hấp Dẫn
Bước tiếp theo là tìm tệp header.php của chủ đề WordPress của bạn. Bạn có thể làm điều này thông qua màn hình Trình chỉnh sửa Chủ đề WordPress:
Bạn cũng có thể chỉnh sửa các tệp bằng một ứng dụng FTP như FileZilla. Tệp sẽ nằm trong thư mục wp-content > themes trong thư mục gốc của trang web của bạn.
Sau khi bạn tìm và mở tệp, chèn mã HTML sau dưới thẻ body:
<!-CSS Spinner-> <div class=”spinner-wrapper”> <div class=”spinner”></div> </div>
Điều chỉnh hoặc thêm bất kỳ mã HTML nào cần thiết cho hiệu ứng nạp trang WordPress riêng của bạn, sau đó lưu tệp.
Bước 5: Thêm Mã CSS vào Tệp stylesheet
Bây giờ là lúc thêm CSS để tạo kiểu cho hiệu ứng của bạn. Tìm tệp stylesheet CSS (style.css) của chủ đề WordPress của bạn, sau đó sao chép và dán mã CSS của bạn. Trong trường hợp này, chúng tôi sẽ thêm mã sau:
.spinner { margin: 100px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; } .spinner > div { background-color: #333; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }
Trước khi lưu các thay đổi của bạn, hãy xóa phần này: “margin: 100px auto;”. Thay vào đó, sao chép và dán đoạn mã sau:
position: absolute; top: 48%; left: 48%;
Sau đó, lưu tệp.
Bước 6: Thêm Mã jQuery để Hiệu Ứng Nạp Trang Hoạt Động
Để hiệu ứng nạp trang quay tròn của bạn hoạt động, bạn cần thêm một chút jQuery. Để làm điều đó, bạn có thể quay lại tệp header.php, và chèn đoạn mã sau trước thẻ đóng body:
<script> $(document).ready(function() { //Preloader preloaderFadeOutTime = 500; function hidePreloader() { var preloader = $(‘.spinner-wrapper’); preloader.fadeOut(preloaderFadeOutTime); } hidePreloader(); }); </script>
Sau đó, lưu tệp và xem trước trang web của bạn để đảm bảo hiệu ứng nạp trang WordPress hoạt động đúng như ý thích.
Đọc Thêm Hiệu Ứng Nạp Trang Tại WP Engine
Thêm hiệu ứng nạp trang WordPress vào trang web của bạn có thể giúp thu hút người dùng và giảm tỷ lệ thoát trang. Bên cạnh đó, bạn có nhiều lựa chọn để thực hiện công việc nhanh chóng.
Tại WP Engine, sứ mệnh của chúng tôi là cung cấp các mẹo, thủ thuật và nguồn tài nguyên cho người phát triển cũng như dịch vụ lưu trữ WordPress chất lượng cao để giúp bạn đảm bảo trang web của mình luôn trông tốt nhất. Tìm hiểu thêm về các gói dịch vụ của chúng tôi ngay hôm nay!
Nguồn: https://laptrinhc.edu.vn
Danh mục: Web