一個網站最基本的佈局不外乎是頁首 (header)、主體 (body)、頁尾 (footer) 和側邊欄 (sidebar)，其中側邊欄常見於文章頁面、彙整頁面及分類頁面，反而首頁比較不常看到。套版的先後順序是以出現頻率最高的先進行，因此頁首、主體和頁尾，我們先搞定這三個再說。

圖：精美的佈局草圖！

範本組件

函式：get_template_part

這是在佈景主題中的常用的函式，它用來載入範本組件 (template part) 的檔案，以利於在不同的地方可以重覆地使用。來看看它的基本用法和一些例子，接著再看實際的程式碼來瞭解如何使用它。

基本用法

get_template_part( $slug, $name = null, $args );

• $slug (必需)：不含後綴的範本組件主檔名。
• $name (選用)：用於擴充範本組件主檔的選項。
• $args (選用)：變數的集合。WordPress 5.5 版本以上才有。

檔案不含有 .php 副檔名。這個函式會自己補上。另外要注意的是，第三個參數較舊的 WordPress 版本並沒有，如果有使用的話，要限制使用者的版本在 5.5 以上。

使用範例

1. 基本用法

如果你想要載入 content.php：

get_template_part( 'content' );

2. 使用 name 參數擴充

如果你想要載入特定於文章的模板，如 content-single.php:

get_template_part( 'content', 'single' );

這會先試著找到 content-single.php 是否存在。如果不存在，它會退回到 content.php 進行載入。

3. 進階用法

如果我們的網站文章有多種格式，例如 video、audio 等等，為了進入不同格式文章有不同的呈現方式，可以這樣做：

$post_format = get_post_format();
get_template_part( 'content', $post_format );

當文章格式為 video 時，這會嘗試載入 content-video.php。如果那個檔案不存在，則會退回到 content.php，這種作法很常見喔。

頁首

圖：header.php 程式碼

打開 header.php，在上圖第 11 行的部分，看到載入了 site-header.php 這個檔案。

圖：site-header.php 程式碼

打開 site-header.php，在上圖第 18 至 19 行的部分，看到又載入了兩個檔案。

• site-branding.php：網站的 Logo 位置。
• site-nav.php：網站的主要的導覽選單的位置。

可以看到檔案的上方有定義一些 wrapper_classes，這是原本的佈景主題的設計，在有無 Logo，有無選單的時候會有不一樣的外觀變化。我們應該不需要的話，可以都移除。

注意

第 13 至 15 行：兩個 <div>標籤，加上<main> 標籤的起點。並沒有關閉的標籤，因為它在頁尾才關閉 ，中間的部分是主體區域。

頁尾

圖：footer.php 程式碼

打開 footer.php，有幾個地方值得一提。

第 1 至 3 行：</main> 和兩個 </div> 關閉標籤。
第 5 行：載入 footer-widgets 這個範本組件，裡面放了載入一組小工具的函式碼。第 9 至 27 行：如果有設定 footer 這個選單，該位置就會出現選單喔！
第 30 至 40 行：如果設定 Logo，則顯示 Logo，否則就只顯示網站的名稱或連結。
第 43 至 47 行：如果有設定隱私權政策的連結，則會出現。
第 49 至 56 行：佈景主題的版權連結。
第 64 行：wp_footer 函式中有許多鉤點，用來插入額外的 HTML 或 JavaScript 程式碼或載入語法。

頁尾的部分，看來需要有清楚且分層的底色，把不同的資訊區域給區隔開來。

主體

圖：index.php 程式碼

在主體的部分相對單純，可以看到第一行的 get_header 和最後一行的 get_footer 分別載入頁首和頁尾。中間的部分則為主體的區域。

總結

有沒有發現今天文章包括總結特別短？因為中秋連假開始啦，身為北漂族，要趕搭車回台南，明天才會將 Tailwind CSS 的樣式套到佈景主題中。
祝大家中秋節快樂！

課後思考：

首頁似乎都是頁首、本體、頁尾這樣的佈局，除了這樣的佈局，你有什麼大膽的想法嗎？

前篇解答參考：

雖然在前篇文章說了特別多關於使用框架的好處，不過如果是初學者，筆者會建議手刻 CSS，因為只有這樣子學習累積經驗，對各種 CSS 屬性的用法和在畫面上的呈現非常熟悉後，搭配 CSS 框架更能得心應手，因為會更清楚如何微調，達到自己理想中的畫面唷。