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: 1292

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... 😂😂 tối về viết blog... (Còn tiếp...)

11
  • 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 3 tháng 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 3 tháng trước

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

    Thích Trả lời 3 tháng 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 3 tháng 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 2 tháng 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 2 tháng trước

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

    Thích Trả lời 1 tháng 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 6 ngày trước

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

      Thích Trả lời 6 ngày 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 6 ngày trước

AVT