根据标签在存档中加载更多内容
Load more in archive based on tag
我正在开发一个加载更多按钮,它可以根据标签在 archive.php 中加载 post。使用此示例 https://artisansweb.net/load-wordpress-post-ajax/,我已经获得加载更多按钮来处理自定义 post 类型和常规 posts。存档页面略有不同,因为这个循环是根据 slug 创建自己的。这是我目前在 archive.php
上的工作循环
<?php
$term_slug = get_queried_object()->slug;
$loop = new WP_Query( array( 'post_type' => '', 'tag' =>
$term_slug, 'posts_per_page' => 3 ) ); ?>
<ul class="my-archive">
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<li class="blog-box">
<div class="blog-bullet-img">
<a href="<?php the_permalink(); ?>" title="<?php
the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
</div>
<div class="news-full-descrip">
<p class="blog_title"><?php the_title(); ?></p>
<p class="blog_date"><?php echo get_the_date(); ?></p>
<p class="blog-textarea"><?php echo get_the_excerpt(); ?></p>
</div>
</li>
<?php endwhile; // End the loop. ?>
</ul>
<div class="loadmore_three"><span>Load More</span></div>
</div>
<script type="text/javascript">
var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
var page = 2;
jQuery(function($) {
$('body').on('click', '.loadmore_three', function() {
var data = {
'action': 'load_posts_by_ajax_three',
'page': page,
'security_three': '<?php echo
wp_create_nonce("load_more_posts_three"); ?>'
};
$.post(ajaxurl, data, function(response) {
$('.my-archive').append(response);
page++;
});
});
});
</script>
在 functions.php 中,我添加了此循环的一个稍微修改的版本,添加了 $paged,因此它与我上面 link 中的示例一致。当前 return 全部 post,并且在您单击“加载更多”时不会按 slug 过滤标签。
// The Archive post type load more function
add_action('wp_ajax_load_posts_by_ajax_three',
'load_posts_by_ajax_callback_three');
add_action('wp_ajax_nopriv_load_posts_by_ajax_three',
'load_posts_by_ajax_callback_three');
function load_posts_by_ajax_callback_three() {
check_ajax_referer('load_more_posts_three', 'security_three');
$term_slug = get_queried_object()->slug;
$paged = $_POST['page'];
$loop = new WP_Query( array( 'post_type' => '', 'tag' => $term_slug,
'posts_per_page' => 3, 'paged' => $paged, ) ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<li class="blog-box">
<div class="blog-bullet-img">
<a href="<?php the_permalink(); ?>" title="<?php
the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
</div>
<div class="news-full-descrip">
<p class="blog_title"><?php the_title(); ?></p>
<p class="blog_date"><?php echo get_the_date(); ?></p>
<p class="blog-textarea"><?php echo get_the_excerpt(); ?></p>
</div>
</li>
<?php endwhile; wp_die(); }
我不擅长 PHP,但已经阅读了很多书并试图更好地理解它。当您单击“加载更多”时,我希望 return 具有与当前 url 或 slug 相同标签的 posts。
你必须将你的 slug 术语传递给你的 AJAX ,你可以这样做:
$term_slug = get_queried_object()->slug;
$loop = new WP_Query( array( 'post_type' => '', 'tag' =>
$term_slug, 'posts_per_page' => 1 ) ); ?>
<ul class="my-archive">
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<li class="blog-box">
<div class="blog-bullet-img">
<a href="<?php the_permalink(); ?>" title="<?php
the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
</div>
<div class="news-full-descrip">
<p class="blog_title"><?php the_title(); ?></p>
<p class="blog_date"><?php echo get_the_date(); ?></p>
<p class="blog-textarea"><?php echo get_the_excerpt(); ?></p>
</div>
</li>
<?php endwhile; // End the loop. ?>
</ul>
<div class="loadmore_three"><span>Load More</span></div>
</div>
<?php get_footer(); ?>
<script type="text/javascript">
var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
jQuery(function($) {
var page = 2;
$('body').on('click', '.loadmore_three', function() {
var data = {
'action': 'load_posts_by_ajax_three',
'page': page,
'slugTerm' : '<?php echo $term_slug; ?>',
'security_three': '<?php echo
wp_create_nonce("load_more_posts_three"); ?>'
};
$.post(ajaxurl, data, function(response) {
$('.my-archive').append(response);
page++;
});
});
});
</script>
在你的 functions.php 中:
add_action('wp_ajax_load_posts_by_ajax_three',
'load_posts_by_ajax_callback_three');
add_action('wp_ajax_nopriv_load_posts_by_ajax_three',
'load_posts_by_ajax_callback_three');
function load_posts_by_ajax_callback_three() {
check_ajax_referer('load_more_posts_three', 'security_three');
$term_slug= $_POST['slugTerm'];
$paged = $_POST['page'];
$loop = new WP_Query( array( 'post_type' => '', 'tag' => $term_slug,
'posts_per_page' => 1, 'paged' => $paged, ) ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<li class="blog-box">
<div class="blog-bullet-img">
<a href="<?php the_permalink(); ?>" title="<?php
the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
</div>
<div class="news-full-descrip">
<p class="blog_title"><?php the_title(); ?></p>
<p class="blog_date"><?php echo get_the_date(); ?></p>
<p class="blog-textarea"><?php echo get_the_excerpt(); ?></p>
</div>
</li>
<?php endwhile; wp_die(); }
我正在开发一个加载更多按钮,它可以根据标签在 archive.php 中加载 post。使用此示例 https://artisansweb.net/load-wordpress-post-ajax/,我已经获得加载更多按钮来处理自定义 post 类型和常规 posts。存档页面略有不同,因为这个循环是根据 slug 创建自己的。这是我目前在 archive.php
上的工作循环<?php
$term_slug = get_queried_object()->slug;
$loop = new WP_Query( array( 'post_type' => '', 'tag' =>
$term_slug, 'posts_per_page' => 3 ) ); ?>
<ul class="my-archive">
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<li class="blog-box">
<div class="blog-bullet-img">
<a href="<?php the_permalink(); ?>" title="<?php
the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
</div>
<div class="news-full-descrip">
<p class="blog_title"><?php the_title(); ?></p>
<p class="blog_date"><?php echo get_the_date(); ?></p>
<p class="blog-textarea"><?php echo get_the_excerpt(); ?></p>
</div>
</li>
<?php endwhile; // End the loop. ?>
</ul>
<div class="loadmore_three"><span>Load More</span></div>
</div>
<script type="text/javascript">
var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
var page = 2;
jQuery(function($) {
$('body').on('click', '.loadmore_three', function() {
var data = {
'action': 'load_posts_by_ajax_three',
'page': page,
'security_three': '<?php echo
wp_create_nonce("load_more_posts_three"); ?>'
};
$.post(ajaxurl, data, function(response) {
$('.my-archive').append(response);
page++;
});
});
});
</script>
在 functions.php 中,我添加了此循环的一个稍微修改的版本,添加了 $paged,因此它与我上面 link 中的示例一致。当前 return 全部 post,并且在您单击“加载更多”时不会按 slug 过滤标签。
// The Archive post type load more function
add_action('wp_ajax_load_posts_by_ajax_three',
'load_posts_by_ajax_callback_three');
add_action('wp_ajax_nopriv_load_posts_by_ajax_three',
'load_posts_by_ajax_callback_three');
function load_posts_by_ajax_callback_three() {
check_ajax_referer('load_more_posts_three', 'security_three');
$term_slug = get_queried_object()->slug;
$paged = $_POST['page'];
$loop = new WP_Query( array( 'post_type' => '', 'tag' => $term_slug,
'posts_per_page' => 3, 'paged' => $paged, ) ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<li class="blog-box">
<div class="blog-bullet-img">
<a href="<?php the_permalink(); ?>" title="<?php
the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
</div>
<div class="news-full-descrip">
<p class="blog_title"><?php the_title(); ?></p>
<p class="blog_date"><?php echo get_the_date(); ?></p>
<p class="blog-textarea"><?php echo get_the_excerpt(); ?></p>
</div>
</li>
<?php endwhile; wp_die(); }
我不擅长 PHP,但已经阅读了很多书并试图更好地理解它。当您单击“加载更多”时,我希望 return 具有与当前 url 或 slug 相同标签的 posts。
你必须将你的 slug 术语传递给你的 AJAX ,你可以这样做:
$term_slug = get_queried_object()->slug;
$loop = new WP_Query( array( 'post_type' => '', 'tag' =>
$term_slug, 'posts_per_page' => 1 ) ); ?>
<ul class="my-archive">
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<li class="blog-box">
<div class="blog-bullet-img">
<a href="<?php the_permalink(); ?>" title="<?php
the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
</div>
<div class="news-full-descrip">
<p class="blog_title"><?php the_title(); ?></p>
<p class="blog_date"><?php echo get_the_date(); ?></p>
<p class="blog-textarea"><?php echo get_the_excerpt(); ?></p>
</div>
</li>
<?php endwhile; // End the loop. ?>
</ul>
<div class="loadmore_three"><span>Load More</span></div>
</div>
<?php get_footer(); ?>
<script type="text/javascript">
var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
jQuery(function($) {
var page = 2;
$('body').on('click', '.loadmore_three', function() {
var data = {
'action': 'load_posts_by_ajax_three',
'page': page,
'slugTerm' : '<?php echo $term_slug; ?>',
'security_three': '<?php echo
wp_create_nonce("load_more_posts_three"); ?>'
};
$.post(ajaxurl, data, function(response) {
$('.my-archive').append(response);
page++;
});
});
});
</script>
在你的 functions.php 中:
add_action('wp_ajax_load_posts_by_ajax_three',
'load_posts_by_ajax_callback_three');
add_action('wp_ajax_nopriv_load_posts_by_ajax_three',
'load_posts_by_ajax_callback_three');
function load_posts_by_ajax_callback_three() {
check_ajax_referer('load_more_posts_three', 'security_three');
$term_slug= $_POST['slugTerm'];
$paged = $_POST['page'];
$loop = new WP_Query( array( 'post_type' => '', 'tag' => $term_slug,
'posts_per_page' => 1, 'paged' => $paged, ) ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<li class="blog-box">
<div class="blog-bullet-img">
<a href="<?php the_permalink(); ?>" title="<?php
the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
</div>
<div class="news-full-descrip">
<p class="blog_title"><?php the_title(); ?></p>
<p class="blog_date"><?php echo get_the_date(); ?></p>
<p class="blog-textarea"><?php echo get_the_excerpt(); ?></p>
</div>
</li>
<?php endwhile; wp_die(); }