Chúng tôi đã sử dụng khuôn khổ Genesis từ Studiopress cho trang web này từ năm 2012. Một trong những tính năng quan trọng nhất bị thiếu trong khuôn khổ Genesis là infinite scrolling.

Thành thật mà nói, tôi đã không thấy bất kỳ thay đổi lớn nào trong các tùy chọn chủ đề hoặc bất kỳ tính năng chính mới nào trong 5-6 năm qua. Tôi ước nhóm Studiopress áp dụng nhanh chóng và thêm nhiều tùy chọn, tính năng và khả năng tùy chỉnh vào khuôn khổ (mà không cần chạm vào mã) để cạnh tranh với các đối thủ như Generatepress.

Tôi đã đợi rất lâu cho infinite scroll on Genesis nhưng nó vẫn chưa chính thức ra mắt. Vì vậy, tôi quyết định xây dựng một cái cho chính mình và cho tất cả mọi người. Tất nhiên, nó hoàn toàn miễn phí và mã nguồn mở.

Infinite Scroll for Genesis

Có một số plugin WordPress đã có sẵn để cho phép cuộn vô hạn cho bất kỳ chủ đề WordPress nào. Nhưng vấn đề với những plugin đó là, chúng không được xây dựng dành riêng cho khuôn khổ Genesis. Để các plugin đó hoạt động, bạn phải xác định thủ công class’es và bạn phải có kiến ​​thức cơ bản về HTML, CSS và phần tử Kiểm tra.

Giải quyết tất cả những vấn đề này, tôi đã xây dựng Infinite Scroll for Genesis WordPress plugin.

Tải xuống plugin

Bạn chỉ cần cài đặt và kích hoạt plugin trên trang web WordPress của mình đang chạy trên khuôn khổ Genesis và bạn đã sẵn sàng. Bạn cũng có rất nhiều tùy chọn linh hoạt để bật / tắt cuộn vô hạn trên lưu trữ bài đăng, lưu trữ thẻ, lưu trữ danh mục, lưu trữ tác giả, kết quả tìm kiếm, v.v.

Cách bật tính năng cuộn vô hạn trên chủ đề con của Genesis

Sử dụng Infinite scroll for Genesis rất dễ dàng và không yêu cầu kiến ​​thức mã hóa. Hãy xem làm thế nào để làm điều đó một cách nhanh chóng và chính xác.

Các bước để thêm cuộn vô hạn trên các chủ đề WordPress chạy trên Genesis Framework

Bước 1: Cài đặt và kích hoạt Infinite Scroll for Genesis Cắm vào

Plugin Infinite Scroll cho Genesis có sẵn trên thư mục plugin WordPress. Vì vậy, bạn có thể cài đặt nó trực tiếp từ trang web WordPress của mình.

Từ menu Quản trị trang bên trái, di chuột vào Plugins và bấm vào Add New. Bây giờ tìm kiếm Infinite Scroll for Genesis. Từ kết quả tìm kiếm, hãy chọn kết quả từ tác giả Amar Ilindra và nhấp vào nút Install Now.

Sau khi plugin được cài đặt, hãy nhấp vào Kích hoạt để bật plugin.

Bước 2: Định cấu hình Plugin

Khi plugin được cài đặt và kích hoạt, bạn sẽ thấy Infinite Scroll bên trong menu Cài đặt.

Bên trong Configure, bạn sẽ tìm thấy các tùy chọn sau. Định cấu hình chúng tùy thuộc vào sở thích của bạn.

  1. Bạn có thể thêm cuộn vô hạn tại các vị trí sau trong Enable Infinite Scroll On lựa chọn.
    • Trang chủ
    • Blog
    • Thể loại Lưu trữ
    • thẻ ghi lưu trữ
    • Lưu trữ tác giả
    • kết quả tìm kiếm
  2. Bạn có thể tải thêm bài đăng khi nhấp vào nút Tải thêm hoặc tự động khi người dùng cuộn đến cuối bài đăng cuối cùng. Bạn có thể chọn nó trong Load more posts.
  3. Chọn kiểu hoạt ảnh tải bên dưới Loading Animation Style. Bạn có 10 hình ảnh động đẹp để lựa chọn.
  4. Vì mỗi trang web đều có tùy chọn màu sắc riêng, bạn có thể đặt màu nút và tải màu hoạt ảnh trong Animation and Button color.
  5. Cái cuối cùng là Priority mà bạn có thể để làm mặc định. Chỉ tăng hoặc giảm mức độ ưu tiên khi bạn nhận thấy các vấn đề về giao diện người dùng trong khi tải các bài đăng với cuộn vô hạn.

Infinite Scroll for Genesis WordPress Plugin Settings

Bước 3: Lưu cấu hình

Sau khi định cấu hình các tùy chọn, hãy nhấp vào nút Cập nhật Cấu hình để lưu cài đặt. Nếu bạn không chắc chắn mỗi hoạt ảnh trông như thế nào, bạn có thể kiểm tra bản xem trước tại Help hoặc từ hình ảnh bên dưới.

Infinite Scroll cho Genesis Animations Preview

Bước 4: Kiểm tra kỹ lưỡng trang web của bạn

Bạn đã hoàn tất cài đặt plugin. Đã đến lúc thử nghiệm.

Kiểm tra kho lưu trữ trang web của bạn và kiểm tra xem mọi thứ có hoạt động như đã định cấu hình hay không. Khi có nhiều bài đăng hơn được hiển thị, thì URL trong thanh địa chỉ sẽ tự động thay đổi thành trang tương ứng của nó như /page/2.

Ngoài ra, các URL được phân trang thông thường của bạn (/ page / 2, / page / 3, v.v.) vẫn hoạt động bình thường rel=prerel=next, làm cho nó có thể chia sẻ và thân thiện với SEO.

Cuộn vô hạn thân thiện với SEO cho Genesis

Thông tin plugin và bản trình diễn trực tiếp

Plugin được tối ưu hóa rất tốt mà không có CSS ​​và tệp hình ảnh bổ sung trên giao diện người dùng. Tất cả các hoạt ảnh đang tải được hiển thị bằng CSS nội tuyến thuần túy without ảnh gif. Ngoài ra, các bài đăng đơn lẻ của bạn không bị ảnh hưởng nên không ảnh hưởng đến thời gian tải trang và hiệu suất.

Nếu bạn đang tự hỏi làm thế nào plugin thực sự hoạt động trên các trang web, bạn có thể kiểm tra bản demo trực tiếp tại đây. Toàn bộ mã nguồn của plugin là nguồn mở và có sẵn trên GitHub.

Sự kết luận

Cuộn vô hạn là một trải nghiệm người dùng rất tốt chỉ khi bạn không có thông tin quan trọng trên chân trang trang web của mình. Đôi khi có thể gây khó chịu khi người dùng cố gắng truy cập phần chân trang của trang web của bạn nhưng cuộn vô hạn tiếp tục hiển thị các bài đăng bổ sung phá vỡ luồng của họ.

Nếu người dùng của bạn cần xem thông tin chân trang, bạn phải sử dụng infinite scroll on button click. Vì vậy, nếu người dùng muốn đọc thêm bài viết, họ có thể nhấp vào nút Tải thêm hoặc họ có thể cuộn từ cuối đến chân trang mà không bị gián đoạn.

Tuy nhiên, nếu trang web của bạn nhỏ mà không có bất kỳ thông tin quan trọng nào ở dưới cùng, bạn có thể tải bài đăng tự động khi cuộn để khiến người dùng ở lại trang web của bạn nhiều thời gian hơn.