Не удается заставить Jetpack Infinite Scroll работать в собственной теме WordPress

Я делаю собственный сайт WordPress для клиента, на котором я хотел бы внедрить Infinite Scrolling в мой архив и шаблоны категорий.

Для этого я использую следующее:

  • HTML5Blank WordPress Framework
  • Jetpack WordPress Плагин
  • Bootstrap 3

Я прочитал несколько постов и учебных пособий по Интернету, объясняющих, как реализовать эту функциональность, все кажется очень простым, но по какой-то причине я не могу заставить его работать.

Плагин активируется, а также активируется модуль Infinite Scroll.

Я следую инструкциям, написанным здесь: http://ottopress.com/2012/jetpack-and-the-infinite-scroll/

У меня есть следующий кусок кода в моем category.php (где я делаю все свои тесты), пожалуйста, обратите внимание, что все заключено в div с идентификатором «content»:

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

Затем я создал Содержание-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’);
  • Использование «click» и «scroll» в параметре «type»
  • Добавление поддержки бесконечной прокрутки с помощью пользовательской функции (только
    как я делал выше), а также просто добавив add_theme_support в
    функциональный блок моего functions.php
  • Опробовал почти все пользовательские параметры бесконечного свитка
    функция (методом проб и ошибок)

К этому моменту ничего не получалось, я не вижу «значок загрузки gif» при прокрутке вниз и кнопку «Показать больше сообщений» при использовании версии с кликом.

Я думаю, что это может быть некоторая несовместимость с HTML5Blank, или я не реализую поддержку бесконечной прокрутки правильным способом.

Я хотел бы иметь кнопку «Показать больше сообщений», чтобы пользователи могли загружать больше, как они хотят.

Я что-то пропустил? Заранее спасибо за помощь!

2

Решение

Задача ещё не решена.

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]