有的時候希望在 WordPress 網站上顯示一些特殊形式的 頁面 ，就需要用到自定義頁面模板。本文以 WordPress 內置的 TwentyElven（2011） 和 TwentyTen（2010） 主題為例做個詳細介紹。與 WordPress 官方文檔中的 介紹 不同的是，這里著重介紹 WordPress 默認主題靜態頁面模板的內部結構，以方便我們在自定義的時候進行修改。
?
文章先介紹一下 WordPress 主題的大致結構，然后以 WordPress 自帶的主題，主要是 2011 主題為例說明頁面模板的組成，最后給 3 個制作自定義頁面模板的樣例。
?
1. WordPress 主題的大致結構
以 Twenty Eleven（2011）主題為例，其文件夾下的文件組織結構如下所示。其中 // 號后面的內容為我的注釋說明。相信即使是剛入門的朋友看了這個也能夠對 WordPress 的主題有個較全面地了解，修改主題就比較順利了。
?
在看下面的解釋之前，需要先了解一個情況，那就是 php 代碼的復用。我們看到的網頁并不一定是由一個單獨的 php 文件生成的，而是可以由一個主文件調用多個別的文件組合而成。這樣就方便代碼的復用：比如我想在每個網頁都顯示同樣的一段話，那就沒必要在每個不同網頁對 應的不同 php 文件里將這段話重復寫一遍，而只需要單獨建一個 php 文件來生成這段話，再在主文件中需要的地方引用這個文件就可以了。
?
WordPress 有個要求，即所有主題的頁面模板（主 php 文件，調用它即可形成某個網頁頁面），或者由它調用的模板中，必須在靠近開頭的地方包含?
wp_head()
?（通常放在
header.php
文件中，通過
get_header()
來調用），而在靠近結尾的地方包含?
wp_footer()
（通常放在
footer.php
文件中，通過
get_footer()
?來調用），因為 WordPress 需要在這些地方處理一些數據。所以如果我們打開一個主題中的文件，發現靠近開頭有?
get_header()
?而靠近結尾有?
get_footer()
，則它必然是一個主 php 文件，用于顯示某個/某類網頁頁面。
?
為了避免混淆，下面統稱一個單獨的 php 文件為
模板
，如果是主文件則又稱為
頁面（或頁面模板）
，生成的我們瀏覽到的稱之為
網頁
。至于 php 文件調用，可以通過自寫函數實現，也可以直接使用 php 的
include
或者
require
方法，涉及到 php 編程的問題，這里不再介紹。
twentyelven 文件夾內部文件組織結構圖：
// 先介紹重要的
│ index.php // 主題的引導文件，也是默認的首頁的模板
│ header.php
// 這個文件包含 HTML 的 <head> 部分（不顯示在網頁上，但是通過查看網頁源文件就能看到）， // 同時還可能包含一部分正文（HTML的 <body> 標簽內的東西）； // get_header() 就是調用它的。 // 比如水景一頁下面整個淺灰色色背景的部分都是在這個文件中處理的
│ footer.php
// 用于顯示頁面下面的內容，包含 </body> 標簽 // 比如水景一頁上面整個黑色背景的部分都是在這個文件中處理的
// 下面 9 個文件都是頁面模板，都調用了 get_header() 和 get_footer() // 并且一般都會調用 comments.php 以處理評論列表和評論框
│ 404.php // 用于顯示自定義 404 錯誤網頁的頁面模板
│ archive.php // 用于顯示文章存檔網頁的頁面模板，比如按日期存檔等頁面
│ author.php // 作者文章存檔頁面模板（顯示該作者所有文章列表網頁）
│ category.php // 分類頁面模板
│ image.php // 用于顯示圖片附件，頁面模板
│ page.php
// 用于顯示靜態頁面（page）的頁面模板，通過 get_template_part( 'content', 'page' ) 調用了 content-page.php
│ tag.php // 標簽頁面模板
│ single.php // 單一文章（post）頁面，這是標準形式的 post，調用了 content-single.php
│ showcase.php // 特色文章頁面模板；用這個模板來做首頁其實挺不錯的
// 下面這一組 11 個以 content 開頭的文件，都只是某個頁面的一部分，類似于上面的 comments.php 文件 // Twenty Ten 主題中用的是 loop 開頭
│ content-aside.php
│ content-featured.php
│ content-gallery.php
│ content-image.php
│ content-intro.php
│ content-link.php
│ content-page.php
│ content-quote.php
│ content-single.php
│ content-status.php
│ content.php
// 以上 11 個文件是用來處理網頁主體部分的； // 包含正文內容，包括文章（post）、靜態頁面（page），也就是我們通常所說的文章內容； // 2011 主題內置了幾種文章形式（post format），可針對不同的文章形式使用不同的模板； // 當然如果你樂意，使用同一個模板也沒有問題
│ comments.php
// 評論模板；這個不是一個單獨的頁面，需要在別的頁面中調用此模板 // 使用 comments_template( '', true ) 來調用
│ searchform.php // 搜索框模板
│ search.php // “搜索”頁面模板，還會調用 searchform.php 來顯示搜索框，這是個頁面模板
│ sidebar-footer.php
│ sidebar-page.php
│ sidebar.php // get_sidebar() 會調用此文件
// 這三個是用于顯示網頁上 WordPress 邊欄的模板 // sidebar.php 會根據情況調用 sidebar-page.php 或者 sidebar-footer.php 或者同時調用兩個
│ functions.php
// 主題自定義的一些功能函數，如果有的話可以覆蓋 WordPress 內建函數
│ rtl.css
│ style.css
// 這兩個是主題的樣式表文件，其中 rtl 只用于顯示從右到左寫法的語言
│ editor-style-rtl.css
│ editor-style.css
// 這兩個是主題提供給后臺的編輯器樣式文件，一般不修改
│ screenshot.jpg
│ screenshot.png
// 這兩個是主題的縮略圖
│ readme.txt // 主題的說明文檔
│ license.txt // 主題的許可證內容
├─colors // 文件夾，包含選擇黑色風格時需要調用的樣式文件（省略其下的文件）
│
├─images // 文件夾，包含主題網頁上用到的圖片（省略其下的文件）
│ │
│ └─headers // 文件夾，包含頂部背景圖片（省略其下的文件）
│
├─inc // 文件夾一些內部函數，基本不會自己修改（省略其下的文件）
│ │
│ └─images // 文件夾，包含一些圖片（省略其下的文件）
│
├─js // 文件夾，包含主題自己的 JavaScript 文件（省略其下的文件）
│
└─languages // 文件夾，包含語言文件的文件夾（省略其下的文件）
2010 主題與之相差不是太多，不再啰嗦了。
?
2. 頁面模板結構
下面來介紹一個完整的頁面模板，仍是以 2011 主題為例。
根據前面的說明我們已經知道，實際上一個完整的頁面模板就是 page.php，但是它會調用 header.php 來形成頁頭，content-page.php 來處理靜態頁面文章，sidebar.php 來形成邊欄，最后是 footer.php 來形成頁腳。
?
其中 header.php、footer.php 和 sidebar.php 是全站一致的，我們一般不做改動，那么剩下的自定義部分就是 page.php + content-page.php 了。
?
結合 page.php 源代碼進行說明，其中 紅色字體 是我的注釋。下面是從 2011 主題中直接提出來的源代碼：
<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/上面全都是文件中的注釋，php 標簽內的注釋一般用 /* */ 包圍，單行可以直接在注釋前前用 // 如果要自定義頁面模板，需要在這里添加下面的代碼（綠色字體），TemplateName 就是模板名稱了。 我們在編輯頁面的時候，通過旁邊的下拉菜單選擇模板的時候看到的就是這個名字。
<?php /** * Template Name: TemplateName */ ?>
<div id="primary">
<div id="content" role="main"> 這兩行是 HTML 結構標簽
<?php while ( have_posts() ) : the_post(); ?> 開始處理內容
<?php get_template_part( 'content', 'page' ); ?> 調用 content-page.php，實際上可以將 content-page.php 里的內容全部復制過來替換掉這一行
<?php comments_template( '', true ); ?> 調用評論 comments.php
<?php endwhile; // end of the loop. ?> 內容處理結束
</div><!-- #content -->封閉 id="content" 那個 div
</div><!-- #primary -->封閉 id="primary" 那個 div
可以在這里加上 <?php get_sidebar() ?> 那么頁面就有了邊欄了，不過就需要調整樣式了（style.css）
<?php get_footer(); ?>
?
3. 三種自定義頁面模板方式
實際上是 4 種吧，最后的 C 也可以象前面的 A 和 B 那么分的
?
A. 簡單的頁面模板 – 包含頁面內容
如果只是想簡單地在該頁面中增加一些別的東西，比如放個 Google 地圖什么的，或者將新浪微博嵌入進頁面，同時還保留頁面其它東西不變，我們就可以直接將自己的代碼或內容挑個適當的地方插入進去就行了。
看了上面的注釋，應該很容易找到自己要放東西的位置了吧？比如我的 Buzz 頁面（該頁面評論被我關閉了，所以看不到評論和評論框），現在就是在
<?php get_template_part( 'content', 'page' ); ?>
?
和
<?php comments_template( '', true ); ?>
?
之間插入了新浪微博的小工具代碼（新浪微博 ——> 頂部工具條的 帳號 ——> 我的工具中）。
?
B. 簡單的頁面模板 – 不包含頁面內容
很多時候我們的自定義頁面模板中都不會用到頁面內容，也就是說，我們新建了這個模板，然后編輯該頁面內容的時候都讓內容留空了。我們只希望它顯示適用于這個頁面的自定義內容，比如水景一頁網站上的 鏈接 ?和 購物通道 頁面。這樣的話就 可以將上面標記為藍色字體的代碼全都替換成自己的自定義內容 。
?
C. 復雜的頁面模板
可是，很多主題會針對文章（post）和靜態頁面（page）的內容來設計樣式（style.css）。為了讓自定義內容樣式與網站上其它頁面的樣 式一致，我們就需要用到 content-page.php 文件中的代碼了。將其中的代碼（注釋就不要了吧）復制過來替換掉上面
<?php get_template_part( 'content', 'page' ); ?>
?
這一行代碼，形成：
<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/上面全都是文件中的注釋，php 標簽內的注釋一般用 /* */ 包圍，單行可以直接在注釋前前用 // 如果要自定義頁面模板，需要在這里添加下面的代碼（綠色字體），TemplateName 就是模板名稱了。 我們在編輯頁面的時候，通過旁邊的下拉菜單選擇模板的時候看到的就是這個名字。
<?php /** * Template Name: TemplateName */ ?>
<div id="primary">
<div id="content" role="main"> 這兩行是 HTML 結構標簽
<?php while ( have_posts() ) : the_post(); ?> 開始處理內容
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
</header><!-- .entry-header --> 這 3 行是內容標題，不想要就刪除
<div class="entry-content">
<?php the_content(); ?> 這 1 行是內容，不想要就刪除
<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?> 這 1 行是……我也不知道是什么東西，不想要就刪除
</div><!-- .entry-content -->
<footer class="entry-meta">
<?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>
</footer><!-- .entry-meta -->這 3 行是那個“編輯”按鈕，不想要就刪除
</article><!-- #post-<?php the_ID(); ?> -->
<?php comments_template( '', true ); ?> 調用評論 comments.php
<?php endwhile; // end of the loop. ?> 內容處理結束
</div><!-- #content -->封閉 id="content" 那個 div
</div><!-- #primary -->封閉 id="primary" 那個 div
可以在這里加上 <?php get_sidebar() ?> 那么頁面就有了邊欄了，不過就需要調整樣式了（style.css）
<?php get_footer(); ?>
?
然后我們可以將代碼放在
<?php the_content(); ?>
?
這一行的前面或者后面，自己調整。 ?
?
本文發表于 水景一頁 。永久鏈接：< http://cnzhx.net/blog/wordpress-default-theme-page-template/ >。轉載請保留此信息及相應鏈接。
?
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
