Zmienić WordPress Jetpack Plugin korzystać z „klasa” zamiast „ID” Atrybut

Question

Co Próbuję achive: Włącz bezproblemową & jednoczesne nieskończone przewijanie dla wielu kolumn na tej samej stronie, z których każdy ciągnie w inną zestaw treści, tj. jedna kolumna pokazuje najnowsze posty, a druga pokazuje najnowsze posty ze znacznika .

Każda kolumna wykorzystuje inną pętlę, tak że Nigdy nie zadzieraj ze sobą, a to kod mam rachunek (tylko daje wyobrażenie o tym, jak ja to robię):

File: 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(); ?> 

Jak mam zamiar zrobić: moduł 'nieskończony Scroll' w Jetpack stanowi tylko dwa pliki - infinity.php i infinity.js, więc dla kogoś, kto zna JavaScript i PHP, łatwiej byłoby zajrzeć do niego.

Teraz rzecz polega na tym, as stated here, aby umożliwić nieskończone przewijanie, musimy najpierw dostarczyć mu "identyfikator elementu HTML, do którego nieskończony zwój powinien dodawać dodatkowe posty." A ponieważ nie akceptuje wielu identyfikatorów, nie można włączyć jednoczesnego przewijania nieskończonego na wielu kolumnach na tej samej stronie.

Pomysł: Więc może gdybym go zmodyfikować, aby zaakceptować class zamiast atrybutu id, mogę nieskończone przewijanie na wielu kolumnach do pracy.

Pytanie brzmi:, w jaki sposób mogę to zrobić?

---

Starając moja najlepiej rozwiązać problem sama (co nie mogłem), oto kilka ważnych bitów Natknąłem, które think'd ja ułatwiają Ci pomóc.

W [infinity.php][5]

• 'container' => 'content' mówi, że content jest domyślny identyfikator elementu pojemnika.

• 'id' => self::get_settings()->container, definiuje id dla JavaScript, aby zadzwonić.

W [infinity.js][6]

• var id = $(this).attr('id'), upewnia się, że jest to atrybut id i NIE class.

Ponieważ, nie wiem, JS i tyle PHP, mogłem pominąć wiele innych ważnych bitów. Pomyślałem, że ta informacja pomoże tym, którzy próbują pomóc.

Proszę dać mi znać, jeśli nie jestem jasne.

UWAGA: Jeśli używasz test/dev witryny WordPress gdzieś i chciałby pomóc, prosimy o zainstalowanie Slim Jetpack wtyczki (wersję Jetpack plugin który nie wymaga podłączenie do WordPressa. com) i włączyć moduł "Infinite Scroll" z menu "Jetpack". Dalsze instrukcje można znaleźć here.

Answer 1

Czy twój serwer pozwoli ci słuchać żądań na dwóch różnych portach? filtrować obiekty, których nie chcesz w każdym z nich, gdy są widoczne?

Answer 2

Co powiesz na powiązanie zdarzenia przewijania z czterema wywołaniami Ajax, używając różnych identyfikatorów.

Poza tym można spróbować rewritting ktoś wtyczki omawia że Here

Answer 3

Jetpack runs a partial template for the loop (e.g. content.php), pobiera dane wyjściowe HTML, AJAX, a następnie dołącza go „na żywo” do bieżącej strony. Nigdy nie używa oryginalnego szablonu (index.php), więc nie ma znaczenia, że ​​napisałeś tam 2 różne pętle.

Możliwe, że będziesz w stanie napisać własne rozwiązanie, pożyczając wykrywanie przewijania Jetpack i żądania AJAX i dostosowując pozostałe.