Jetpack Infinite Scroll无法正常工作

时间:2014-09-22 19:40:08

标签: javascript php jquery wordpress jetpack

我一直试图让无限卷轴工作,但似乎无法让它工作。

我有三个文件,帖子循环content-post-ft.phpthe functions.php,然后我的首页加载帖子frontpage.php

的functions.php

  add_theme_support( 'infinite-scroll', array(
  'container' => 'main-content',
  'type' => 'scroll',
  'footer' => 'foot',
  'render' => 'infinite_scroll_render'
   ));

 function infinite_scroll_render() {
   get_template_part( 'content-post-ft', 'standard' );
  }

内容-后ft.php

<div class="hub-cont">
<?php

 $thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);
$thumb_url = $thumb_url_array[0];
 ?>
<div id="newsitem">
<div id="newsimg" style="background-image: url('<?php echo $thumb_url ?>')">
<a href="<?php the_permalink(); ?>"></a>
</div>
 <div id="newsname"> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>          </div>
 <div id="newstext"><?php $text = $post->post_content; $trimmed = wp_trim_words( $text, 40, null );   echo $trimmed; ?></div>
 <div class="clear"></div>
 </div>

 <?php
// endwhile;
// endif;

wp_reset_postdata();?>

</div>

Frontpage.php

<div id="main-content">
 <?php

 $myargs = array (
 //'showposts' => 2,
'post_type' => 'post',
'category_name' => 'News'
);
$myquery = new WP_Query($myargs);
if($myquery->have_posts() ) :
while($myquery->have_posts() ) : $myquery->the_post();
    get_template_part( 'content-post-ft', get_post_format() );
endwhile;
 endif;
?>
 </div>

我已经尝试过查看这么多教程和其他有类似问题的人,但似乎没有任何工作。

由于循环,页面显示10个帖子,但它只是添加了10个而不是“滚动”

修复此问题确实有助于我的压力水平!

1 个答案:

答案 0 :(得分:0)

解决了它。我不得不让Jetpack允许在自定义字段和页面上使用无限滚动。默认情况下,它仅适用于原始帖子页面。

函数文件:

function tweakjp_custom_is_support() {
return true;
$supported = current_theme_supports( 'infinite-scroll' ) && ( is_home() ||      is_archive() || is_front_page() );

return $supported;
}
  add_filter( 'infinite_scroll_archive_supported',      'tweakjp_custom_is_support' );

 function mm_infinite_scroll_render() {
    while ( have_posts() ) : the_post();
        get_template_part( 'content' );
    endwhile;
 }

  function mm_infinite_scroll_query_args($args) {

$new_args = array(
    'posts_per_page'   => $args['posts_per_page'],
    'paged'   => $args['paged'],
    'orderby'          => 'date',
    'order'            => 'DESC',
    'post_type'        => 'post',
    'post_status'      => 'publish',
);

return $new_args;
}

function mm_infinite_scroll_posts_where($clause) {
return "";
}

add_filter( 'infinite_scroll_posts_where', 'mm_infinite_scroll_posts_where' );

add_filter( 'infinite_scroll_query_args', 'mm_infinite_scroll_query_args',  9999 );
add_theme_support( 'infinite-scroll', array(
'container' => 'main-content',
'render' => 'mm_infinite_scroll_render'
) );

然后content.php文件具有渲染代码。我觉得这样可以帮助那些不确定的人。

<div class="news-list">
<ul class="promo-list-items">
    <?php
    // Fetch all posts relating to a certain tag then display 4 of them
    //Get the Thumbnail URL
    $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 720,405 ), false, '' );
    ?>
    <div id="promolink"></div><li class="news-list-item" style="background-image: url(' <?php echo $src[0];?> '); background-repeat: no-repeat; background-size: cover;"> <a class="gdbnewslink" href="<?php echo get_permalink();?>" >
            <?php the_title();?>
        </a>
        <?php wp_reset_postdata(); ?>
    </li>
    <div class="clear"></div>
</ul>
</div>

希望这可以帮助遇到与我同样问题的人。