时间戳

首页 > 解决方案 > Wordpress 加载更多按钮不起作用。$wp_query 不返回最后一个循环查询

javascript - Wordpress 加载更多按钮不起作用。$wp_query 不返回最后一个循环查询

问题描述

-- 编辑 1 --

发现了一些新东西。我将它们添加到顶部，因为它们可能比下面的代码更相关。

我已经重新运行了几次脚本。我现在实际上得到了不同的发现。在 post 循环的第一次渲染中运行var_dump($wp_query->query);后$the_query = new WP_Query($queryArgs);立即为我提供了渲染循环的页面的查询变量。用 ajax 调用它会重新运行代码的相同部分，对吗？所以它返回空。

我的想法：

这让我思考。我是否以错误的顺序运行代码？ajax 的查询变量是否设置在错误的时刻？其他的想法。我是否应该专注于如何在第一个循环后获取查询变量到 ajax 查询变量？

-- 结束编辑 --

我在使用 Wordpress 中的加载更多按钮时遇到问题。下面的代码是我现在拥有的基本代码。据我所知，这应该是一个工作代码:) 问题是虽然这不起作用。

我的问题是我不知道从哪里开始调试。最近我知道问题出在哪里：

当 var_dumping rtt_loadmore_ajax_handler()var和_$queryArg$queryArgrtt_post_grid()rtt_loadmore_ajax_handler()

它给出了不同的结果。在这里，我希望得到相同的结果。在 Ajax 调用中，它返回当前呈现页面的参数，而不是该页面上的 post 查询的参数。

会global $wp_query;是问题吗？我该如何从这里出发？

基本邮政编码：

function rtt_post_grid()
{

    $queryArgs = Array(
        "post_type" => Array(
            'news',
            'agenda'
        ),
        'posts_per_page' => 4,
        'post_status' => 'publish',
        'paged' => 1
    );

    // post grid wrap
    echo '<div id="rtt_posts_wrap"  >';

        rtt_post_grid_query($queryArgs);

    echo '</div>';

    // load more button
    echo '<form>';
        echo '<button id="rtt_loadmore" class=" button">Load more post</button>  ';
        echo '<input type="hidden" name="action" value="loadmore" />'; // this line might be obsolete
    echo '</form>';
}

function rtt_post_grid_query($queryArgs)
{

    // The Query
    $the_query = new WP_Query($queryArgs);
    // The Loop
    if ($the_query->have_posts()) {
        echo '<ul>';
        while ($the_query->have_posts()) {
            $the_query->the_post();
            echo '<li>' . get_the_title() . '</li>';
        }
        echo '</ul>';
        /* Restore original Post Data */
        wp_reset_postdata();
    } else {
        // no posts found
        echo 'no posts found';
    }
}

设置JS：

if(!has_action('rtt_post_grid_script_and_styles')) {
    add_action('wp_enqueue_scripts', 'rtt_post_grid_script_and_styles', 1);

    function rtt_post_grid_script_and_styles()
    {
        global $wp_query;

        wp_register_script('rtt_scripts', plugin_dir_url( __FILE__ ) . 'js/script.js', array('jquery'), time());
        wp_enqueue_script('rtt_scripts');

        wp_localize_script('rtt_scripts', 'rtt_loadmore_params', array(
            'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
            'posts' => json_encode($wp_query->query_vars), // everything about your loop is here
            'current_page' => $wp_query->query_vars['paged'] ? $wp_query->query_vars['paged'] : 1,
            'max_page' => $wp_query->max_num_pages
        ));

        wp_enqueue_script('rtt_scripts');
    }
}

JS/Ajax：

jQuery(function($){

    $(window).ready(function() {

        $('#rtt_loadmore').click(function () {

            $.ajax({
                url: rtt_loadmore_params.ajaxurl,
                data: {
                    'action': 'loadmore', // the parameter for admin-ajax.php
                    'query': rtt_loadmore_params.posts, // loop parameters passed by wp_localize_script()
                    'page': rtt_loadmore_params.current_page, // current page
                },
                dataType: 'json',
                type: 'POST',

                beforeSend: function (xhr) {

                    $('#rtt_loadmore').text('Bezig met laden...'); // some type of preloader
                },
                success: function (data) {

                    if (data) {

                        $('#rtt_loadmore').text('More posts');

                        $('#rtt_posts_wrap').append(data.content); // insert new posts

                        rtt_loadmore_params.current_page++;

                        if (rtt_loadmore_params.current_page == rtt_loadmore_params.max_page){

                            $('#rtt_loadmore').hide(); // if last page, HIDE the button

                        }
                    } else {

                        $('#rtt_loadmore').hide(); // if no data, HIDE the button as well
                    }
                }
            });

            return false;
        });
    });
});

Ajax 处理程序：

add_action('wp_ajax_loadmore', 'rtt_loadmore_ajax_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore', 'rtt_loadmore_ajax_handler'); // wp_ajax_nopriv_{action}

function rtt_loadmore_ajax_handler(){

    $postData = $_POST;

    // prepare our arguments for the query
    $queryArgs = json_decode( stripslashes( $postData['query'] ), true );
    $queryArgs['paged'] = $postData['page'] + 1; // we need next page to be loaded
    $queryArgs['post_status'] = 'publish';

    ob_start();

    rtt_post_grid_query($queryArgs);

    $output = ob_get_contents();

    ob_end_clean();

    global $the_query;

    echo json_encode( array(
        'posts' => serialize( $the_query->query_vars ),
        'max_page' => $the_query->max_num_pages,
        'found_posts' => $the_query->found_posts,
        'content' => $output
    ) );

    die;
}

标签： javascriptphpajaxwordpress

解决方案

所以，我想通了。我会解释它可能对其他人有用。

它不起作用的原因是因为上面的代码在模板中更有用。但我在短代码中使用它。是在渲染页面时运行的wp_localize_script()，而不是在运行短代码时运行的。这就是为什么它没有正确的变量。

我已经将下面的代码移到了简码中。在新的 WP_query 之后：

// The Query
$the_query = new WP_Query($queryArgs);

// The Loop
if ($the_query->have_posts()) {

    wp_enqueue_script_ajax_vars($the_query);

比通过了新的查询

function wp_enqueue_script_ajax_vars($the_query)
{
wp_register_script('rtt_scripts', plugin_dir_url(__FILE__) . 'js/script.js', array('jquery'), time());

wp_localize_script('rtt_scripts', 'rtt_loadmore_params', array(
    'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
    'posts' => json_encode($the_query->query_vars), // everything about your loop is here
    'query_vars' => json_encode($the_query->query),
    'current_page' => $the_query->query_vars['paged'] ? $the_query->query_vars['paged'] : 1,
    'max_page' => $the_query->max_num_pages,
));

wp_enqueue_script('rtt_scripts', '', '', '', true); // note the last 'true' this sets it inside the footer
}

导致在wp_localize_script()页脚中创建变量。之前在标题中。但是通过在短代码中获取它，发送新的查询参数并将它们放在页脚中（因为那时页眉已经呈现）我已经为 Ajax 设置了 JS var。

推荐阅读