WordPress的loadmore按钮不起作用。 $ wp_query不返回上一次循环查询

时间:2019-01-21 09:46:49

标签: javascript php ajax wordpress

-编辑1-

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

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

我的想法:

  • 页面被调用,运行funtions.php。
  • 运行wp_enqueue_script('rtt_scripts');的一部分
  • 这是它获取当前$wp_query值的时刻。页面的值是什么。
  • 比使用post循环呈现页面。
  • 这是发布循环运行$the_query = new WP_Query($queryArgs);
  • 的时刻
  • 按下负载后,ajax会比调用它来重新运行post循环更多。使用wp_enqueue_script('rtt_scripts');
  • 设置查询变量

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

-结束编辑-

我在Wordpress中无法加载更多按钮。下面的代码是我现在拥有的基本代码。 据我所知,这应该是一个有效的代码:)问题是尽管这不起作用。

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

rtt_loadmore_ajax_handler()中有一个变量$queryArg 在var_dumping $queryArgrtt_post_grid()中的var rtt_loadmore_ajax_handler()

它给出不同的结果。在这里,我希望得到同样的结果。在Ajax调用中,它返回参数 当前呈现页面的大小,而不是此页面上的发布查询的大小。

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;
}

2 个答案:

答案 0 :(得分:0)

将两个顺序参数添加到$ queryArgs。

// 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';

$queryArgs['orderby'] = 'date'; // add this to order by date
$queryArgs['order'] = 'DESC'; // add this to display the most recent

答案 1 :(得分:0)

所以,我知道了。我会解释,因为这可能对其他人有用。

之所以不起作用,是因为上面的代码在模板中更有用。但是我在短代码中使用它。 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。