我想要达到的目标:为同一页面上的多个列启用无缝和同时无限滚动,每个列都引入一组不同的内容,即一个列显示最新帖子,而另一列显示来自特定的最新帖子标记。
每列使用不同的循环,这样它们就不会相互混淆,这是我使用的代码(只是为了让您了解我是如何做到的):
文件: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 中的“无限滚动”模块只包含两个文件—— infinity.php和infinity.js,所以对于了解 JavaScript 和 PHP 的人来说,它会更容易研究一些。
现在问题是,正如这里所说,要启用无限滚动,我们需要首先为其提供“无限滚动应向其添加附加帖子的 HTML 元素的 ID”。而且由于它不接受多个 ID,因此无法在同一页面上的多个列上同时无限滚动。
这个想法:所以,也许如果我修改它以接受 aclass
而不是id
属性,我可以在多个列上无限滚动工作。
问题是,我该怎么做?
在尽我最大努力自己解决问题(我不能)的同时,这里有一些我遇到的重要问题,我认为这会让你更容易提供帮助。
在[infinity.php][5]
'container' => 'content'
表示这content
是容器元素的默认 ID。'id' => self::get_settings()->container,
为要调用的 JavaScript定义id
。
在[infinity.js][6]
var id = $( this ).attr( 'id' ),
确保它是一个id
属性而不是一个class
.
因为,我不懂 JS 和足够的 PHP,我可能错过了许多其他重要的部分。只是认为这些信息会帮助那些试图提供帮助的人。
如果我不清楚,请告诉我。
注意:如果您在某处运行测试/开发 WordPress 站点,并希望提供帮助,请安装Slim Jetpack插件(不需要您连接到 WordPress.com的Jetpack 插件版本),并启用“ “Jetpack”菜单中的“无限滚动”模块。进一步的说明可以在这里找到。