定製頁面模板
現在我們訪問“關於”頁面，可以看到它的格式就像一個帖子，這不是我們想要的。我們只希望頁面有標題，我們不想要元數據，閱讀更多，以及類似的東西。 所以爲了改變這一切，我們須要創建一個新文件並將其保存爲page.php。
我們將index文件中的代碼複製，粘貼到page文件中，然後修改一些內容，用下面的代碼覆蓋while內部的 get_template_part（）
<article class="page">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
</article>
我們到前端刷新，會發現服務頁和關於頁使用了相同的格式；接下來將學習如何爲某些頁面創建單獨的模板。
我們將新建一個文件命名爲page-about.php，將page文件中的代碼複製，粘貼到新文件中，然後在h2標題行下方添加一行電話號碼，如下：
<article class="page">
<h2><?php the_title(); ?></h2>
<div class="well">Company Phone: 555-555-5555</div>
<?php the_content(); ?>
</article>
保存然後回到前端刷新頁面，現在應該只有關於頁發生變化。
我們成功的定製了單個頁面，單這不是最好的方法，當你想在某些頁面上擁有特定的樣式或內容時，更好的辦法是使用模板，我們要擺脫頁面文件。現在我們刪除page-about.php文件，然後創建一個模板。
創建一個新文件並將其保存爲company-template.php。 我們將複製page.php文件中的內容，並將其粘貼到companytemplate.php文件中，然後在其頂部添加聲明註釋，注意這個註釋要放在php標籤中；然後在the_title（）下方，輸入電話號碼，代碼如下：
<?php
/*
Template Name: Company Layout
*/
?>
<?php get_header(); ?>
<div class="container content">
<div class="main block">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<article class="page">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<p class="phone">1-800-555-5555</p>
</article>
在給其加點樣式：
.phone {
background: #f4f4f4;
border: 1px solid #ccc;
padding: 8px;
font-weight: bold;
}
保存代碼，然後我們進入後臺，頁面->關於頁，重新編輯它，在右邊找到模板，選擇Company Layout，點擊更新。
回到前端刷新
我們跳轉到服務頁，不會看到號碼； 如果你希望它出現在服務頁，只需進入“服務”頁面並選擇“Company-Layout”， 電話號碼就會出現。
創建子導航
接下來我們學習如何創建子導航菜單，前面我們爲關於頁創建了兩個子頁面：團隊 和 FAQ，現在我們讓關於頁的兩個子頁面顯示出來，這個方法適合任何具有子項的頁面。
1、我們先到後臺的關於頁中移除Company—Layout模式，讓頁面不顯示電話號碼
2、然後進入page.php中，在article標籤下面添加 php wp_list_pages（），代碼如下：
<article class="page">
<?php wp_list_pages(); ?>
<h2><?php the_title(); ?></h2>
<p class="phone">1-800-555-5555</p>
<?php the_content(); ?>
</article>
保存代碼，讓我們到前端頁面看看發生了什麼：
可以看到我們在WordPress網站上的所有頁面都被列出來了，但我們只想獲取“關於”頁面及其子頁面，所以我們再轉到page.php文件，就在wp_list_pages（）之上添加一些代碼，
<article class="page">
<?php
$args = array(
'child_of' => get_top_parent(),
'title_li' => ''
);
?>
<?php wp_list_pages($args); ?>
如果我們刷新頁面，我們將得到一個錯誤，因爲沒有名爲get_top_parent（）的函數。 讓我們進入functions.php並在最下面，創建一個名爲get_top_parent（）的函數。代碼如下
function get_top_parent(){
global $post;
if($post->post_parent){
$ancestors = get_post_ancestors($post->ID);
return $ancestors[0];
}
return $post->ID;
}
保存代碼，刷新頁面：
關於頁的子菜單出現了，我們回到page.php並在article標籤內創建一個ul標籤。 在ul標籤上方，創建一個nav標籤，併爲其提供一個nav和sub-nav類。 現在在ul標籤下，我將放置一個span標籤，併爲其提供一個父級鏈接。 在它裏面，我們將放置一個a標籤，它將轉到<？php echo get_the_permalink（）;？>。 給它傳遞get_top_parent（）函數。 然後，對於鏈接文本我們會說<？php echo the_title（）;？>，代碼如下：
<nav class="nav sub-nav">
<ul>
<span class="parent-link">
<a href="<?php echo get_the_permalink(get_top_parent()); ?>">
<?php echo get_the_title(get_top_parent()); ?>
</a>
</span>
<?php
$args = array(
'child_of' =>get_top_parent(),
'title_li' => ''
);
?>
<?php wp_list_pages($args); ?>
</ul>
</nav>
現在保存代碼，刷新頁面看一下
如果我們轉到服務頁面，即使沒有子鏈接，它仍將具有此功能。 因此，我們將在functions.php文件中創建另一個短函數並調用page_is_parent。 然後，我們創建全局$ post並將get_pages（）賦值給$ pages，在這裏，我們將 ‘child_of=’.$post->ID 作爲參數傳遞給get_pages（）。然後返回我們想要的頁數，我們會計算返回的頁數，如果頁數大於零，那麼我們就知道它是父級：
function page_is_parent(){
global $post;
$pages = get_pages('child_of='.$post->ID);
return count($pages);
}
我們回到page.php並在
<?php if(page_is_parent() || $post->post_parent > 0): ?>
<nav class="nav sub-nav">
。。。。。。
</nav>
<?php endif; ?>
保存代碼，然後返回服務頁面刷新。 我們可以看到菜單現在已經消失了，但是如果我們去關於頁，菜單仍然存在，因爲它有子頁面。
現在我們需要的功能已經正常工作，接下來我們爲子菜單添加一些樣式，讓它更好看：
.sub-nav {
margin-top: 10px;
float: right;
width: 300px;
}
.sub-nav ul {
float: right;
}
.sub-nav .parent-link {
font-weight: bold;
color: #000;
float: left;
margin-right: 20px;
padding-right: 20px;
border-right: 1px solid #009acd;
}
.sub-nav .parent-link a {
font-weight: bold;
color: #000;
}
.sub-nav .current_page_item {
font-weight: bold;
}
最後我們清除一下浮動，轉到page.php文件中，在nav結束標籤下方添加< div class=“clr” >，然後在樣式表中添加以下樣式：
.clr{
clear:both;
}
保存回到前端頁面刷新：
在下一節中，我們將介紹小工具（widgets）。
