Изменить WordPress Jetpack плагин использовать «Класс» вместо «ID» Атрибут

Question

Я пытаюсь для того чтобы достигнуть: Включить бесшовные & одновременно бесконечный скроллинг для нескольких столбцов на одной и той же странице, каждый из которых тянет в другой набор содержимого, т. е. один столбец показывает последние сообщения, а другой - последние сообщения от конкретных тегов.

Каждый столбец использует другой цикл, так что они никогда не беспорядок друг с другом, и это код, который я уже используется (только, чтобы дать вам представление о том, как я это делаю):

файла: 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(); ?> 

Как я планирую сделать это: модуль 'Infinite Scroll' в Jetpack представляет собой лишь два файла - infinity.php и infinity.js, поэтому для тех, кто знает JavaScript и PHP, было бы немного легче изучить.

Теперь дело в том, что as stated here, чтобы включить бесконечную прокрутку, мы должны сначала предоставить ему «Идентификатор HTML-элемента, на который Infinite Scroll должен добавлять дополнительные сообщения». И поскольку он не принимает несколько идентификаторов, невозможно включить одновременную бесконечную прокрутку по нескольким столбцам на одной странице.

Идея: Так, может быть, если бы я изменить его, чтобы принять class вместо атрибута id, я могу получить бесконечную прокрутку на несколько столбцов работать.

Вопрос, как мне это сделать?

---

Стараясь изо всех сил, чтобы решить эту проблему сам (который я не мог), вот некоторые важные биты я попадались, которые я think'd сделать его более легким для вас, чтобы помочь.

В [infinity.php][5]

• 'container' => 'content' говорит, что content это идентификатор по умолчанию для элемента контейнера.

• 'id' => self::get_settings()->container, определяет id для звонка в JavaScript.

В [infinity.js][6]

• var id = $(this).attr('id'), убеждается, что что это id атрибут и НЕ class.

Поскольку я не знаю JS и достаточно PHP, возможно, я пропустил много других важных бит. Просто подумал, что эта информация поможет тем, кто пытается помочь.

Дайте мне знать, если я не ясно.

ПРИМЕЧАНИЕ: Если вы запускаете тест/Dev WordPress сайт где-нибудь, и хотел бы помочь, пожалуйста, установите Slim Jetpack плагин (версия Jetpack plugin, что не требует подключения к WordPress. com) и включите модуль «Бесконечный прокрутки» из меню «Jetpack». Дальнейшие инструкции можно найти here.

Answer 1

Ваш сервер позволит вам слушать запросы на двух разных портах? фильтровать объекты, которые вы не хотите в каждом, когда они появляются?

Answer 2

Как связать событие прокрутки с четырьмя вызовами Ajax, используя разные идентификаторы.

Кроме этого, вы можете попробовать переписано плагином кто-то обсуждает, что Here

Answer 3

Jetpack runs a partial template for the loop (e.g. content.php), получает выход HTML с помощью AJAX, а затем добавляет его «вживую» на текущей странице. Он никогда не использует оригинальный шаблон (index.php), поэтому не имеет значения, что вы написали там 2 разных цикла.

Возможно, вы сможете написать собственное решение, зайдя на обнаружение прокрутки Jetpack и запросы AJAX и адаптировав остальные.