我在“加载更多”发布按钮时遇到问题,我在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&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>");
}
});
});
我一直在寻找解决方案,任何人都可以通过这个指导我!
谢谢..
答案 0 :(得分:1)
用第一行替换下一行
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
<?php $index = $paged > 1 ? 6 : 0; ?>
用您的
替换<?php $index = 0; ?>
在您的情况下,您的第六个post
从3列网格视图开始,现在wordpress
发现如果页面不是第一页,它将为$index
赋值6,而新的加载的帖子将显示在3列网格视图中。
希望有帮助!