定製頁面模板

現在我們訪問“關於”頁面，可以看到它的格式就像一個帖子，這不是我們想要的。我們只希望頁面有標題，我們不想要元資料，閱讀更多，以及類似的東西。 所以為了改變這一切，我們須要建立一個新檔案並將其儲存為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）。