Scrolling Posts with Ajax

时间:2014-11-14 作者:Locke

这是整个谷歌都面临的一个非常普遍的问题,但我们处理这一问题的方式之间存在冲突。

我使用本教程http://code.tutsplus.com/articles/getting-loopy-ajax-powered-loops-with-jquery-and-wordpress--wp-23232

我不得不说,这是互联网上解释得最好的教程(对我来说)。

到目前为止,我的工作做得很好,但也有一些例外,因为我缺乏知识,所以很难将其应用于我的网站。

一些例外。

如果只有一个post,那么停止加载其他条件的作者,我可以从页面作者(author.php)加载post,如果post达到100,则停止加载,然后正常分页

作者。php

<?php
get_header();
$curauth = (isset($_GET[\'author_name\'])) ? get_user_by(\'slug\', $author_name) : get_userdata(intval($author));
?>


<div id="content" class="inner-content-author sep">

  <header class="head-line">
    <h1><?php echo $curauth->first_name; ?> <?php echo $curauth->last_name; ?></h1>

    <div id="author" class="authorF">
        <figure class="photo" id="<?php echo get_the_author_meta(\'ID\'); ?>" style="background-image:url(\'wp-content/uploads/userphoto/<?php echo get_the_author_meta(\'ID\'); ?>.thumbnail.jpg\');background-size:cover;">
          <a href="" id="<?php echo get_the_author_meta(\'ID\'); ?>" class="colaborator">
            <img src="wp-content/uploads/userphoto/<?php echo get_the_author_meta(\'ID\'); ?>.thumbnail.jpg" alt="<?php echo get_the_author_meta(\'display_name\');?>" width="80" height="80" class="photo" />
        </a>
    </figure>
    <div id="autor_<?php the_ID(); ?>">
      <?php echo $curauth->user_description; ?>
  </div>
</div>


</header>


<section class="article-list sep" role="region">

    <header class="head-line">
      <h2>M&aacute;s Notas de <?php echo $curauth->first_name; ?> <?php echo $curauth->last_name; ?></h2>
  </header>

  <div id="loadAuthorLoop"></div>


</section>

</div>

<?php locate_template( array(\'/layouts/sidebars/sidebar_type-c.php\' ), true ); ?>


<?php get_footer(); ?>
循环作者。php

<!-- Start Articles Loop -->
<?php
// Our include
define(\'WP_USE_THEMES\', false);
require_once(\'../../../../../wp-load.php\');

// Our variables
$numPosts = (isset($_GET[\'numPosts\'])) ? $_GET[\'numPosts\'] : 0;
$page = (isset($_GET[\'pageNumber\'])) ? $_GET[\'pageNumber\'] : 0;

$args = array(
  \'posts_per_page\' => $numPosts,
  \'paged\' => $page
  );

$author = new WP_Query($args);
?>
<?php
if (  $author->have_posts() ) :
  while (  $author->have_posts() ) :  $author->the_post();
?>


<article id="post-<?php the_ID(); ?>" <?php post_class( \'cf\' ); ?> role="article">
  <header class="article-header">
    <figure  style="background-image:url(\'<?php extract_url();?>\');background-size:cover; background-position:center;">
      <?php the_post_thumbnail(\'lo-ultimo\');  ?>
    </figure>
  </header>

  <section class="entry-content cf">
    <small><?php single_cat_title();?></small>
    <h2 class="h2 entry-title">
      <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
    </h2>
  </section>
</article>
<?php  endwhile; else: ?>
  <p>Nuestro Colaborador aun no tiene lista sus notas, por favor regresa pronto para leer más de <?php echo $curauth->first_name; ?> <?php echo $curauth->last_name; ?></p>

  <?php
  endif;
  wp_reset_postdata(); ?>
<!-- End Articles Loop -->
循环。js公司

/*------------------------------------------------------
Authors Posts
------------------------------------------------------*/

load_loop_authors = function(){

  $.ajax({
    type       : "GET",
    data       : {numPosts : 1, pageNumber: page},
    dataType   : "html",
    url        : get_url_authors,
    beforeSend : function(){
      if(page != 1){
        content_authors.append(\'<div id="aLoad"  class="loads" style="text-align:center">
          <i class="fa fa-circle-o-notch fa-spin"></i>
          </div>\');
      }

    },
    success    : function(data){
      $data = $(data);
      if($data.length){
        $data.hide();
        content_authors.append($data);
        $data.fadeIn(500, function(){
          $("#aLoad").remove();
          loading = false;
        });
      } else {
        $("#aLoad").remove();

      }
    },
    error     : function(jqXHR, textStatus, errorThrown) {
      $("#aLoad").remove();
      alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);
    }
  });
}


$window.scroll(function() {
  var content_offset = content_authors.offset();
  //console.log(content_offset.top);


  if(!loading && ($window.scrollTop() +
   $window.height()) > (content_authors.scrollTop() +
   content_authors.height() + content_offset.top)) {
    loading = true;
  page++;
  load_loop_authors();

}

});
这里的主要问题是这个循环加载了整个网站的所有帖子。

谢谢

1 个回复
最合适的回答,由SO网友:Milo 整理而成

首先,该教程在AJAX部门是“做错了”。WordPress具有AJAX API, 在这种情况下应该使用。

也就是说,你的问题的基础是:

$args = array(
    \'posts_per_page\' => $numPosts,
    \'paged\' => $page
);
这些是您请求的帖子的查询参数。请注意,没有关于您要从哪个作者获取帖子的任何信息。您需要设置author parameter 与设置帖子数量和页码的方式相同。

就帖子和页面的数量而言,每个查询对象都包含一些属性,您可以使用这些属性来确定何时应该加载更多帖子。

对于作者查询:

$author = new WP_Query($args);

echo $author->post_count;    // number of posts in this result set
echo $author->found_posts;   // total number of posts from this query
echo $author->max_num_pages  // total number of pages

结束

相关推荐

Contact form - ajax, wp_mail

我正在尝试使用jQuery创建一个简单的联系人表单来验证表单,并使用AJAX将其传递给PHP和WPwp_mail() 发送它。我有这样一个简单的表单。 <form role=\"form\"> <div class=\"form-group\"> <label class=\"\">Name</label> <input type=\"text\" id=\"