无限滚动启用(wordpress) [英] infinite scroll enabling (wordpress)

问题描述

因此，我发现本教程启用了无限滚动: http: //wptheming.com/2012/03/infinite-scroll-to-wordpress-theme/

So, I found this tutorial to enable infinite scroll:http://wptheming.com/2012/03/infinite-scroll-to-wordpress-theme/

基本上我需要有js文件并将以下内容添加到function.php

Basically I need to have js file and add the following to the function.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 );

我需要更改以下参数的地方:

Where I need to change the following parameter:

• img:ajax加载程序映像的路径
• nextSelector:以前的帖子"链接的选择器.
• 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' => __( '←',my_site),
        'next_text' => __( '→',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输出:

And here is html output that I am currently getting:

 <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>

有人可以帮助我进行修改吗?

Could someone help me out with how to modify it?

或

我应该考虑其他方法吗?

is there a different approach that I should consider?

感谢一群人！

Em

推荐答案

基本上，这里出现的问题是您在复制粘贴时不了解底层代码.

Basically what is going wrong here is that you are copy pasting without understanding the underlying code.

在您添加到PHP的JS代码段中，您要添加无限滚动应在哪个元素上起作用(contentSelector)

In the JS snippet you added to the PHP you are adding on which element the infinite scrolling should work (contentSelector)

在此示例中，该字段设置为"#content"，但在您的代码中，该字段应为".pagination".

In the example this is set to "#content", but in your code it should be ".pagination".

因此，如果您更改contentSelector，它应该可以工作:)

So if you change the contentSelector it should work :)

我建议您将PHP中的之前"更改为id ="pagination".这可能会破坏您的模板，因此请确保在不同的页面上对其进行测试，但是通过这种方式，您可以选择id而不是更可靠，更快捷的类

edit: i would advice that you change the "before" in your php to id="pagination". This might break your template, so make sure to test it with different pages, but this way you can select on the id instead of the class which is more reliable and faster

这篇关于无限滚动启用(wordpress)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！