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

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

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

<?php
function simple_theme_setup(){
    // Featured Image Support
    add_theme_support('post-thumbnails');

    // Menus
    register_nav_menus(array(
        'primary' => __('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标签，如下所示：

<nav class="main-nav">
    <div class="container">
    <?php
        $args = array(
            'theme_location' => 'primary'
        );
    ?>
    <?php wp_nav_menu($args); ?>
    </div>
</nav>

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

在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中使用它。
以下是我们将在代码中进行的一些更改：

<?php get_header(); ?>

<div class="main"> 
    <div class="container">
        <?php if(have_posts()) : ?>
        <?php while(have_posts()): the_post(); ?>
            <article class="post">
                <h3>
                    <?php the_title(); ?>
                </h3>
                <?php if(has_post_thumbnail()) : ?>
                <div class="post-thumbnail">
                    <?php the_post_thumbnail(); ?>
                </div>
                <?php endif; ?>
                <?php the_content(); ?>
                <br>
            </article>
        <?php endwhile; ?>
        <?php else : ?>
            <?php echo wpautop('Sorry, No posts were found.'); ?>
        <?php endif; ?>
    </div>
</div>

<?php get_footer(); ?>

首先我们删除了标题中的链接和Read More按钮，然后把摘要the_excerpt换成了the_content，最后我们删除了整个meta元数据部分。保存代码，返回前端刷新页面：
修改后
现在看起来更像是一个普通的网页， Service页同样如此。这是创建页面的方式，以及如何让导航定位该页面。你还可以创建自定义页面和自定义模板，可以为不同的页面设置不同的布局，但这些知识我们将在下一个项目中学习。
构建主题还有很多其他内容，你可以做更多的事情，但在这里我不会作深入讲解；在这个项目中，我只想介绍制作主题的基础知识。我们现在有页面和菜单。在下一节中，我们将进入窗口小部件位置（widget），因为现在我们希望能够使用带有窗口小部件的侧边栏（sidebar）。

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

猜你喜欢