定制頁面模板
現(xiàn)在我們訪問“關于”頁面一疯，可以看到它的格式就像一個帖子，這不是我們想要的炬搭。我們只希望頁面有標題蜈漓，我們不想要元數(shù)據(jù)，閱讀更多宫盔，以及類似的東西融虽。 所以為了改變這一切，我們須要創(chuàng)建一個新文件并將其保存為page.php灼芭。
我們將index文件中的代碼復制有额，粘貼到page文件中，然后修改一些內容彼绷，用下面的代碼覆蓋while內部的 get_template_part（）
<article class="page">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
</article>
我們到前端刷新巍佑，會發(fā)現(xiàn)服務頁和關于頁使用了相同的格式；接下來將學習如何為某些頁面創(chuàng)建單獨的模板寄悯。
我們將新建一個文件命名為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>
保存然后回到前端刷新頁面，現(xiàn)在應該只有關于頁發(fā)生變化洒擦。
我們成功的定制了單個頁面椿争，單這不是最好的方法，當你想在某些頁面上擁有特定的樣式或內容時秘遏，更好的辦法是使用模板丘薛，我們要擺脫頁面文件。現(xiàn)在我們刪除page-about.php文件邦危，然后創(chuàng)建一個模板洋侨。
創(chuàng)建一個新文件并將其保存為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阱表，點擊更新。
回到前端刷新
我們跳轉到服務頁贡珊，不會看到號碼最爬； 如果你希望它出現(xiàn)在服務頁，只需進入“服務”頁面并選擇“Company-Layout”门岔， 電話號碼就會出現(xiàn)爱致。
創(chuàng)建子導航
接下來我們學習如何創(chuàng)建子導航菜單，前面我們?yōu)?strong>關于頁創(chuàng)建了兩個子頁面：團隊 和 FAQ寒随，現(xiàn)在我們讓關于頁的兩個子頁面顯示出來糠悯，這個方法適合任何具有子項的頁面。
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>
保存代碼，讓我們到前端頁面看看發(fā)生了什么：
可以看到我們在WordPress網(wǎng)站上的所有頁面都被列出來了判帮，但我們只想獲取“關于”頁面及其子頁面局嘁，所以我們再轉到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（）的函數(shù)晌畅。 讓我們進入functions.php并在最下面但指，創(chuàng)建一個名為get_top_parent（）的函數(shù)。代碼如下
function get_top_parent(){
global $post;
if($post->post_parent){
$ancestors = get_post_ancestors($post->ID);
return $ancestors[0];
}
return $post->ID;
}
保存代碼，刷新頁面：
關于頁的子菜單出現(xiàn)了棋凳，我們回到page.php并在article標簽內創(chuàng)建一個ul標簽拦坠。 在ul標簽上方，創(chuàng)建一個nav標簽剩岳，并為其提供一個nav和sub-nav類贞滨。 現(xiàn)在在ul標簽下，我將放置一個span標簽拍棕，并為其提供一個父級鏈接晓铆。 在它里面，我們將放置一個a標簽绰播，它將轉到<骄噪？php echo get_the_permalink（）;？>蠢箩。 給它傳遞get_top_parent（）函數(shù)腰池。 然后，對于鏈接文本我們會說<忙芒？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>
現(xiàn)在保存代碼呵萨，刷新頁面看一下
如果我們轉到服務頁面，即使沒有子鏈接跨跨，它仍將具有此功能潮峦。 因此，我們將在functions.php文件中創(chuàng)建另一個短函數(shù)并調用page_is_parent勇婴。 然后忱嘹，我們創(chuàng)建全局 post并將get_pages（）賦值給 pages，在這里耕渴，我們將 'child_of='.$post->ID 作為參數(shù)傳遞給get_pages（）拘悦。然后返回我們想要的頁數(shù)，我們會計算返回的頁數(shù)橱脸，如果頁數(shù)大于零础米，那么我們就知道它是父級：
function page_is_parent(){
global $post;
$pages = get_pages('child_of='.$post->ID);
return count($pages);
}
我們回到page.php并在<nav>標簽的正上方，我們將放置一個if語句添诉，它將在nav標簽下面結束屁桑。 我們將看看它是否是父頁面_is_parent（），或者如果有任何子項$ post-> post_parent> 0栏赴，那么我們將執(zhí)行以下操作：
<?php if(page_is_parent() || $post->post_parent > 0): ?>
<nav class="nav sub-nav">
蘑斧。。。竖瘾。沟突。。
</nav>
<?php endif; ?>
保存代碼准浴，然后返回服務頁面刷新事扭。 我們可以看到菜單現(xiàn)在已經(jīng)消失了，但是如果我們去關于頁乐横，菜單仍然存在求橄，因為它有子頁面。
現(xiàn)在我們需要的功能已經(jīng)正常工作葡公，接下來我們?yōu)樽硬藛翁砑右恍邮焦夼屗每矗?/p>
.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;
}
保存回到前端頁面刷新：
在下一節(jié)中，我們將介紹小工具（widgets）蒲凶。
