Thêm hiệu ứng Infinite Scroll vào WordPress dễ dàng

infinitescroll-loading

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.

Hiệu ứng này nhìn chung sẽ giúp website bạn chuyên nghiệp hơn, dễ dàng đọc các bài kế tiếp mà không phải click nhiều lần. Nếu bạn quan tâm đến cách làm hiệu ứng tải trang Infinite Scroll thì bài viết này sẽ hướng dẫn bạn thêm hiệu ứng này dễ dàng bằng plugin có sẵn.

Nhược điểm của Infinite Scroll

Trước khi bắt tay vào làm, bạn cần nên biết qua một vài nhược điểm của Infinite Scroll để xem bạn có thích hợp sử dụng hay không.

  • Phụ thuộc vào Javascript, nó sẽ đơ nếu trình duyệt tắt Javascript.
  • Giảm tỷ lệ pageview của bạn.
  • Nếu bạn có nhiều nội dung, không nên dùng hiệu ứng này vì đôi khi khách cần nhảy đến một trang nào đó.
  • Không xem được footer của website.

Hướng dẫn cài Infinite Scroll vào WordPress

Ở bài này mình sẽ sử dụng plugin Infinite-Scroll, hãy tải về và cài vào website của bạn nhé.

Sau khi cài xong, hãy vào Settings -> Infinite Scroll bạn sẽ thấy như thế này:

infinitescroll-setting

Nếu bạn không hiểu các tham số tùy chọn trong đó thì cũng đừng lo lắng, mình sẽ giải thích ngay đây. Tất cả các tham số đó là nơi bạn nhập các vùng chọn CSS có trong theme để nó xác định được các phần tử trong theme.

Hãy nhớ rằng, ID (id=”xx”) sẽ viết dạng #ten-id, và class (class=”xxx”) sẽ được viết dạng .ten-class nhé nếu bạn chưa biết CSS.

Để biết từng vùng chọn, hãy dùng tính năng Inspect Element có trong Google Chrome để xem bằng cách ấn chuột phải lên từng phần và chọn Inspect Element.

Content Selector

Vùng chọn cho toàn bộ khu vực hiển thị nội dung bài viết mới ngoài trang chủ (và thường là nó sẽ giống ở các trang category, tag).

infinitescroll-content

Như ảnh thì mình có vùng chọn là #site-content .

Navigation Selector

Vùng chọn của khu vực phân trang trên theme, dù là phân trang dạng số hay dạng trang thường thì vẫn được nhé.

Như ảnh trên thì mình có vùng chọn là .navigation.

infinitescroll-navigation

Next Selector

Nút sang trang mới, hay đúng hơn là đường link bên trong khung phân trang.

Như ảnh trên thì mình có vùng chọn là .nav-links a

Item Selector

Vùng chọn CSS cho mỗi bài post ngoài trang chủ. Mỗi bài post nó đều có những class chung như ảnh.

infinitescroll-item

Như ảnh trên thì mình sẽ có vùng chọn là #site-content .post. Viết hai cấp như vậy cho khỏi sợ xung đột với các thành phần khác.

Nếu bạn dùng các theme mặc định thì không cần sửa lại vì mặc định nó đã điền sẵn rồi.

Sau khi nhập xong các vùng chọn, hãy ấn Save và ra trang chủ xem kết quả.

infinitescroll-loading

Khi hoạt động, nó sẽ ẩn nút phân trang của bạn đi và thay vào là hiệu ứng tải bài kế tiếp khi kéo xuống. Số bài tải ra sẽ bằng số bài hiển thị trên mỗi trang mà bạn có thể thiết lập trong Settings -> Reading.

Tham khảo plugin jQuery để làm thủ công

Nguồn: Thêm hiệu ứng Infinite Scroll vào WordPress dễ dàng | Thạch Phạm

