从0到1制作WordPress主题#10页面和菜单

本节我们将关注页面和菜单。除了在WordPress中创建帖子，我们还可以创建页面：
1、如果我们转到后端并单击页面，您会看到有几个示例页面；现在我们创建一个新页就叫About，我们再输入两段文字进去。然后点击发布。

创建页面

2、我们继续创建一个Service页面。 现在我们需要导航功能。为了使用菜单系统，我们需要编辑functions.php文件，因为现在，如果我们转到外观，则没有菜单选项。 所以让我们打开functions.php并输入以下代码：

 __('Primary Menu')
    ));
}
add_action('after_setup_theme', 'simple_theme_setup');

• 在我们之前创建的这个simple_theme_setup函数中，我们将添加register_nav_menus
• 然后我们传入一个数组
• 通过数组我们将可以设置primary，然后设置可读版本

下面我们将进设置Primary Menu然后保存它

3、现在我们进入后端，刷新页面并转到外观，您会看到我们有这个菜单选项

菜单设置页面

如果我们单击“创建菜单”，现在您可以看到默认情况下它包含网站上的所有页面，您可以根据需要删除一些页面；如果你想添加页面，你可以很容易地做到; 单击“添加到菜单”。 在这里我们只需要保留我们现有的内容，然后我们需要确保选择了Primary Menu，确保其在主题中显示的位置，然后保存。

菜单管理

4、现在我们去前端刷新页面，但是没有看到任何东西，因为我们没有将它包含在我们的header文件中；我们希望在每个页面上都有顶部菜单，所以把它放在header.php文件中，我们直接在header结束标签下面创建一个nav标签，如下所示：

    

     'primary'
        );
    ?>
    
    

保存代码，看看这些代码都做了什么：

• 在php标签内创建一个名为args的变量。
• 这个变量包含一个参数theme_location
• 这个参数指定了我们要在这里放置那个菜单
• 调用一个名为wp_nav_menu的函数，并传入该args变量

5、回到前端页面刷新，就会看到我们的菜单，如下图：

导航菜单出现

6、我们给导航菜单添加一些样式，打开style.css文件，输入以下代码并保存：

.main-nav{
    background:#000;
    color:#fff;
    padding:5px;
} 
.main-nav ul{
    margin:0;
    padding:0;
} 
.main-nav li{
    list-style:none;
    float:left;
    padding-right:15px;
} 
.main-nav a{
    color:#fff;
    text-decoration:none;
}

返回前端页面刷新：

导航菜单

7、我们点击“About”，它会将我们带到“About”页面（“Service”也一样）。 细心的你将注意到，当我们转到About时，它的格式与index.php页面的格式完全相同，就好像它是一个帖子，但它不是，它是一个页面：

About页

我们不需要元数据或“阅读更多”链接。 所以我们需要做的是为我们的主题添加另一个页面。

8、在simple主题文件夹内创建一个新的文件page.php，现在返回并重新加载，About和Service页是空白的，因为它正在查看空文件。 所以我们可以做的是复制index.php中的代码并在page.php中使用它。
以下是我们将在代码中进行的一些更改：

首先我们删除了标题中的链接和Read More按钮，然后把摘要the_excerpt换成了the_content，最后我们删除了整个meta元数据部分。保存代码，返回前端刷新页面：

修改后

现在看起来更像是一个普通的网页， Service页同样如此。 这是创建页面的方式，以及如何让导航定位该页面。 你还可以创建自定义页面和自定义模板，可以为不同的页面设置不同的布局，但这些知识我们将在下一个项目中学习。
构建主题还有很多其他内容，你可以做更多的事情，但在这里我不会作深入讲解；在这个项目中，我只想介绍制作主题的基础知识。 我们现在有页面和菜单。 在下一节中，我们将进入窗口小部件位置（widget），因为现在我们希望能够使用带有窗口小部件的侧边栏（sidebar）。