无法让Jetpack Infinite Scroll在自定义WordPress主题中工作

时间:2015-08-17 23:54:09

标签: php jquery wordpress infinite-scroll jetpack

我正在为客户制作一个自定义WordPress网站,我希望在其中实现无限滚动到我的存档和类别模板。

我正在使用以下内容来实现这一目标:

  • HTML5Blank WordPress框架
  • Jetpack WordPress插件
  • Bootstrap 3

我已经通过互联网阅读了几篇文章和教程,解释了如何实现这一功能,一切看起来都非常简单,但无论如何我都无法让它发挥作用。

插件已激活,并且还激活了它的无限滚动模块。

我按照此处所写的说明进行操作:http://ottopress.com/2012/jetpack-and-the-infinite-scroll/

我的 category.php 中有以下代码(我正在进行所有测试),请注意所有内容都包含在ID为“content”的div中:

<div id="content">
<?php if ( have_posts() ) : ?>

    <?php
    // Start the Loop.
    while ( have_posts() ) : the_post();

        get_template_part( 'content', 'category' );

    // End the loop.
    endwhile;

    // If no content, include the "No posts found" template.
    else :
        get_template_part( 'content', 'none' );

    endif;
    ?>
</div>

然后我创建了一个 content-category.php 文件,其中我有我的实际帖子标记(这里没有任何东西):

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <!-- row -->
    <div class="row">
        <div class="col-xs-12 col-sm-6">
        <!-- post thumbnail -->
        <?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
            <div class="thumb">
                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                    <div class="icono-redondo-negro">
                    <?php
                        $format = get_post_format();
                        if ( false === $format ) :
                    ?>
                        <i class="fa fa-file-text"></i>
                    <?php endif; ?>
                    <?php if ( has_post_format( 'gallery' )) : ?>
                        <i class="fa fa-picture-o"></i>
                    <?php elseif ( has_post_format( 'video' )) : ?>
                        <i class="fa fa-video-camera"></i>
                    <?php elseif ( has_post_format( 'audio' )) : ?>
                        <i class="fa fa-headphones"></i>
                    <?php endif; ?>
                    </div>
                    <?php the_post_thumbnail('categoria-thumb'); ?>
                    <span class="plus">+</span>
                </a>
            </div>
        <?php endif; ?>
        <!-- /post thumbnail -->
        </div>
        <div class="col-xs-12 col-sm-6">
            <p class="fecha"><?php the_time('j \d\e\ F, Y'); ?> | <?php the_time('g:i a'); ?></p>
            <!-- post title -->
            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                <h1 class="titulo"><?php the_title(); ?></h1>
            </a>
            <!-- /post title -->
            <!-- post excerpt -->
            <p><?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?></p>
            <!-- /post excerpt -->
            <?php edit_post_link(); ?>
        </div>
    </div>
    <!-- /row -->
</article>

前端的一切都显示正常,接下来是棘手的部分,当我通过 functions.php 实际为我的主题添加无限滚动支持时:

function raramuri_infinite_scroll_init() {
    add_theme_support( 'infinite-scroll', array(
        'container' => 'content',
        'type' => 'click',
        'footer' => false,
    ));
}
add_action('init', 'raramuri_infinite_scroll_init');

我尝试了几件事,例如:

  • 添加'render'参数,并尝试加载模板部分 get_template_part('content','category');
  • 在'type'参数中使用“click”和“scroll”
  • 通过自定义功能添加无限滚动支持(仅限于 我上面做的方式)也只是添加了add_theme_support 功能块我的functions.php
  • 几乎尝试了Infinite Scroll的每个自定义参数 功能(试错)

到目前为止没有任何效果,我在浏览时没有看到“加载gif图标”,也没有在使用点击版本时看到“显示更多帖子”按钮。

我认为它可能与HTML5Blank有些不兼容,或者我没有以正确的方式实现无限滚动支持。

我想要“显示更多帖子”按钮,以便用户可以按照自己的意愿加载更多内容。

我错过了什么吗?在此先感谢您的帮助!

0 个答案:

没有答案