以不同的布局加载更多帖子

Question

我在“加载更多”发布按钮中遇到问题，我在我的 wordpress 网站中设置了类别页面的布局，其中我有不同的网格布局，底部有一个加载更多按钮。当我单击“加载更多”按钮时，它会加载帖子但使用相同的网格样式。我想更改新加载帖子的样式。我想我的问题可能令人困惑。让我试着用图片来解释。

如您所见，第一行是不同的布局，第一行之后其他行是 3 列网格视图。

现在，每当我单击“加载更多”按钮时，它都会加载相同的布局。但我希望帖子应该以 3 列网格布局加载。

下面的布局代码！

<?php $index = 0; ?>
<div class="container category-page">
    <div class="content-heading">
        <span><?php single_cat_title( '', true ); ?></span>
    </div>
</div>
<div class="post-listing">
    <div class="container category-page">
    <?php if ( have_posts() ) : ?>
        <div class="content-post">
            <div class="row">
                <?php while( have_posts() ) : the_post() ?>
                    <?php do_action( 'mtc_before_category_post', $index, $wp_query->post_count ); ?>
                    <div class="<?php echo apply_filters( 'mtc_category_post_column', 'col-12 col-md-4 mb-5 pb-4', $index); ?>">
                        <div id="posts" <?php post_class(); ?>>
                                <div data-href="<?php the_permalink(); ?>" class="post-image-side" style="position: relative; background: url(<?php echo wp_get_attachment_url(get_post_thumbnail_id( $post->ID ), 'full' ); ?>); background-size: cover; background-position: center">
                                    <?php if("video" == get_post_format()): 
                                        $custom = get_post_meta(get_the_ID(), 'video_code', TRUE);
                                        ?>
                                    <iframe style="width: 100%; height: 100%; position: absolute;top: 0;left: 0" src="https://www.youtube.com/embed/<?php echo trim($custom); ?>?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                                    <?php endif; ?>
                                </div>

                            <div class="post-title">
                                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                            </div>
                            <div class="<?php echo apply_filters( 'mtc_category_post_excerpt', 'post-exerpt', $index); ?>">
                                <?php the_excerpt(); ?> 
                            </div>
                            <div class="post-date post-date-fix-position">
                                <!-- <a href="<?php echo get_day_link(date('Y'),date('m'),date('j')); ?>"> --><?php the_time('M j, Y'); ?><!-- </a> -->

                            </div>
                        </div>
                    </div>
                    <?php do_action( 'mtc_after_category_post', $index, $wp_query->post_count); ?>
                    <?php $index++; ?>
                <?php endwhile; ?>
            </div>
        </div>  
    <?php else: ?>
        <p>Sorry, no posts matched your criteria.</p>
    <?php endif; ?>
    </div>
</div>
    <?php if($index >= 8): ?>
    <div class="row load-more-btn" style="padding: 40px 0">
        <?php if(show_posts_nav()): ?>
        <div class="col-12 text-center">
            <!-- <input type="button" id="load_posts" class="ar-bottom-link-tabs btn btn-primary btn-lg custom-btn" value="LOAD MORE ARTICLES" style="padding: 15px 30px;"> -->
            <button id="loadMore" class="btn btn-primary btn-lg custom-btn"><?php next_posts_link( 'LOAD MORE ARTICLES' ); ?></button>
        </div>
        <?php endif; ?>
    </div>
    <?php endif; ?>

和用于加载更多帖子的 javascript。

jQuery('#loadMore a').on('click', function(e){
        e.preventDefault();
        if($(this).text() == "No more posts") return;
        $(this).text('LOADING MORE ARTICLES...');
        $(this).addClass("loader");
        $(this).addClass("loader-btn");
        var that = this;
        var link = jQuery(this).attr('href');
        $.get(link, function(data) {
            var cat = $('<div></div>').html(data).find(".post-listing");

            jQuery('.post-listing').append($(cat).html());
            var newLink = $('<div></div>').html(data).find("#loadMore");

            var newerLink = $('<div></div>').html(data).find("#loadMore a").attr('href');

            if($(newLink).html()){
                console.log("entered")
                $(that).removeClass("loader");
                $(that).removeClass("loader-btn");
                $(that).attr('href',newerLink);
                $(that).text("LOAD MORE ARTICLES");

            }else{
                jQuery('#loadMore').html("<a href='#'>No more posts</a>");

            }

        });
    });

我找了好久的解决方案，任何人都可以指导我完成这个！

谢谢..

Answer 1

用你的第一行替换下一行

$paged = get_query_var('paged') ? get_query_var('paged') : 1;

<?php $index = $paged > 1 ? 6 : 0; ?>

用你的

替换它

<?php $index = 0; ?>

在您的情况下，您的第 6 个 post 从 3 列网格视图开始，现在每当 wordpress 发现如果页面不是第一页，它将分配 $index 值 6 并且您新加载的帖子将在 3列网格视图。

希望有帮助！