Încărcare mai multor postări prin AJAX în WP Query

Question

Încărcare mai multor postări prin AJAX în WP Query

16 aug. 2017, 21:24:12

Vizualizări: 15K

Voturi: 3

Încerc să implementez un loop WP Query prin AJAX care să afișeze inițial 2 postări, apoi să folosească un buton 'Load more' pentru a încărca următoarea pagină de rezultate. Care este cea mai bună metodă, deoarece în prezent nu funcționează?

JavaScript

var ajaxRequest = function() {
    var filter = $('#filter');
    var page = 1; // Pagina curentă
    var ppp = 3; // Postări pe pagină
    $.ajax({
        url: filter.attr('action'),
        data: filter.serialize(),
        type: 'POST',
        dataType: 'json',
        offset: (page * ppp) + 1,
        ppp: ppp,
        success: function(response) {
            page++;
            $(".card-wrap").append(response); // Clasa containerului pentru postări
            $("#more_posts").attr("disabled", false);
        }
    });
};

PHP

<?php
    header("Content-type: application/json"); // Setăm header-ul pentru răspuns JSON
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];    
    $args = array(
        'order' => $_POST['date'],
        'post_type' => 'custom',
        'posts_per_page' => 2,
        'offset' => $offset,        
    );
    [Restul query-ului]
?>

HTML

<a id="more_posts" href="#">Încarcă mai mult</a>

scopeak

213

wp query jquery ajax

Comentarii

Consultă https://codex.wordpress.org/AJAX_in_Plugins

Swen

16 aug. 2017 21:51:40

Toate răspunsurile la întrebare

Comentarii

Mulțumesc! Foarte util, voi încerca să adaptez asta la funcția mea.

scopeak

17 aug. 2017 04:57:36

Jitender Singh 166 · Accepted Answer · 2017-08-17T00:46:09Z

Dacă dorești să utilizezi AJAX în WordPress, trebuie să urmezi acești pași:

1) Mai întâi creează fișierul tău JS, de exemplu main.js.

2) Localizează-l în functions.php folosind wp_localize_script().

wp_enqueue_script( 'main.js', get_template_directory_uri().'/js/main.js', array( 'jquery'  ) );
    wp_localize_script( 'main.js', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')) );

3) Creează codul tău JavaScript sau jQuery pentru a rula interogarea cu AJAX și în obiectul de date AJAX adaugă o proprietate action, de exemplu action: 'load_more_posts'. Această proprietate action va determina execuția unei funcții cu același nume pentru a rula codul nostru.

jQuery(function($){
    $('#load_more_posts').on('click', function(e){
        console.log('hi');
        e.preventDefault();
         var $offset = $(this).data('offset');
         console.log('var'+$offset);
        $.ajax({
            method: 'POST',
            url: ajax_object.ajax_url,
            type: 'JSON',
            data: {
                offset: $offset,
                action: 'load_more_posts'
            },
            success:function(response){
                console.log(response);
                $('#load_more_posts').data('offset', parseInt(response.data.offset));

            }
        }); 
    })
});

4) În functions.php

 add_action( 'wp_ajax_load_more_posts', 'load_more_posts' );
    add_action( 'wp_ajax_nopriv_load_more_posts', 'load_more_posts' );
    function load_more_posts(){
        global $post;
        $args = array('post_type'=>'post', 'posts_per_page'=> 2, 'offset'=> $_POST['offset']);
        $rst=[];
        $query = new WP_Query($args);
        if($query->have_posts()):
            while($query->have_posts()):$query->the_post();
                $rst[] = $post;
            endwhile;
            wp_reset_postdata();
            $offset = $_POST['offset']+2;
        endif;
        wp_send_json_success(array('post'=>$rst, 'offset'=>$offset));
    }

wp_ajax_nopriv_(action) se execută pentru utilizatorii care nu sunt autentificați. wp_ajax_(action) se execută pentru utilizatorii care sunt autentificați.

Poți utiliza răspunsul interogării după cum dorești. Sper că acest ghid te va ajuta!