Infinite-Scroll - Plugin hỗ trợ thêm hiệu ứng Infinite Scroll vào WordPress

Thảo luận trong 'Wordpress Plugins' bắt đầu bởi PVS, 09/06/2018.

  • Google checker:
  1. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    9,352
    Đã được thích:
    6,232
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    SV
    Nơi ở:
    Huế
    Infinite-Scroll - Plugin hỗ trợ thêm hiệu ứng Infinite Scroll vào 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.

    Hiệu ứng này nhìn chung sẽ giúp website 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 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 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, cần biết qua một vài nhược điểm của Infinite Scroll để xem 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.
    • Nếu 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
    Đầu tiên hãy tải về và cài vào website nhé.

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

    infinitescroll-setting.jpg
    Nếu không hiểu các tham số tùy chọn trong đó thì cũng đừng lo lắng, bài viết sẽ giải thích ngay sau đây. Tất cả các tham số đó là nơi 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 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.jpg
    Như ảnh thì 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ì vùng chọn là .navigation.

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

    infinitescroll-navigation.jpg

    Như ảnh trên thì 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.jpg
    Như ảnh trên thì 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 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.jpg
    Khi hoạt động, nó sẽ ẩn nút phân trang đ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 có thể thiết lập trong Settings -> Reading.

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


    Nguồn: Thachpham​
     

    Các file đính kèm:

Chia sẻ trang này

Đang tải...