Xây dựng chức năng load more content trong wordpress sử dụng ajax

Xây dựng chức năng load more content trong wordpress sử dụng ajax

Ngày 20 - 09 - 2018 - Tại chuyên mục: Webmaster, Wordpress - Lượt xem: 14972

Chào các bạn! Trở lại với chủ đề ajax trong wordpress. Hôm này mình sẽ hướng dẫn cho các bạn làm một chức năng khá hay đó là: Load more content trong wordpress. Nghe tên load more content chắc chắn bạn cũng đoán được chức năng của nó rồi phải không? Chức năng này giúp bạn tải thêm dữ liệu mà ko cần cần phải load lại trang.

Bài toàn ví dụ:

Ở trang chủ chúng ta hiển thị 10 bài viết mới nhất và hiện 1 nút button xem thêm. Mỗi khi click vào nút button đó thì no sẽ tải thêm 5 bài viết, cho đến khi hết bài viết thì button xem thêm không hiển thị nữa!

Phân tích bài toán:

Bước 1: Để get 10 bài viết ra trang chủ chúng ta dùng New wp_query để get viết vào file index.php của theme.

Bước 2: Mỗi khi click vào button xem thêm chúng ta dùng ajax gởi cho phía server số lượng bài viết đã hiển thị

Bước 3: Phía server xử lý dữ liệu, thực hiện get 5 bài viết và bỏ qua những bài viết đã hiển thị. Chúng ta dùng new wp_query kết hợp với tham số offset để loại bỏ những bài viết đã thị và trả dữ liệu về cho client.

Bước 4: Phía client nhận dữ liệu trả về và hiển thị.

Code chức năng load more content trong wordpress:

Code hiển thị 10 bài viết mới ra ngoài trang chủ. Các bạn chèn đoạn code sau vào file index.php của thêm đang dùng nhé!

Code jquery gọi ajax và gởi dữ liệu cho phía server. Các bạn có thể chèn đoạn code này trong cặp thẻ script và đặt nó ở file footer.php.

Chú ý vì đoạn code là là jquery nên các bạn phải nhúng jquery trước đoạn code này nha!

Đoạn code xử lý dữ liệu phía server. Các bạn chèn đoạn code sau vào file functions.php của theme đang dùng nhé!

Giải thích:

  • $offset = isset($_POST[‘offset’]) ? (int)$_POST[‘offset’] : 0; -> lấy số bài viết đã hiển thị từ phía client gởi lên, phía client gởi theo phương thức là post vì vậy chúng ta dùng $_POST để nhận dữ liệu
  • ‘post_status=publish&showposts=5&offset=’.$offset -> Phần này chúng ta lấy 5 bài viết và dùng tham số offset để loại bỏ số bài viết đã được hiển thị.

Video HD code chức năng load more content trong wordpress:

Đang cập nhật…

Tóm lại:

Bài viết hôm nay mình đã hướng dẫn cho các bạn cách cơ bản để thực hiện được chức năng load more trong wordpress. Đây là cách basic nhất, các bạn có thể nghiên cứu thêm để làm cho nó sống động hơn ví dụ như.  Tạo hiện ứng load khi click vào button xêm thêm, hoặc show dữ liệu chức hình ảnh thumbnail… Nếu các bạn chưa có kiến thức về lập trình wordpress và ajax trong wordpress thì có thể xem một số bài mình đã viết về nó dưới đây:

Chào thân ái và quyết thắng!

Huy Kira

Đam mê hóa học, ưng thi vào trường kinh tế... Đậu vào trường Sư phạm, quyết tâm đi dạy... Ra trường đi làm designer, tự học frontend, chuyển qua làm PHP, được công ty đào tạo laravel... Và hiện tại đang code react native(2015) => Fullstack ... ?? tối về viết blog... (Còn tiếp...)