Categories: Content Marketing, Digital Marketing, Google Ads, Kinh doanh, PHP, SEO, Server - Hosting, WordPress, WordPress Development, Wordpress Plugin, WordPress Theme, Wordpress Tutorial,
Tags: baemin, bán hàng online, bán hàng online trên facebook, bán hàng qua facebook, bán hàng quần áo, bán hàng thời trang, bán hàng trên baemin, bán hàng trên facebook, bán hàng trên fanpage, bán hàng trên grab, bán hàng trên marketplace, bán hàng trên now, bán hàng trên tiktok, báo cáo kết quả hoạt động kinh doanh, bí quyết kinh doanh online, bít tết Âu việt, black friday, buôn bán hàng thùng, buôn bán hàng thùng tuyển chọn, cách bán hàng online đắt khách, cách bán hàng trên marketplace, cách bán hàng trên tiktok, câu chuyện kinh doanh, câu chuyện thành công, chương trình khuyến mãi, công nghệ phần mềm bán hàng, cửa hàng cafe, cửa hàng minh tuấn mobile, cửa hàng phụ kiện, cửa hàng thời trang, cửa hàng thực phẩm, cửa hàng thực phẩm sạch, doanh số bán hàng, dox garage & coffee, dox garage & coffee, đăng ký bán hàng trên baemin, đăng ký bán hàng trên go food, đăng ký bán hàng trên grab, đăng ký bán hàng trên now, facebook, facebook pos, fanpage, file excel, file excel báo cáo kết quả kinh doanh, file excel quản lý kho, foodngon, go food, go jek, grab, halo mobile, khởi nghiệp, khởi nghiệp kinh doanh, khởi nghiệp kinh doanh thời trang, kinh doanh cafe, kinh doanh điện thoại, kinh doanh điện tử điện máy, kinh doanh đồ handmade, kinh doanh gì sau dịch, kinh doanh mỹ phẩm, kinh doanh mỹ phẩm online, kinh doanh nhà hàng, kinh doanh online, kinh doanh phụ kiện, kinh doanh quán cafe, kinh doanh shop thời trang, kinh doanh siêu thị mini, kinh doanh spa, kinh doanh thành công, kinh doanh thời trang, kinh doanh thời trang trẻ em, kinh doanh thực phẩm, kinh doanh thực phẩm sạch thành công, kinh doanh trên facebook, kinh doanh trên grab, kinh nghiệm bán hàng, kinh nghiệm kinh doanh, làm đồ handmade, lily shop, link kháng tài khoản quảng cáo, lụa tơ tằm bá minh, marketing online, mặt hàng dễ bán, mẹo bán hàng, mẹo bán hàng trên facebook, mẹo hay, ngày black friday năm 2020 là ngày nào?, now, now - foody, phầm mềm quản lý bán hàng miễn phí, phần mềm chốt đơn, phần mềm chốt đơn hàng, phần mềm miễn phí, phần mềm pos, phần mềm quản lý bán hàng, phần mềm quản lý bán hàng đáng tin cậy, phần mềm quản lý bán hàng miễn phí, phụ kiện ben & tony, phụ kiện ben & tony, phụ kiện hà xinh, quán cafe hiệu quả, quản lý cửa hàng, quản lý cửa hàng thời trang, quản lý nhà hàng, quản lý nhân viên, quản lý nhân viên cứng đầu, quản lý nhân viên thời vụ, quảng cáo thương hiệu, shop thời trang, shopee, siêu thị minimart, status, status bán hàng, status quảng cáo mỹ phẩm, stella spa, stt bán hàng online hài hước, stt tương tác bán hàng, t.u.s shop, tài khoản bị vô hiệu hóa, tài khoản facebook, tài khoản facebook bị vô hiệu hóa, tải miễn phí file excel quản lý kho, tăng doanh thu mùa black friday, thời trang kosta, thời trang mine, thời trang tú trần shop, thực phẩm sạch, thực phẩm sạch 02, thực phẩm sạch tâm an, thuê mặt bằng kinh doanh, tiki, tiktok, tú trần shop,
Hướng dẫn tối ưu từ cơ bản đến nâng cao
Chèn khung chat vào WordPress với Subiz
Tác giả

Bình luận

Leave a Message

Registration isn't required.

NguyenLp LarTheme