将 ajax 加载更多按钮添加到我的首页
Posted
技术标签:
【中文标题】将 ajax 加载更多按钮添加到我的首页【英文标题】：Adding ajax load more button to my front page 【发布时间】：2018-01-05 15:24:53 【问题描述】：我正在为我的网站使用预制的 wordpress 主题。但是，我想制作一个自定义的front-page.php，所以我做了，但现在的问题是我不知道如何向它添加ajax 加载更多按钮。我的主题已经使用了 ajax 加载更多按钮，所以我认为添加起来很简单。但我想我可能在错误的地方添加了代码，或者我的查询搞砸了？
谁能帮我添加这个加载更多按钮？
我的自定义front-page.php
<?php
get_header();
get_template_part ('inc/carousel');
$the_query = new WP_Query( [
'posts_per_page' => 13,
'paged' => get_query_var('paged', 1)
] );
if ( $the_query->have_posts() ) ?>
<div id="ajax">
<?php
$i = 0;
$j = 0;
while ( $the_query->have_posts() )
$the_query->the_post();
if ( $i % 5 === 0 ) // Large post: on the first iteration and every 7th post after... ?>
<div class="row">
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
</div>
<?php else // Small posts ?>
<?php if($j % 2 === 0) echo '<div class="row">'; ?>
<article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
<div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php $j++; if($j % 2 === 0) echo '</div>'; ?>
<?php
$i++;
?>
</div>
<?php
get_footer();
我在主题中找到的 post-nav.php 代码
<div class="row pagination-below"><div class="col-md-12">
<?php
$pagination_type = novablog_getVariable('pagination_type') ? novablog_getVariable('pagination_type') : 'pagnum';
if($pagination_type=='pagnum') :
the_posts_pagination( array(
'mid_size' => 3,
'type' => 'list',
'prev_text' => theme_locals("prev"),
'next_text' => theme_locals("next")
) );
endif;
global $wp_query;
if ( $wp_query->max_num_pages > 1 && $pagination_type=='paglink' ) : ?>
<div class="paglink">
<span class="pull-left"><?php previous_posts_link(theme_locals("newer")) ?></span>
<span class="pull-right"><?php next_posts_link(theme_locals("older")) ?></span>
</div>
<?php endif; ?>
<?php
if ( $wp_query->max_num_pages > 1 && $pagination_type=='loadmore' or $wp_query->max_num_pages > 1 && $pagination_type=='infinite' )
$all_num_pages = $wp_query -> max_num_pages;
$next_page_url = novablog_next_page($all_num_pages);
?>
<div class="ajax-pagination-container">
<a href="<?php echo esc_url($next_page_url); ?>" id="ajax-load-more-posts-button"></a>
</div>
<?php ?>
</div></div>
这是加载更多按钮在我的本地主机上的显示方式
我希望我的首页帖子布局的示例。一行 1 个帖子，一行 2 个帖子，每行 2 个帖子，一行 1 个帖子，依此类推。然后每 15 个帖子后会出现加载更多按钮。
当我检查加载更多按钮时，这就是 chrome 开发人员的样子
【问题讨论】：
如果你检查元素会发生什么？有什么错误吗？ 我没有收到任何错误。 user6738171 考虑这个rudrastyh.com/wordpress/load-more-posts-ajax.html 你能发布你的 jquery 吗？ @vel 这是主题文件的链接 - dropbox.com/s/yghxnsvnbv3nnrh/novablog.zip?dl=0 【参考方案1】：将此添加到front-page.php
<?php
get_header();
get_template_part ('inc/carousel');
?>
<script>
var now=2; // when click start in page 2
jQuery(document).on('click', '#load_more_btn', function ()
jQuery.ajax(
type: "POST",
url: "<?php echo get_site_url(); ?>/wp-admin/admin-ajax.php",
data:
action: 'my_load_more_function', // the name of the function in functions.php
paged: now, // set the page to get the ajax request
posts_per_page: 15 //number of post to get (use 1 for testing)
,
success: function (data)
if(data!=0)
jQuery("#ajax").append(data); // put the content into ajax container
now=now+1; // add 1 to next page
else
jQuery("#load_more_btn").hide();
jQuery("#content-load-more-btn").html("<h4>No more results</h4>");
,
error: function (errorThrown)
alert(errorThrown); // only for debuggin
);
);
</script>
<section id="ajax"><!-- i have to change div to section, maybe a extra div declare -->
<?php
$the_query = new WP_Query( [
'posts_per_page' => 15, // i use 1 for testing
'orderby'=>'title', // add order for prevent duplicity
'order'=>'ASC',
'paged' => get_query_var('paged', 1) //page number 1 on load
] );
if ($the_query->have_posts())
$i = 0;
$j = 0;
while ($the_query->have_posts())
$the_query->the_post();
if ( $i % 5 === 0 ) // Large post: on the first iteration and every 7th post after... ?>
<div class="row">
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
</div>
<?php else // Small posts ?>
<?php if($j % 2 === 0) echo '<div class="row">'; ?>
<article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
<div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php $j++; if($j % 2 === 0) echo '</div>';?>
<?php
$i++;
?>
<?php
?>
</section>
<div id="content-load-more-btn">
<button id="load_more_btn">Load More</button> <!-- button out of ajax container for load content and button displayed at the bottom -->
</div>
<?php
get_footer();
然后在functions.php中添加如下代码：
add_action('wp_ajax_my_load_more_function', 'my_load_more_function');
add_action('wp_ajax_nopriv_my_load_more_function', 'my_load_more_function');
function my_load_more_function()
$query = new WP_Query( [
'posts_per_page' => $_POST["posts_per_page"],
'orderby'=>'title',
'order'=>'ASC',
'paged' => get_query_var('paged', $_POST["paged"])
] );
if ($query->have_posts())
$i = 0;
$j = 0;
while ($query->have_posts())
$query->the_post();
if ( $i % 5 === 0 ) // Large post: on the first iteration and every 7th post after... ?>
<div class="row">
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
</div>
<?php else // Small posts ?>
<?php if($j % 2 === 0) echo '<div class="row">'; ?>
<article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
<div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php $j++; if($j % 2 === 0) echo '</div>'; ?>
<?php
$i++;
wp_reset_query();
else
return 0;
exit;
我认为您在 front-page.php 中的循环设置有问题需要解决，在 posts-per-page 参数中，显示 posts-per-page + 1 个结果。
如果这能解决您的问题，请告诉我。
【讨论】：
红色标记不是加载更多按钮。我在上面附上了一张图片，上面是我上传主题后加载更多按钮的样子。对于我的主页，我想使用引导程序，我希望它在一行中的 1 个帖子和每行 2 个帖子的 2 行之间交替，依此类推，然后在 15 个帖子后有一个加载更多按钮。 （我在我原来的问题中放了一个例子）。我试图通过对front-page.php 进行编码来构建它。而且我认为我编码正确（也许？），但我只是不知道如何将加载更多按钮从主题添加到来自 page.php 文件的自定义中。 第二个代码与所有代码看起来如何？ 感谢您的帮助。此代码无法正常工作。它只加载两个帖子（每行 1 个）。然后每次按下加载更多按钮时，它只会加载一篇文章？ 请阅读代码中的 cmets，因为我一直在尝试测试，所以只显示 1。 Posts_per_page 选项限制帖子的数量，分页显示该posts_per_page 所属的页面。您在 front-page.php 首次加载查询中有一个错误，但 ajax 调用工作正常。将所有 posts_per_page 更改为 13，现在您修复了显示的唯一一个响应。如果您仍需要帮助，请告诉我。 很抱歉我错过了。有没有办法修复这个错误？我在编码方面还是新手，所以我知道我可能搞砸了。我将 post_per_page 更改为 15（因为我想要每页 15 个帖子）。它工作得很好。在加载更多按钮之前显示了 15 个帖子。但是，每次按下加载更多按钮后，只会加载 1 个帖子。有没有办法每次按下按钮后加载 15 个帖子？再次感谢您的帮助，我真的很感激。【参考方案2】：您可能应该只使用适当的插件来提供您遇到的功能。
这个https://en-ca.wordpress.org/plugins/easy-load-more/ 声称通过“最小”主题更改完全符合您的要求。
【讨论】：
以上是关于将 ajax 加载更多按钮添加到我的首页的主要内容，如果未能解决你的问题，请参考以下文章