為你的 WordPress 網站模板框架建立起始檔案

在之前的課程中，您已經瞭解並學習了主題框架的工作方式和開發途徑。

現在是時候深入探討一些程式碼了！

在本教程中，您會採用一個基本的主題，然後編輯模板檔案，為主題框架新增相關掛鉤和函式做好準備。本教程旨在整理主題，減少程式碼重複，這意味著您要為迴圈建立包含檔案（include files）。

您將不必在子主題中建立重複迴圈，當您建立新的模板檔案時，或者您需要編輯迴圈時，您只需做一次就行了。

您需要做的是

跟隨本教程，您需要

安裝一個 WordPress 開發環境
GitHub 庫相關係列中的起始檔案或者起始主題檔案
一個程式碼編輯器

為迴圈建立包含檔案

我會為我的框架建立三個迴圈：

一個用於存檔（包括主部落格頁面）
一個用於單篇文章
一個用於頁面

這是因為我想讓其中的每一個迴圈與其他的顯示起來都略有不同。

儘管將會有三個迴圈，但相比較於每一個模板檔案中都包含一個迴圈而言，這會更加高效。

主迴圈

主迴圈會用於存檔和主部落格頁面。在您的主題資料夾中，建立一個名為 loop.php 的檔案。

從 archive.php 中將下列程式碼複製到 loop.php 檔案中：

```
<?php
```

/* Queue the first post, that way we know if this is a date archive so we can display the correct title.

 * We reset this later so we can run the loop properly with a call to rewind_posts().

```
 */
```
```
if ( have_posts() )
```
```
    the_post();
```
```
?>
```
```
 
```
```
        <h2 >
```
```
            <?php if ( is_day() ) { ?>
```

                Archive for <?php echo get_the_date();

```
            }
```
```
            elseif ( is_month() ) { ?>
```

                Archive for <?php echo get_the_date('F Y');

```
            }
```
```
            elseif ( is_year() ) { ?>
```

                Archive for <?php echo get_the_date('Y');

```
            }
```
```
            else {
```

                echo get_queried_object()->name;

```
            } ?>
```
```
        </h2>
```
```
 
```
```
<?php rewind_posts(); ?>
```
```
 
```
```
 
```
```
<?php // start the loop ?> 
```

<?php while ( have_posts() ) : the_post(); ?>

```
 
```

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

```
 
```
```
    <h2 >
```

        <a href="http://span<?php/span%20the_permalinkspan(/spanspan)/spanspan;/span%20span?>/span" title="<?php printf( esc_attr__( 'Permalink to %s', 'compass' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">

```
            <?php the_title(); ?>
```
```
        </a>
```
```
    </h2>
```
```
 
```
```
    <section >
```
```
 
```

        <?php if ( has_post_thumbnail() ) { ?>

            <a href="http://span<?php/span%20the_permalinkspan(/spanspan)/spanspan;/span%20span?>/span">

                <?php the_post_thumbnail( 'medium', array(

```
                    'class' => 'left',
```

                    'alt'   => trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt ))

```
                ) ); ?>
```
```
            </a>
```
```
        <?php } ?>
```
```
    </section>
```
```
 
```
```
    <section >
```

        <p>Posted on <?php the_date(); ?> by <?php the_author(); ?></p>

```
    </section>
```
```
 
```
```
    <section >
```
```
        <?php the_content(); ?>
```
```
    </section>
```
```
 
```
```
    <section >
```

        <?php if ( count( get_the_category() ) ) : ?>

```
            <span >
```

                Categories: <?php echo get_the_category_list( ', ' ); ?>

```
            </span>
```
```
        <?php endif; ?>   
```
```
    </section>
```
```
 
```
```
</article>
```
```
 
```
```
<?php endwhile; ?>
```
```
<?php // ends the loop ?>
```

您並不需要去顯示主部落格頁面上的標題，所以在第一個迴圈上新增一個條件標籤，以檢查我們是不是該網頁上：

```
if ( ! is_front_page() ) {
```
```
}
```

第一個迴圈當前會如下所示：

```
if ( ! is_front_page() ) {
```
```
 
```
```
    if ( have_posts() )
```
```
        the_post();
```
```
    ?>
```
```
 
```
```
            <h2 >
```

                <?php if ( is_day() ) { ?>

                    Archive for <?php echo get_the_date();

```
                }
