2013-02-16 41 views
7

我試圖實現的目標:啓用無縫滾動&同一頁面上的多個列同時無限滾動,每個列都拉動不同一組內容,即一列顯示最新帖子,另一列顯示特定標籤的最新帖子。修改WordPress Jetpack插件使用「類」而不是「ID」屬性

每一列使用不同的循環,讓他們永遠不要招惹對方,這我已經使用的代碼(僅給你的,我如何做一個想法):

文件: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.phpinfinity.js,所以對於瞭解JavaScript和PHP的人來說,看起來會更容易一些。

現在的事情是,as stated here,要啓用無限滾動,我們需要首先爲它提供「無限滾動應添加額外帖子的HTML元素的ID」。而且由於它不接受多個ID,因此無法在同一頁面的多個列上啓用同時無限滾動。

的想法:所以,也許如果我修改它接受class而不是id屬性的,我可以得到多列無限滾動的工作。

問題是,我該怎麼做?


雖然盡我所能來解決自己的問題(我不能),這裏是我所遇到過一些重要的位,我think'd使它更容易爲你提供幫助。

[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'菜單啓用'Infinite Scroll'模塊。進一步的說明可以找到here

+0

難道你不能只調用初始化函數兩次,每個ID一個? – mornaner 2013-02-19 16:12:37

+0

@mornaner你指的是哪個函數?你能更清楚一點嗎? – 2013-02-19 17:33:26

+0

在你鏈接的文檔頁面上的'Examples'部分:'函數twenty_twelve_infinite_scroll_init()' – mornaner 2013-02-19 22:27:37

回答

0

您的服務器允許您監聽兩個不同端口上的請求嗎?過濾每個你不需要的對象,因爲它們進入視圖?

0

如何使用不同的id將滾動事件綁定到四個Ajax調用。

以外,你可以嘗試rewritting插件有人討論Here

1

Jetpack的runs a partial template for the loop (e.g. content.php),檢索由AJAX輸出HTML,然後追加它「活」到當前頁面。它從不使用原始模板(index.php),所以你寫了2個不同的循環並不重要。

您可以通過借用Jetpack的滾動檢測和AJAX請求來編寫自己的解決方案,並調整剩餘的解決方案。

相關問題