私が達成しようとしていること：同じページの複数の列に対してシームレスかつ同時の無限スクロールを有効にします。それぞれが異なるコンテンツのセットを取り込みます。つまり、1 つの列には最新の投稿が表示され、もう 1 つの列には特定の投稿からの最新の投稿が表示されます。タグ。
各列は異なるループを使用しているため、互いに混乱することはありません.
ファイル: index.php (コードも pastebin にあります)
<?php
/**
* The main template file.
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
* Learn more: http://codex.wordpress.org/Template_Hierarchy
*
* @package Twenty Twelve
* @since Twenty Twelve 1.0
*/
get_header(); ?>
<div id="primary" class="content-area">
<section id="content" class="site-content" role="main">
<?php if ( have_posts() ) : ?>
<?php //twentytwelve_content_nav( 'nav-above' ); ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix content-articles'); ?>>
<a class="archives-thumb-link" href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_post_thumbnail( 'archives-thumb' ); ?></a>
<div class="entry-text-wrapper">
<header class="entry-header">
<h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
</header><!-- .entry-header -->
</div>
</article><!-- #post-<?php the_ID(); ?> -->
<?php endwhile; ?>
<?php twentytwelve_content_nav( 'nav-below' ); ?>
<?php else : ?>
<?php get_template_part( 'no-results', 'index' ); ?>
<?php endif; ?>
</section><!-- #content .site-content -->
<section id="highlights-container" class="site-content">
<?php $latest_highlights = new WP_Query('tag=highlights&showposts=20&paged=' . $paged); ?>
<?php if ( $latest_highlights->have_posts() ) : ?>
<?php while ($latest_highlights->have_posts()) : $latest_highlights->the_post(); $the_highlights_counter++; ?>
<article id="highlights-<?php echo $the_highlights_counter; ?>" class="highlights-wrapper">
<a class="highlights-link" href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark">
<?php the_post_thumbnail( 'highlights-thumb' ); ?>
<h1 class="highlights-title"><?php the_title(); ?> <span>/ <?php echo the_time('M. n'); ?></span></h1>
</a>
</article>
<?php endwhile; ?>
<?php else : ?>
<?php get_template_part( 'no-results', 'index' ); ?>
<?php endif; ?>
</section><!-- #content .site-content -->
</div><!-- #primary .content-area -->
<?php get_footer(); ?>
やり方: Jetpack の「Infinite Scroll」モジュールは、infinity.phpとinfinity.jsの 2 つのファイルだけで構成されているため、JavaScript と PHP を知っている人にとっては、調べるのが少し簡単になります。
ここで説明したように、無限スクロールを有効にするには、最初に「無限スクロールが追加の投稿を追加する HTML 要素の ID」を提供する必要があります。また、複数の ID を受け入れないため、同じページの複数の列で同時に無限スクロールを有効にすることはできません。
アイデア:classしたがって、属性の代わりにa を受け入れるように変更するとid、複数の列で無限スクロールが機能する可能性があります。
問題は、どうすればいいですか？
自分で問題を解決するために最善を尽くしている間 (私にはできませんでした)、ここに私が見つけたいくつかの重要なビットがあります。
の[infinity.php][5]
'container' => 'content'これはcontentコンテナ要素のデフォルト ID です。'id' => self::get_settings()->container,id呼び出す JavaScript を定義します。
の[infinity.js][6]
var id = $( this ).attr( 'id' ),id属性であり、ではないことを確認してclassください。
私は JS と十分な PHP を知らないので、他の多くの重要なビットを見逃している可能性があります。この情報は、助けようとしている人に役立つと思っただけです。
よくわからない場合はお知らせください。
注:どこかでテスト/開発用の WordPress サイトを運営していて、支援したい場合は、Slim Jetpackプラグイン ( WordPress.com への接続を必要としないJetpack プラグインのバージョン)をインストールし、「 「Jetpack」メニューの「Infinite Scroll」モジュール。詳細な手順については、こちらを参照してください。