定制页面模板
现在我们访问“关于”页面，可以看到它的格式就像一个帖子，这不是我们想要的。我们只希望页面有标题，我们不想要元数据，阅读更多，以及类似的东西。 所以为了改变这一切，我们须要创建一个新文件并将其保存为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并在<nav>标签的正上方，我们将放置一个if语句，它将在nav标签下面结束。 我们将看看它是否是父页面_is_parent（），或者如果有任何子项$ post-> post_parent> 0，那么我们将执行以下操作：
<?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）。
网友评论