修改 WordPress Jetpack 插件以使用“类”而不是“ID”属性答案

【问题标题】：Modify WordPress Jetpack Plugin To Use 'Class' Instead Of An 'ID' Attribute修改 WordPress Jetpack 插件以使用“类”而不是“ID”属性
【发布时间】：2013-02-01 13:28:43
【问题描述】：

我想要实现的目标： 为同一页面上的多个列启用无缝和同时无限滚动，每个列都拉入一组不同的内容，即一个列显示最新帖子，而另一个显示来自特定标签的最新帖子。

每一列都使用不同的循环，这样它们就不会相互混淆，这是我使用的代码（只是为了让您了解我是如何做的）：

文件：index.php (code also on 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 em>，所以对于了解 JavaScript 和 PHP 的人来说，它会更容易研究。

现在问题是，as stated here，要启用无限滚动，我们首先需要向它提供 “无限滚动应向其添加额外帖子的 HTML 元素的 ID。”由于它不接受多个 ID，因此无法在同一页面上的多个列上同时无限滚动。

想法：所以，如果我修改它以接受class 而不是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 插件（版本Jetpack plugin 不需要您连接到 WordPress.com），并从“Jetpack”菜单中启用“无限滚动”模块。可以在here找到更多说明。

【问题讨论】：

不能只调用两次初始化函数，每个id一次吗？
@mornaner 你指的是哪个函数？你能说清楚一点吗？
您链接的文档页面上Examples 部分的那个：function twenty_twelve_infinite_scroll_init()
@mornaner 哦，我试过了。它不起作用。当您为两个 ID 初始化脚本时，只能为其中一个启用无限滚动。
您知道有哪些网站可以按照您希望的方式运行吗？

标签： php javascript wordpress infinite-scroll jetpack

【解决方案1】：

Jetpack runs a partial template for the loop (e.g. content.php)，通过 AJAX 检索 HTML 输出，然后将其“实时”附加到当前页面。它从不使用原始模板 (index.php)，因此您在那里编写了 2 个不同的循环并不重要。

您可以通过借用 Jetpack 的滚动检测和 AJAX 请求并调整其余部分来编写自己的解决方案。

【讨论】：

【解决方案2】：

您的服务器是否允许您监听两个不同端口上的请求？过滤掉你不想要的对象？

【讨论】：

【解决方案3】：

如果将滚动事件绑定到四个 Ajax 调用，使用不同的 id。

除此之外，您可以尝试重写有人讨论的插件Here

【讨论】：