2

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

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

  • HTML5Blank WordPress 框架
  • Jetpack WordPress 插件
  • 引导程序 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”
  • 通过自定义函数（就像我上面所做的那样）添加无限滚动支持，也只需在我的 functions.php 的函数块中添加 add_theme_support
  • 几乎尝试了无限滚动功能的每个自定义参数（反复试验）

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

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

我想要“显示更多帖子”按钮，以便用户可以根据需要加载更多。

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

4

0 回答 0