23
  • Phước ĐtMình chưa hiểu đoạn này "Code jquery gọi ajax và gởi dữ liệu cho phía server. Các bạn có thể chèn đoạn code này trong cặp thẻ script và đặt nó ở file footer.php. Chú ý vì đoạn code là là jquery nên các bạn phải nhúng jquery trước đoạn code này nha!"

    Thích Trả lời 6 năm trước

    • Huy KiraÀ như vậy chắc là bạn chưa hiểu về ajax rồi! Bạn nên xem trước bài viết này để hiểu ajax trong wordpress là gì. Bài này mình có video hướng dẫn chắc bạn sẽ dễ hiểu hơn ! Ajax trong wordpress

      Thích Trả lời 6 năm trước

  • loanvới sản phẩm thì thế nào a

    Thích Trả lời 6 năm trước

    • Huy KiraVới sản phẩm dùng woo, thì chổ vòng lặp get post phải thêm thuộc tìn post_type = product

      Thích Trả lời 6 năm trước

  • Thái Nguyên WebChức năng khá hay với những nội dung dài thì thật sự hữu ích.

    Thích Trả lời 6 năm trước

  • Trong Nhancho mình hỏi làm sao ẩn nút load more khi không còn dữ liệu để load, mình đang áp dụng cho custom post type thì làm như thế nào? cảm ơn bạn!

    Thích Trả lời 5 năm trước

  • Tung??? Bài viết hay quá ạ cảm ơn anh

    Thích Trả lời 5 năm trước

  • ChivaSNhưng có vẻ nó không hoạt động đối vs quểy có orderby comment_count, date,name, ... admin nhỉ

    Thích Trả lời 5 năm trước

    • Huy KiraÀ cái đó phụ thuộc cậu lệ query thôi bạn!

      Thích Trả lời 5 năm trước

      • ChivaSCũng cách trên mà admin, chỉ thay query theo mới nhất thì thay bằng số lượng comment nhiều nhất, hoặc theo ngày, hoặc theo name mà admin, e nghĩ nó cũng query đúng chứ nhỉ

        Thích Trả lời 5 năm trước

  • Tuấn Phúc Nguyễnchả hiểu gì :( ai giải thích với

    Thích Trả lời 5 năm trước

  • BảoNếu chèn loadmore kiểu này thì các phần hiển thị ở footer coi như bỏ phải không nhỉ...vì đâu có thấy đâu :(

    Thích Trả lời 5 năm trước

  • BoyongMình muốn hiển thị một đoạn htlm khi nhấn tabs thì làm action gì bạn?

    Thích Trả lời 5 năm trước

  • Bình Phươnglàm cách nào để kiểm tra xem đã là cuối danh sách chưa để ẩn nút load more đi vậy anh

    Thích Trả lời 5 năm trước

  • Phan TuấnMình muốn gắn vào nhìu custom post type thì ntn Huy, hiện tại thì nó mặc định là post. Nếu mình thêm post_type='anything' thì lại mất cái load type post.

    Thích Trả lời 4 năm trước

  • Nguyễn Quang Cườngkhá hay nhưng nếu gửi dữ liệu cho phía server thì liệu có bị full server ko nhỉ?

    Thích Trả lời 4 năm trước

  • Tài Đoàncho em hỏi làm load more cho custom type như kiểu product thì sửa sao anh nhỉ?

    Thích Trả lời 4 năm trước

  • TuanStoreBạn có code nút xem thêm ở danh mục sản phẩm không. Tức là mình viết mô tả seo trong phần danh mục nhưng nó lại dài quá làm ảnh hưởng tới trải nghiệm người dùng. Mình cần thu gọn nó lại để khi người dùng muốn đọc thì ấn vào xem thêm, còn không thì nó ở trạng thái thu gọn để không ảnh hưởng tới việc xem sản phẩm. Thank you!

    Thích Trả lời 4 năm trước

  • Ho Ngoc TuChào anh ạ. E đang gặp vướng mắc, nhờ anh giúp đỡ ạ. E có một Loop (em gắn 1 nút like và nút like này chạy bằng jquery), 10 bài viết đầu được load ra thì e vẫn dùng nút like này bình thường. Nhưng các bài tiếp theo khi e dùng Jquery loadmore thì nút like này lại k dùng được nữa. Mong nhận được giúp đỡ từ anh ạ. Cảm ơn anh.

    Thích Trả lời 4 năm trước

AVT