WordPress 的 Template page 與 Content Template 的介紹與用法

大家好，接著前兩篇的WordPress 網站主題開發文章，我們今天來談一下WordPress 的一些在網站開發上經常會使用到的功能頁面與及介紹它們的功能和用法，這會是一個很重要的部份喔! 大家都來細心看看吧!

回顧我們在第一篇文章「 WordPress 自制個人主題風格 (Custom Themes)」介紹到的幾個重要頁面，我們再來詳細一點說說在WordPress 自訂自己的主題時，我們常常會觸及到的那些頁面，它們有但不限於:

1. index.php
2. functions.php
3. style.css
4. header.php
5. footer.php
6. template.php
7. single.php
8. search.php
9. 404.php

以上的這一些頁面名稱就是WordPress 的重要功能頁面，我們可以透過覆寫這些頁面的內容來顯示我們自訂的個人主題介面。今天我就先來介紹 2 個我們必定會用到也常常會更改的兩個頁面 : Template page 及與它對應的 Content Template。 這兩個頁面的功能都是用來顯示一些我們在WordPress 上輸入的文章內容 (archive) 及頁面內容 (page)。但我們的網頁上可能會有一個以上或幾個的不同主題類別的文章，這個時候我們就會希望有能分門別類的指定頁面來顯示它們，可以令讀者更清晰來區分。舉個例子 : 我有一篇文章是用來分享一些關於WordPress 建站的技術文章，我把它歸到一個叫「技術分享」的類別。那麼我如果想要創立一個獨立的頁面來介紹它們，我就先要建立它的template page, 做法是去你的主題目錄下(例如 “wordpress\wp-content\themes\wantplay”)，新建一個php file，我先叫它 “technologyshare.php” 好了，打開它並在它最開頭打上以下的代碼:

<?php
/*
Template Name: Technology Share
*/
?>

在以上的代碼中我們定義了一個新template name 叫 Technilogy Share 然後儲存好。我們轉到WordPress的後台，打開一個新 page 的介面，把Title 改成你想顯示的名字，我就叫「技術分享網頁」好了。在同一個畫面右手邊的欄位中找到「頁面屬性」(page attributes)，在它裡面的Template欄往下拉就可以看到一個新的選擇 “Technology Share”。如果你把這個頁面(Page) 的Template 欄選擇了Technology Share，那麼所有經「技術分享網頁」這個Page 顯示的內容都會採用technologyshare.php 所設定的介面包括 (HTML, CSS, PHP 等等)，就是說它會變成「技術分享」的類別的顯示指定頁面 Landing page。我們就可以加上HTML 跟CSS 裝飾成你想要的版面，最後我們就在”technologyshare.php” 裡面指定它會顯示什麼樣的內容模板content template，我們可以看看以下的代碼

<?php 
    while ( have_posts() ) : the_post(); 
        get_template_part( 'content', 'tmpl_archives' ); 
    endwhile; 
?>

get_template_part( ); 這個功能就是告訴系統從系統導入的文章內容在”technologyshare.php”裡會去根據你指定的模板來顯示。
那麼我們就回到”technologyshare.php” 相同的目錄下建了一個模板的檔案，首先建立一個PHP file 名字叫作”content-tmpl_archives.php”。檔案的名字是對應”technologyshare.php” 裡面的get_template_part( ‘content’, ‘tmpl_archives’ ); 呼叫功能的名字，”content” 對應 content，”-tmpl_archives”就對應指定的page 名字，改名時請多加留意。這一步做完後，我們就成功完成了一個Landing page。

有了Landing page 指定頁面後，我們就要去設定”content-tmpl_archives.php” 篩選會顯示什麼文章屬性，在一篇文章裡會有非常多的屬性比如:

• post title
• archive author
• archive year
• archive month
• archive date
• permalink
• categories
• tags .. 等等

<?php
    the_date();
    the_author();
    the_title();
    the_content();
?>

我們不需要顯示所有的東西，因為這樣會顯得版面很雜亂，我們可以先選幾個屬性，再用CSS 改好它們的版面設計，這樣我們就可以得到一個簡潔明了的文章內容版面了。

在這裡我先提一下在WordPress 的文章頁面，有一個屬性欄叫 「類別」(categories)，作用就是標注每個文章的類別，我們先在這裡使用它提供的連結新建一個新類別，名字叫作「技術分享」 Slug欄就寫 "technology"。然後回到 "technologyshare.php "裡加上以下代碼:

$all_posts = new WP_Queryarray( 
                              'post_type' => 'post',
                              'category_name'=>'technology',
                              'post_status' => 'publish', 
                              'posts_per_page'=>-1 )
                              );

這是一段WordPress 的search query，目的是搜尋所有已經發佈並且標籤了名字叫作「技術分享」 Slug 叫 “technology” 的所有文章。設定完後，我們所有標籤了「技術分享」的文章都會自動透過”technologyshare.php “的版面作為Landing page 顯示，文章內容屬性就會透過”content-tmpl_archives.php” 篩選顯示，達到我們想要的版面設計了。