Trang chủ Thư viện Wordpress Thêm tính năng infinite scroll cho WordPress

Thêm tính năng infinite scroll cho WordPress

Ở bài viết trước chia sẻ cách tạo thêm trang tính năng xem tất cả sản phẩm trong WooCommerce và kết thúc bài viết có nhiều vấn đề cần giải quyết mà mình hứa sẽ giải quyết triệt để với bài viết hướng dẫn thêm tính năng infinite scroll cho trang WordPress

Infinite Scroll là hiệu ứng tải các bài viết kế tiếp bằng kỹ thuật AJAX sau khi cuộn trang tới một vị trí nào đó, chẳng hạn như kéo tới chân trang nó sẽ hiển thị các bài tiếp theo mà không cần bấm sang trang tiếp. Với hiệu ứng này không ít thì nhiều nó giúp trang web của bạn tải nhanh hơn.

Có nhiều plugin hỗ trợ bạn thực hiện điều đó và ở đây mình lựa chọn plugin có tên YITH Infinite Scrolling (https://wordpress.org/plugins/yith-infinite-scrolling/). Bạn tiến hành cài đặt bình thường và sau khi cài đặt thành công bạn sẽ tiến hành thiết lập một số thông số như hình dưới đây:

YITH-Infinite-Scrolling

  • Enable Infinite Scrolling: Bật / Tắt tính năng Infinite scrolling.
  • Navigation Selector: Thông tin (class hoặc ID) định danh cho thẻ bao thanh chia trang.
  • Next Selector: Thông tin (class hoặc ID) định danh cho nút lệnh bấm chuyển sang trang tiếp theo.
  • Item Selector: Thông tin (class) định danh cho thẻ bao khối bài viết (hoặc sản phẩm).
  • Content Selector: Thông tin (class hoặc ID) định danh cho thẻ bao vùng hiển thị danh sách bài viết (sản phẩm)
  • Loading Image: Hình sẽ hiển thị trong quá trình chờ tải dữ liệu.

Sau khi điền xong đầy đủ các thông tin bạn bấm nút Save Changes để thay đổi có hiệu lực.

Đó là cách thiết lập thông thường và trở lại với thông tin như bài viết trước thì ta cần xây dựng một trang riêng để chạy tính năng hiển thị tất cả. Vậy giải pháp vẫn sẽ truyền thêm tham biến show=all để phân biệt và ta sẽ phải can thiệp vào mã code để chèn thêm class cho nút lệnh chuyển sang trang tiếp theo (Next Selector) – thẻ class này sẽ dùng để khai báo trong phần tùy chỉnh của plugin. Mô tả mã như sau:

Vậy là mỗi khi bạn vào trang web có tham biến show=all thì class này mới xuất hiện và tính năng infinite scroll mới được kích hoạt. Và dĩ nhiên các tính năng lọc vẫn sẽ chạy bình thường tuy nhiên bạn cũng cần phần can thiệp tý mã để mọi thứ trở nên hoàn hảo. Việc đó chắc phải tùy vào từng trang web mà ta sẽ can thiệp mã theo các code cụ thể nên mình không thể viết tường minh ở đây.

Trên đây là hướng dẫn của mình. Tại phần giải thích các thông số điền vào tại trang tùy chỉnh của plugin có thể nhiều bạn khó hiểu vì thật sự rất khó để mình dịch ra từ tiếng Anh sang tiếng Việt sát nghĩa để bạn hiểu nên mong các bạn thông cảm. Thật ra thực tế nó rất đơn giản.

Trên đây chỉ là hướng dẫn chung nên có thể một trường hợp sẽ có nhiều vấn đề mới phát sinh. Nếu gặp trường hợp đó các bạn có thể liên lạc với mình. Mình sẽ kiểm tra và đưa ra giải pháp nếu mình biết cách.

Chúc các bạn thành công.

Huỳnh Mai Anh Kiệt

 

- Advertisement -
Huỳnh Mai Anh Kiệthttps://www.mangbinhdinh.vn
Anh là một người đam mê công nghệ. Hiện tại anh là một lập trình viên tại Quy Nhơn.

1 BÌNH LUẬN

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

BÀI VIẾT MỚI

Tùy chỉnh con trỏ chuột cho trang web WordPress của bạn với Hura Custom Cursors

Thời gian rãnh rỗi ở nhà không biết làm gì nên viết thêm 1 plugin mới có tên Hura Custom Cursors. Đây là plugin...

Bản Đồ Danh Sách Dịch Vụ Bán Hàng Mang Đi Tỉnh Bình Định

Số là vừa rồi Sở Thông tin và truyền thông Bình Định (S4T) cho ra mắt trang bản đồ dịch vụ bán hàng mang...

Cách tra cứu điểm thi tốt nghiệp THPT tỉnh Bình Định năm 2021 bằng Zalo

Theo thông tin từ Sở Thông tin và Truyền thông tỉnh Bình Định, các bậc phụ huynh và thí sinh ở Bình Định có...

Các kênh thông tin trực tuyến đáng tin cậy để theo dõi tình hình dịch bệnh COVID-19 tại Bình Định

Tình hình dịch bệnh COVID-19 trên địa bàn tỉnh Bình Định đang diễn biến phức tạp. Sau một thời gian dài không ghi nhận...

Hình ảnh trường Đại học Quy Nhơn trước 1975

Trường Đại học Quy Nhơn là một trong ba trường đại học đa ngành đứng đầu về đào tạo tại miền Trung Việt Nam....

BẠN XEM CHƯA

Ẩn nhanh các biểu tượng trên màn hình desktop

Bạn không muốn người khác thấy nhưng biểu tượng trên màn hình desktop cũng như những ứng đang chạy trên thanh Taskbar. Tiện ích...

Khắc phục các sự cố về các ứng dụng trên Windows 8

Nếu bạn đã thực hiện việc nâng cấp hệ điều hành máy tính của mình lên Windows 8 từ hệ điều hành Windows 7...

Thiết lập tính năng theo dõi lịch sử tìm kiếm trên trang web bằng Google Analytics

Bạn có chức năng tìm kiếm trên trang web và bạn muốn kiểm tra xem khách hàng của mình đã tìm kiếm gì trên...

Kinh nghiệm đánh tiến lên chặt heo miền nam

Tiến lên thực ra là một trò chơi khá đơn giản, không có quá nhiều quy tắc, luật chơi cầu kì, nhưng để trờ...

Kiểm tra hiệu năng và bảo mật của trang web với công cụ trực tuyến mới từ Microsoft – Sonar

Mới đây nhóm phát triển Edge của Microsoft vừa cho ra mắt một công cụ trực tuyến mới mang tên Sonar. Sonar là công...