Question

我有一个有效的AJAX后加载程序，但我无法在类别页面上运行它。我究竟做错了什么？我想我没有正确地获得类别？

category.php代码：

<div id="ajaxCatPosts" class="cat-post-side left small-12 large-9">
    <?php 
    while ( have_posts() ) : the_post();
       include(__DIR__.'/views/cat-post-thumb.php');
    endwhile;
    ?>
    <div class="load-button">
       <button id="more_cat_posts">Veel uudiseid</button>
    </div>
</div>

functions.php代码：

function more_post_ajax(){

        $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 16;
        $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;

        header("Content-Type: text/html");

        $args = array(
            'suppress_filters' => true,
            'posts_per_page' => $ppp,
            'paged'    => $page,
        );

        $loop = new WP_Query($args);

        if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();

            include(__DIR__.'/views/cat-post-thumb.php');

        endwhile;
        endif;
        wp_reset_postdata();
        die($out);
    }

    add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
    add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

这是loadmore.js：

$(function() {
    var ppp = 16; // Post per page
    var pageNumber = 1;

    function load_posts(){
        pageNumber++;
        var str = '&pageNumber=' + pageNumber + '&ppp' + ppp + '&action=more_post_ajax';
        $.ajax({
            type: "POST",
            dataType: "html",
            url: ajax_posts.ajaxurl,
            data: str,
            success: function(data){
                var $data = $(data);
                if($data.length){
                    $("#ajax-posts").append($data);

                    $("#more_posts").attr("disabled",false);
                } else{
                    $("#more_posts").attr("disabled",true);
                }
            },
            error : function(jqXHR, textStatus, errorThrown) {
                $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
            }

        });
        return false;
    }

    $('#more_posts').unbind('click');

    $("#more_posts").on("click",function(){ // When btn is pressed.
        $("#more_posts").attr("disabled",true); // Disable the button, temp.
        load_posts();
    });
});

Answer 1

您的问题的答案似乎在documentation here。

具体来说，在拨打WP_Query之前，您需要指定所需的类别。您目前正在此处设置查询：

$args = array(
    'suppress_filters' => true,
    'posts_per_page' => $ppp,
    'paged'    => $page,
);

你需要将其扩展到：

$args = array(
    'category_name' => $category
    'suppress_filters' => true,
    'posts_per_page' => $ppp,
    'paged'    => $page,
);

这意味着您的AJAX调用需要在JSON中包含您想要的类别（`$ category），否则您必须从页面URL中提取它。一种方法是：

$args = array(
    'suppress_filters' => true,
    'posts_per_page' => $ppp,
    'paged'    => $page,
);
if (isset($_POST["category"]){
    $args['category_name'] = $_POST["category"];
}

相应地，您需要更新AJAX调用以获得类别元素：

var str = '&pageNumber=' + pageNumber + '&ppp' + ppp + '&action=more_post_ajax' + '&category=milk';

Answer 2

使用任何分类法或分类法组合使其更加动态，因此这种解决方案不仅适用于category.php，还适用于任何其他情况。例如，JS可以通过分类术语参数从哪里获取pposts。

首先，在你的AJAX调用中，我们需要传递我们想要加载帖子的术语，比如类别命名为milk。（还可以使POST参数更具可读性）

function load_posts(){
    pageNumber++;

    var str = {
        pageNumber: pageNumber,
        ppp: ppp,
        term: 'milk',
        action: 'more_post_ajax'
    };

    $.ajax({
        type: "POST",
        dataType: "html",
        url: ajax_posts.ajaxurl,
        data: str,
        success: function(data){
            var $data = $(data);
            if($data.length){
                $("#ajax-posts").append($data);

                $("#more_posts").attr("disabled",false);
            } else{
                $("#more_posts").attr("disabled",true);
            }
        },
        error : function(jqXHR, textStatus, errorThrown) {
            $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
        }

    });
    return false;
}

在您的PHP代码中

function more_post_ajax(){

    $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 16;
    $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;
    $term = isset($_POST['term']) ? $_POST['term'] : 0;

    header("Content-Type: text/html");

    $args = array(
        'suppress_filters' => true,
        'posts_per_page' => $ppp,
        'paged'    => $page,
        'tax_query' => array(
            array(
                'taxonomy' => 'category',
                'field'    => 'slug', // Depends whether JS passes you slug or ID of taxonomy term, in our case it is a slug
                'terms'    => array( $term ),
            )
        ),
    );

    $loop = new WP_Query($args);

    if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();

        include(__DIR__.'/views/cat-post-thumb.php');

    endwhile;
    endif;
    wp_reset_postdata();
    die();
}

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

您的WP_Query现在已经过硬编码，可以从category分类中进行搜索，其中的帖子具有与查询条件匹配的字词。您可以将其更改为您想要的任何内容，只有在您的参数中更改category时，您才能使用tax_query分类法。为了更安全，您可能需要先检查该分类中是否存在该术语。

Ajax类别后加载器

2 个答案: