為你的 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 網站模板框架建立起始文件