```

                elseif ( is_month() ) { ?>

                    Archive for <?php echo get_the_date('F Y');

```
                }
```

                elseif ( is_year() ) { ?>

                    Archive for <?php echo get_the_date('Y');

```
                }
```
```
                else {
```

                    echo get_queried_object()->name;

```
                } ?>
```
```
            </h2>
```
```
 
```
```
    <?php rewind_posts();
```
```
 
```
```
} ?>
```

現在，您需要在相關網站模版檔案中包含這個迴圈。在 archive.php 和 index.php 檔案中，將現有的迴圈替換為 get_template_part() 標籤，其中包含了您的迴圈檔案：

```
<?php get_template_part( 'loop' ); ?>
```

現在您有了一個用於存檔的工作迴圈。

頁面迴圈

接下來，您將為頁面建立一個迴圈檔案。建立一個名為 loop-page.php 的檔案。

從現有的 page.php 檔案中將下列迴圈程式碼複製到 loop-page.php 檔案：

```
<?php
```

    // Run the page loop to output the page content.

```
 
```

     if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

```
 
```

        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

```
 
```

            <?php if ( ! is_front_page() ) { ?>

                <h2 ><?php the_title(); ?></h2>

```
            <?php } ?>
```
```
 
```
```
            <section >
```
```
                <?php the_content(); ?>
```

            </section><!-- .entry-content -->

```
        </article>
```
```
 
```
```
    <?php endwhile; ?>
```

現在在主題的所有頁面模板中 (page.php 和 page-full-width.php)，使用下面的程式碼替換迴圈：

<?php get_template_part( 'loop' , 'page' ); ?>

文章頁迴圈

最後，您將為單篇文章頁面建立一個迴圈檔案，用於普通的文章和您將來建立的任何自定義的文章型別。這和主迴圈是相似的，只是它不包括該文章的連結，也沒有初始迴圈，用來檢查我們的存檔情況。

建立一個名為 loop-single.php 和另一個名為 single.php 的檔案。

將 index.php 檔案中的內容複製到 single.php 檔案，並在檔案的初始位置編輯說明和迴圈，如下所示：

<?php get_template_part( 'loop', 'single' ); ?>

現在，在 single-loop.php 檔案中，複製程式碼到 loop.php 檔案，不包括查詢檔案的第一個迴圈。在迴圈內編輯初始標題標籤並取消連結，程式碼如下：

<?php while ( have_posts() ) : the_post(); ?>

```
 
```

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

```
 
```
```
    <h2 >
```
```
        <?php the_title(); ?>
```
```
    </h2>
```
```
 
```
```
    <section >
```
```
 
```

        <?php if ( has_post_thumbnail() ) { ?>

            <a href="http://span<?php/span%20the_permalinkspan(/spanspan)/spanspan;/span%20span?>/span">

                <?php the_post_thumbnail( 'medium', array(

```
                    'class' => 'left',
```

                    'alt'   => trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt ))

```
                ) ); ?>
```
```
            </a>
```
```
        <?php } ?>
```
```
    </section>
```
```
 
```
```
    <section >
```

        <p>Posted on <?php the_date(); ?> by <?php the_author(); ?></p>

```
    </section>
```
```
 
```
```
    <section >
```
```
        <?php the_content(); ?>
```
```
    </section>
```
```
 
```
```
    <section >
```

        <?php if ( count( get_the_category() ) ) : ?>

```
            <span >
```

                Categories: <?php echo get_the_category_list( ', ' ); ?>

```
            </span>
```
```
        <?php endif; ?>   
```
```
    </section>
```
```
 
```
```
</article>
```
```
 
```
```
<?php endwhile; ?>
```

儲存這兩個檔案。現在，所有的迴圈檔案您都準備好了。

小結

從長遠來看，使用一個主題框架之前，先整理主題並減少程式碼重複將會節省下不少的工作時間。

當您開始建立子主題並和父主題一起使用時，您會發現自己在建立自定義迴圈的同時，也在以一種完全正確的方式完成一個給定專案的內容。有了三個獨立的迴圈，您就會避免在子主題中建立重複的模板檔案，因為您只需要建立重複迴圈檔案就行了。

為你的 WordPress 網站模板框架建立起始檔案