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

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

从0到1制作WordPress主题#10页面和菜单_第1张图片
创建页面

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、现在我们进入后端,刷新页面并转到外观,您会看到我们有这个菜单选项

从0到1制作WordPress主题#10页面和菜单_第2张图片
菜单设置页面

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

从0到1制作WordPress主题#10页面和菜单_第3张图片
菜单管理

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


保存代码,看看这些代码都做了什么:

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

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

从0到1制作WordPress主题#10页面和菜单_第4张图片
导航菜单出现

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;
}

返回前端页面刷新:

从0到1制作WordPress主题#10页面和菜单_第5张图片
导航菜单

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

从0到1制作WordPress主题#10页面和菜单_第6张图片
About页

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

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




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

从0到1制作WordPress主题#10页面和菜单_第7张图片
修改后

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

你可能感兴趣的:(从0到1制作WordPress主题#10页面和菜单)