修改WordPress Jetpack插件使用'类'而​​不是'ID'属性

Question

我想要实现的目标:在同一页面上为多个列启用无缝和同时无限滚动,每个列都提取不同的内容集,即一列显示最新帖子,而另一列显示特定的最新帖子标签.

每一列都使用不同的循环,这样它们就不会相互混淆,这就是我所使用的代码(只是为了让你了解我是如何做到的):

文件: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,所以对于那些了解JavaScript和PHP的人来说,它会更容易一些.

现在,正如这里所说,启用无限滚动,我们需要首先为它提供"无限滚动应添加其他帖子的HTML元素的ID." 由于它不接受多个ID,因此无法在同一页面上的多个列上同时进行无限滚动.

这个想法:所以,也许如果我修改它来接受一个class而不是一个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'模块.可以在此处找到进一步的说明.

Answer 1

您的服务器允许您监听两个不同端口上的请求吗？在每个对象进入视图时过滤掉您不想要的对象？