WordPress主题制作进阶#8页面，自定义模板和子导航

定制页面模板

现在我们访问“关于”页面，可以看到它的格式就像一个帖子，这不是我们想要的。我们只希望页面有标题，我们不想要元数据，阅读更多，以及类似的东西。 所以为了改变这一切，我们须要创建一个新文件并将其保存为page.php。
我们将index文件中的代码复制，粘贴到page文件中，然后修改一些内容，用下面的代码覆盖while内部的 get_template_part（）

我们到前端刷新，会发现服务页和关于页使用了相同的格式；接下来将学习如何为某些页面创建单独的模板。
我们将新建一个文件命名为page-about.php，将page文件中的代码复制，粘贴到新文件中，然后在h2标题行下方添加一行电话号码，如下：

    

    
Company Phone: 555-555-5555
    
 

保存然后回到前端刷新页面，现在应该只有关于页发生变化。

我们成功的定制了单个页面，单这不是最好的方法，当你想在某些页面上拥有特定的样式或内容时，更好的办法是使用模板，我们要摆脱页面文件。现在我们删除page-about.php文件，然后创建一个模板。

创建一个新文件并将其保存为company-template.php。 我们将复制page.php文件中的内容，并将其粘贴到companytemplate.php文件中，然后在其顶部添加声明注释，注意这个注释要放在php标签中；然后在the_title（）下方，输入电话号码，代码如下：

    

        
        

        
            
            

                

                
                
1-800-555-5555
 
            
 

在给其加点样式：

.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（），代码如下：

    
    

    
1-800-555-5555
    
 

保存代码，让我们到前端页面看看发生了什么：

页面列表

可以看到我们在WordPress网站上的所有页面都被列出来了，但我们只想获取“关于”页面及其子页面，所以我们再转到page.php文件，就在wp_list_pages（）之上添加一些代码，

 get_top_parent(),
         'title_li' => ''
    ); 
?>
 

如果我们刷新页面，我们将得到一个错误，因为没有名为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（）;？>，代码如下：

    

    
        
            
        
    
    get_top_parent(), 
            'title_li' => ''
            );
     ?>
    
    

现在保存代码，刷新页面看一下

横排

如果我们转到服务页面，即使没有子链接，它仍将具有此功能。 因此，我们将在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并在

标签的正上方，我们将放置一个if语句，它将在nav标签下面结束。 我们将看看它是否是父页面_is_parent（），或者如果有任何子项$ post-> post_parent> 0，那么我们将执行以下操作：

post_parent > 0): ?> 
 
。。。。。。

 

保存代码，然后返回服务页面刷新。 我们可以看到菜单现在已经消失了，但是如果我们去关于页，菜单仍然存在，因为它有子页面。

现在我们需要的功能已经正常工作，接下来我们为子菜单添加一些样式，让它更好看：

.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）。