【问题标题】:Wordpress Posts - Ajax Load More Random Order, filter not working?Wordpress 帖子 - Ajax 加载更多随机顺序,过滤器不起作用?
【发布时间】:2019-03-05 07:04:20
【问题描述】:

我目前在我的网站上加载更多帖子的功能遇到一些问题。您会看到,默认情况下,它会按正确顺序显示最新的四篇文章。但是,当我单击“加载更多”按钮时,它确实显示了更多帖子,但是,它只是以随机顺序堆叠。

我已经为此苦苦挣扎了将近两天,尝试了我遇到的所有事情,还得到了我朋友的帮助,他实际上是一位经验丰富的 WordPress 开发人员,但他也没有找到解决方案。

我做了一些研究,我也尝试添加'suppress_filters' = true,但没有任何运气。所以,这是我到目前为止的代码。

这是以正确顺序显示默认四个帖子的代码:

<section class="posts-container">
        <div class="container">
            <h1 class="earlier-posts-title mt-5 text-center"><?php echo get_theme_mod('earlier_posts_title'); ?></h1>
            <div class="container-fluid">
                <div class="row mt-5 mb-5 misha_posts_wrap">

                    <?php if(have_posts()) : ?>
                    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                    <div class="col-lg-6 mb-4">
                        <?php if(has_post_thumbnail()): ?>
                        <div class="thumbnail-container">
                            <?php the_post_thumbnail('', array('class' => 'thumbnail-post')); ?>
                        </div>
                        <?php endif; ?>
                        <h1 class="thumbnail-title mt-3 text-center"><?php the_title(); ?></h1>
                        <p><?php echo the_time(); ?></p>
                        <div class="meta">
                            <p class="thumbnail-meta mt-3 text-center"><i class="far fa-clock"></i> Skrevet den <?php the_time('j. F Y');?></p>
                        </div>
                            <p class="thumbnail-content-text text-left"><b class="text-left"><?php the_excerpt();?></b></p>
                        </div>
                        <?php endwhile; ?>
                        <?php endif; ?>
                        <?php endif;?>
                        <?php
                    global $wp_query; // you can remove this line if everything works for you
                    if (  $wp_query->max_num_pages > 1 )
                        echo '<div class="misha_loadmore">More posts</div>'; // you can use <a> as well
                ?>
                </div>
            </div>
        </div>
    </section>

这里是 myloadmore.js:

jQuery(function($){
    $('.misha_loadmore').click(function(){

        var button = $(this),
            data = {
            'action': 'loadmore',
            'query': misha_loadmore_params.posts, 
            'page' : misha_loadmore_params.current_page
        };

        $.ajax({
            url : misha_loadmore_params.ajaxurl,
            data : data,
            type : 'POST',

            beforeSend : function ( xhr ) {
                button.text('Loading...');
            },
            success : function( data ){
                if( data ) { 
                    button.text( 'More posts' ).prev().before(data);
                    misha_loadmore_params.current_page++;

                    if ( misha_loadmore_params.current_page == misha_loadmore_params.max_page ) 
                        button.remove(); // if last page, remove the button

                    // you can also fire the "post-load" event here if you use a plugin that requires it
                    // $( document.body ).trigger( 'post-load' );
                } else {
                    button.remove(); // if no data, remove the button as well
                }
            }
        });
    });
});

最后但同样重要的是,functions.php 文件:

function misha_my_load_more_scripts() {

    global $wp_query; 

    // In most cases it is already included on the page and this line can be removed
    wp_enqueue_script('jquery');

    // register our main script but do not enqueue it yet
    wp_register_script( 'my_loadmore', get_stylesheet_directory_uri() . '/myloadmore.js', array('jquery') );

    // now the most interesting part
    // we have to pass parameters to myloadmore.js script but we can get the parameters values only in PHP
    // you can define variables directly in your HTML but I decided that the most proper way is wp_localize_script()
    wp_localize_script( 'my_loadmore', 'misha_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' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
        'max_page' => $wp_query->max_num_pages
    ) );

    wp_enqueue_script( 'my_loadmore' );
}

add_action( 'wp_enqueue_scripts', 'misha_my_load_more_scripts' );

function misha_loadmore_ajax_handler(){

    // prepare our arguments for the query
    $args = json_decode(stripslashes($_POST['query']),true);
    $args['paged'] = $_POST['page'] + 1;
    $args['post_type'] = 'post';
    $args['order'] = 'DESC';
    $args['orderby'] = 'date';
    $args['post_status'] = 'publish';
    // it is always better to use WP_Query but not here
    query_posts( $args );

    if( have_posts() ) :

        // run the loop
        while( have_posts() ): the_post();

            // look into your theme code how the posts are inserted, but you can use your own HTML of course
            // do you remember? - my example is adapted for Twenty Seventeen theme
            echo '<div class="col-lg-6 mb-4">';
            echo '<div class="thumbnail-container">';
            the_post_thumbnail('', array('class' => 'thumbnail-post'));
            echo '</div>';
            echo '<h1 class="thumbnail-title mt-3 text-center">';
            echo the_title();
            echo '</h1>';
            echo '<div class="meta">';
            echo '<p class="thumbnail-meta mt-3 text-center"><i class="far fa-clock"></i> Skrevet den ';
            echo the_time('j. F Y');
            echo '</p>';
            echo '</div>';
            echo '<p class="thumbnail-content-text text-left"><b class="text-left">';
            echo the_excerpt();
            echo '</b></p>';
            echo '</div>';
            echo '</div>';

        endwhile;

    endif;
    die;
}

add_action('wp_ajax_loadmore', 'misha_loadmore_ajax_handler');
add_action('wp_ajax_nopriv_loadmore', 'misha_loadmore_ajax_handler');

所以根据我的论文,问题出在 functions.php 文件中的 misha_loadmore_ajax_handler 上,因为只要我点击加载更多按钮,所有帖子都会按随机顺序排序。您还可以看到我已经应用了许多过滤器来尝试解决这个问题。我只是想让它正确显示。

代码来自 Misha,链接在这里:https://rudrastyh.com/wordpress/load-more-posts-ajax.html

总的来说,我对 WordPress 开发和 PHP 还很陌生。

我在这里做错了什么?任何帮助将不胜感激。

【问题讨论】:

    标签: php ajax wordpress wordpress-theming


    【解决方案1】:

    只使用 'suppress_filters' = true 而不在 $args 数组中排序.. (如果在排序前需要 - 使用 pre_get_post)

    $args = json_decode(stripslashes($_POST['query']),true);
    $args['paged'] = $_POST['page'] + 1;
    $args['post_type'] = 'post';
    $args['post_status'] = 'publish';
    $args['suppress_filters'] = true;
    
    query_posts( $args );
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2015-04-16
      • 2019-03-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-08-19
      相关资源
      最近更新 更多