无限滚动启用(wordpress)


infinite scroll enabling (wordpress)

所以,我发现这个教程启用无限滚动:http://wptheming.com/2012/03/infinite-scroll-to-wordpress-theme/

基本上我需要有一个js文件,并添加以下的函数。php

/**
 * Infinite Scroll
 */
function custom_infinite_scroll_js() {
    if( ! is_singular() ) { ?>
    <script>
    var infinite_scroll = {
         loading: {
            img: "<?php echo get_template_directory_uri(); ?>/images/ajax-loader.gif",
            msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
            finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
        },
        "nextSelector":"#nav-below .nav-previous a",
        "navSelector":"#nav-below",
        "itemSelector":"article",
        "contentSelector":"#content"
    };
    jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll   );
    </script>
    <?php
    }
}
add_action( 'wp_footer', 'custom_infinite_scroll_js',100 );

需要修改以下参数:

  • img: ajax加载器图像的路径
  • nextSelector:"previous posts"链接的选择器
  • navSelector:包含上/下一个导航链接的选择器。
  • itemSelector:职位的选择器。这可能是。hentry,。post,。etc
  • contentSelector:包含你的文章的div

好吧,我被卡住了。

这是我的php:
$defaults = array(
        'base' => add_query_arg( 'paged', '%#%' ),
        'format' => '',
        'total' => $max_num_pages,
        'current' => $current,
        'prev_next' => true,
        'prev_text' => __( '&larr;',my_site),
        'next_text' => __( '&rarr;',my_site), 
        'show_all' => false,
        'end_size' => 1,
        'mid_size' => 1,
        'add_fragment' => '',
        'type' => 'plain',
        'before' => '<div class="pagination">', 
        'after' => '</div>',
        'echo' => true,
        'use_search_permastruct' => true
  );

这里是我目前得到的html输出:

 <div class="pagination">
    <a class="prev page-numbers" href="example.com/dfgdg/page/2/">←</a>
    <a class="page-numbers" href="http://example.com/dfgdg/page/1/">1</a>
    <a class="page-numbers" href="http://example.com/dfgdg/page/2/">2</a>
    <span class="page-numbers current">3</span>
    <a class="page-numbers" href="http://example.com/dfgdg/page/4/">4</a>
    <span class="page-numbers dots">…</span>
    <a class="page-numbers" href="example.com/dfgdg/page/20/">20</a>
    <a class="next page-numbers" href="example.com/dfgdg/page/4/">→</a>
</div>

谁能告诉我如何修改它?

我应该考虑另一种方法吗?

谢谢很多! !

Em

这里的问题基本上是您在没有理解底层代码的情况下复制粘贴。

在你添加到PHP的JS片段中,你正在添加无限滚动应该在哪个元素上工作(contentSelector)

在示例中设置为"#content",但在您的代码中应该设置为".pagination"。

所以如果你改变contentSelector,它应该工作:)

编辑:我建议您将PHP中的"before"更改为id="pagination"。这可能会破坏你的模板,所以一定要在不同的页面上测试它,但这样你就可以选择id而不是类,这更可靠,更快速