Chào các bạn, chắc hẳn các bạn đang làm việc chăm chỉ để cải thiện trải nghiệm người dùng trên trang web nhằm giữ chân các khách hàng của mình đúng không nào? Trong trường hợp này, có một cải tiến rất tuyệt vời mà các bạn nên thử đó là cuộn vô hạn.
Cuộn vô hạn là một kỹ thuật thiết kế web có chức năng tự động tải nội dung trang tiếp theo của bạn khi người dùng đến cuối trang. Nó cho phép người dùng xem thêm nội dung trên blog của bạn mà không cần nhấp vào số phân trang hay nút “Tải thêm” trên trang web.
Trong bài viết này, chúng tôi sẽ chỉ cho bạn từng bước để dễ dàng thêm cuộn vô hạn trên blog WordPress của bạn.
Cuộn vô hạn là gì?
Cuộn vô hạn là xu hướng thiết kế web sử dụng tải trang AJAX thay vì điều hướng trang bằng số để tự động tải nội dung trang tiếp theo của bạn và hiển thị ở cuối trang hiện tại. Cuộn vô hạn giúp dễ dàng duyệt nội dung hơn bằng cách cuộn xuống. Nó tải nội dung liên tục và vô tận khi người dùng vẫn tiếp tục cuộn.
Theo cách truyền thống, người dùng sẽ phải nhấp vào các nút hoặc số trang tiếp theo để xem các bài viết cũ hơn.
Khi sử dụng AJAX short cho Asynchronous Javascript và XML, các trang web có thể giao tiếp với máy chủ mà không cần tải lại toàn bộ trang. Nó cho phép các ứng dụng web xử lý các yêu cầu của người dùng và cung cấp dữ liệu mà không cần làm mới.
Các ví dụ tốt nhất về thiết kế cuộn vô hạn là các trang mạng xã hội phổ biến như Facebook, Twitter, Instagram, Pinterest, v.v. Nếu bạn đang sử dụng bất kỳ trong các trang này, bạn sẽ biết cách tải nội dung vô tận trên dòng thời gian của mạng xã hội.
Cuộn vô hạn có phù hợp cho tất cả các loại website không?
Có rất nhiều trang web trên Internet đang sử dụng kỹ thuật cuộn vô hạn để cải thiện trải nghiệm duyệt web và tăng sự tương tác. Điều này dẫn đến nhiều người mới bắt đầu đặt câu hỏi như: nó có phù hợp với mọi trang web, hay nó tốt cho trang web của mình hay không?
Cuộn vô hạn rất tuyệt vời đối với các trang web trình bày nội dung trong dòng thời gian (timeline) hoặc nguồn cung cấp (feed) ví dụ như các ứng dụng phương tiện truyền thông xã hội. Nó cung cấp trải nghiệm duyệt tuyệt vời cho người dùng đang tìm kiếm nội dung dựa trên thời gian.
Tiếp theo, sẽ cực kì hoàn hảo nếu bạn thiết kế cuộn vô hạn cho các thiết bị di động và cảm ứng. Đối với người dùng di động, cuộn thân thiện với người dùng hơn là nhấn vào các liên kết trang nhỏ.
Ưu điểm lớn nhất nhất của cuộn vô hạn là trải nghiệm duyệt mượt mà, người dùng của bạn không cần nhấp phải vào liên kết phân trang theo cách thủ công. Cuộn vô hạn sẽ giúp cho nội dung trang web của bạn được tải một cách nhanh chóng, điều đó giúp khách hàng tiếp tục sử dụng trang web.
Nhưng mặt khác, nó cũng có thể làm cho điều hướng trang web của bạn khó khăn hơn. Với việc tải liên tục, thật khó để tìm ra bài viết blog ở đâu (trên trang nào). Một số người dùng thậm chí thấy không thích khi thấy nhiều bài viết cùng một lúc.
Một nhược điểm khác của cuộn vô hạn là bạn không thể có chân trang (footer). Cho dù bạn có đi nữa thì nó cũng sẽ được ẩn dưới các vô tận bài viết được tải liên tục. Nhiều trang web thêm các liên kết thiết yếu trên chân trang, vì vậy việc không có footer có thể làm một số người dùng cảm thấy thất vọng.
Có lẽ vấn đề đáng phải xem xét nhất với cuộn vô hạn là nó có thể làm chậm trang web của bạn hoặc thậm chí làm sập máy chủ. Khi chúng tôi thêm cuộn vô hạn vào một trong những blog nhỏ hơn của chúng tôi, chúng tôi đã gặp sự cố máy chủ sau khi người dùng cuộn không cần thiết gây cạn kiệt bộ nhớ trên tài khoản lưu trữ nhỏ WordPress hosting . Chúng tôi khuyên bạn nên sử dụng managed WordPress hosting nếu như bạn muốn thử cuộn vô hạn.
Bây giờ thì bạn đã biết những ưu và nhược điểm của thiết kế cuộn vô hạn, bạn có thể quyết định xem bạn có cần thêm nó vào blog của mình hay không.
Nếu bạn đã quyết định thêm cuộn vô hạn vào blog WordPress của mình, thì bạn có thể dễ dàng làm điều đó. Chúng tôi sẽ cung cấp cho bạn nhiều plugin mà bạn có thể sử dụng, vì vậy bạn có thể chọn một plugin phù hợp nhất với nhu cầu của mình.
Video Hướng Dẫn
Nếu như bạn không thích video này hay muốn tìm hiểu nhiều lựa chọn hơn, hãy tiếp tục đọc bài viết của chúng tôi.
Cách tạo cuộn vô hạn (Infinite Scroll) trên WordPress
Thêm cuộn vô hạn với Catch Infinite Scroll
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Catch Infinite Scroll . Để biết rõ hơn, 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.
Khi kích hoạt, WordPress sẽ thêm một mục menu mới có nhãn ” Catch Infinite Scroll “, vào bảng quản trị WordPress của bạn. Bạn cần nhấp vào nó để tùy chỉnh plugin.
Đầu tiên, bạn cần thiết lập cách để tải nội dung mới. Plugin cho phép bạn chọn cách tải nội dung mới bằng cách cuộn hoặc là thêm nút “Tải thêm“.
Bạn nên chọn Scroll để kích hoạt tự động tải khi cuộn. Ngoài ra, bạn có thể chọn Click nếu bạn muốn thêm nút ” Tải thêm “.
Tiếp theo, bạn có thể thấy bộ chọn điều hướng, bộ chọn tiếp theo, bộ chọn nội dung và bộ chọn mục. Bạn không cần phải thay đổi gì trên các tùy chọn này vì các tùy chọn mặc định hoạt động khá tốt.
Sau đó, có một tùy chọn Hình ảnh nơi bạn có thể thêm biểu tượng trình tải nội dung. Theo mặc định, nó có một hình ảnh GIF loader. Nếu bạn có một hình ảnh tốt hơn thì bạn có thể thay đổi nó.
Tùy chọn Finish Text bao gồm thông báo sẽ được hiển thị sau khi người dùng hoàn thành việc xem bài viết của bạn. Theo mặc định, văn bản cho biết ‘ Không còn mục nào để hiển thị ‘. Bạn có thể dễ dàng chỉnh sửa văn bản này khi cần.
Sau khi hoàn tất, bấm vào nút Save Changes .
Vậy là xong! Cuộn vô hạn hiện đang hoạt động trên blog của bạn. Bạn có thể truy cập blog của mình và xem hoạt động của cuộn vô hạn.
Một số plugin khác dành cho cài đặt cuộn vô hạn
Catch Infinite Scroll hoạt động tốt với hầu hết các Giao diện WordPress ; tuy nhiên, nó có thể không hoạt động với một số giao diện. Trong trường hợp này, bạn có thể sử dụng bất kỳ plugin WordPress cuộn vô hạn nào sau đây.
1. Ajax Load More
Tương tự như Catch infinite Scroll, Ajax Load More plugin cũng cho phép bạn thêm cuộn vô tận và các nút ‘ Load More ‘ trên trang web WordPress của bạn.
Plugin cung cấp nhiều tùy chọn tùy chỉnh hơn, bao gồm nhiều kiểu biểu tượng tải trang, kiểu nút, v.v … Để có hướng dẫn chi tiết, bạn có thể xem hướng dẫn của chúng tôi về cách tạo nút tải thêm bài đăng trong WordPress creating a load more posts button in WordPress bằng cách sử dụng plugin Ajax.
Tuy nhiên, plugin có một số chức năng khó sử dụng cho người mới bắt đầu. Nó có giao diện nâng cao với nhiều tùy chọn, bao gồm các mẫu lặp lại, trình tạo mã ngắn, truy vấn WordPress và hơn thế nữa.
Nó sẽ yêu cầu một số kỹ năng mã hóa code để áp dụng cuộn vô hạn với plugin này.
2. YITH Infinite Scrolling
YITH Infinite Scrolling là một lựa chọn thay thế cho Ajax Load More hoặc Catch plugin Infinite Scroll.
Tương tự như plugin Catch Infinite Scroll, nó có các tùy chọn tối thiểu để thiết lập tương tác web dựa trên cuộn vô hạn. Bạn chỉ cần cài đặt và kích hoạt plugin và cho phép cuộn vô hạn.
Bất cứ ai, kể cả người mới bắt đầu, đều có thể dễ dàng thiết lập cuộn vô hạn bằng cách sử dụng plugin này. Tuy nhiên, nó không có tùy chọn nút ‘Tải thêm’ như là hai plugin trên.
Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm thiết kế cuộn vô hạn vào blog WordPress của bạn. Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách theo dõi độ sâu cuộn trong WordPress how to add scroll-depth tracking in WordPress.
Nếu bạn thích bài viết này, hãy theo dõi YouTube Channel của chúng tôi để xem thêm các video hướng dẫn WordPresss. Bạn cũng có thể theo dõi chúng tôi trên Twitter và Facebook.