WordPress： 初步認識 Loop 的功能

這幾天網站的主題換掉，也刪除一些外掛，為了測試各種主題與外掛，我還把網站遷移到我的電腦中，結果再遷移的時候發現，之前裝的備份外掛只能還原不能遷移= =，所以又改裝WPvivid遷移，還好可以完美遷移到我的電腦上，為了遷移又研究半天，折騰一翻之後終於搞定，在本機上測試出喜歡的外掛之後，就直接在伺服器上進行修改。

除了換主題之外，同時也安裝一些新的外掛，並修改一些功能上去，比如說捲動至底下會自動載入文章的功能 (infinite scroll)。我是使用Ajax Load More外掛來加入達成此功能，而且這外掛可以自定你要顯示的內容 (Repeater Templates)，裡面也有提供範本讓人修改，但沒付費只能使用一種預設範本。由於預設範本顯示出來的內容和我現在新設定的主題不同，所以我的目標就是把顯示結果變成跟主題相同或雷同。

既然Ajax Load More有提供修改功能，我就直接修改範本，原本想說可以去「主題編輯器」直接複製貼上，就可以顯示出和主題相同的結果，，亂弄的結果就是啥內容都顯示不出來，幸好查了一下WP文件之後，文章 (Post) 的標題、發佈時間、作者等資訊，都可以用WordPress的內建function取得。

The Loop

從官方的文件中，顯示文章的方式就是用 Loop 來實現。而且主題裡的程式碼跟文件中的程式說明挺像的，再來就是從裡面找出我要顯示的內容出來。

一個Loop循環的PHP程式架構如下：

<?php 
if ( have_posts() ) {
    while ( have_posts() ) {
        the_post(); 
        //
        // Post Content here
        //
    } // end while
} // end if
?>

從這裡可以看出就是運用while迴圈來取得文章，而迴圈裏面就是放入要顯示的內容。

通常最新文章清單都會含有文章標題、縮圖、發佈時間、作者、分類標籤、摘要等內容。

• 文章標題：the_title()
• 文章縮圖：the_post_thumbnail()
• 發布時間：the_time()
• 文章作者：the_author()
• 文章分類：the_category()
• 文章摘要：the_excerpt()

修改 Ajax Load More Repeater Templates

• 原始範本

預設範本已經秀出縮圖、標題、時間、摘要。

<li class="alm-item<?php if (! has_post_thumbnail() ) { echo ' no-img'; } ?>">
   <?php if ( has_post_thumbnail() ) {
      the_post_thumbnail('alm-thumbnail');
   }?>
   <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
   <p class="entry-meta">
       <?php the_time("F d, Y"); ?>
   </p>
   <?php the_excerpt(); ?>
</li>

• 仿 Ashe 主題

自行把主題的程式碼加進來。

<li class="alm-item<?php if (!has_post_thumbnail()) { ?> no-img<?php } ?>">
   <?php if ( has_post_thumbnail() ) { the_post_thumbnail('alm-thumbnail'); }?>

   <?php
   $category_list = get_the_category_list( ',  ' );
   if ( ashe_options( 'blog_page_show_categories' ) === true && $category_list ) {
         echo '<div class="post-categories">' . $category_list . ' </div>';
   }
   ?>

   <?php if ( get_the_title() ) : ?>
   <h2 class="post-title">
      <a href="<?php esc_url( the_permalink() ); ?>"><?php the_title(); ?></a>
   </h2>
   <?php endif; ?>

   <p class="entry-meta"><?php the_author(); ?>  /  <?php the_time("Y-m-d"); ?></p>

   <?php
   if ( ashe_options( 'blog_page_post_description' ) === 'content' ) {
      the_content(''); 
   } elseif ( ashe_options( 'blog_page_post_description' ) === 'excerpt' ) {
      ashe_excerpt( 50 );
   }
   ?>

   <div class="read-more" style="text-align:left;">
      <a href="<?php echo esc_url( get_permalink() ); ?>"><?php esc_html_e( 'read more','ashe' ); ?></a>
   </div>
<br>
<hr>
</li>

結語

雖然通過外掛來完成無限載入功能，但還是可以通過程式改寫來完成屬於自己的風格，也趁機對WordPress的內部程式有更進一步的認識，希望以後能越來越了解相關程式，做出自己的主題或外掛功能出來。

參考

• The Loop « WordPress Codex
• the_excerpt() | Function | WordPress Developer Resources
• Implementation Guide | Docs | Ajax Load More (connekthq.com)