这一章节，我们学习如何在主题中创建窗口小工具。 我们将有一个小工具位置，这将位于侧边栏中。
1、打开index.php，找到class=main的div标签，在其结束标签下方创建一个class=sidebar的div，和一个class=clr的div用于清除浮动，代码如下：
<div class="sidebar">
Sidebar
</div>
<div class="clr"></div>
保存代码刷新前端页面：
2、现在我们将.main div浮动并设置宽度，然后让侧边栏浮动到右边，我们在样式表中修改如下代码：
.main{
margin:15px 0;
float:left;
width:68%;
}
然后为侧边栏添加样式；将其向右浮动，我们将设置28％的宽度，并清除浮动，如下面的代码所示：
.sidebar{
float:right;
width:28%;
}
.clr{
clear:both;
}
3、现在我们将main div里面的container div拿到其外部，将main和sidebar包裹在内，代码大致如下：
<div class="container">
<div class="main">
......
<div class="sidebar">
Sidebar
</div>
<div class="clr"></div>
</div>
回到前端刷新页面，现在我们有了main区域和侧边栏区域
4、接下来，我们将看到如何添加小工具，我们转到functions.php。 在这里，我们可以使用小部件并定义我们想要小工具显示的位置。我们将深入到文件的最底层并创建一个函数，如下面的代码块所示。 我们将其称为init_widgets，并且将接收id，我们将其称之为register_sidebar。
我们将使用register_sidebar创建一个侧边栏小工具，实际上无论你的小部件创建在哪里，底部或是标题位置，都必须使用register_sidebar，它的功能就是用于实际注册小工具位置的。
在functions.php文件内下方加入如下新代码然后保存。
//Widget Locations
function init_widgets($id){
register_sidebar(array(
'name' => 'Sidebar',
'id' => 'sidebar',
'before_widget' => '<div class="side-widget">','after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
}
add_action('widgets_init', 'init_widgets');
返回后台页面刷新，看到如下页面：
5、我们把“分类目录”和“近期文章”小工具拖动到Sidebar。
此时回到前端刷新，不会发现任何变化，因为我们还没在模板中添加它。让我们来看看我们在index.php文件中有Sidebar的位置，加入以下代码用来检查窗口小工具
<div class="sidebar">
<?php if(is_active_sidebar('sidebar')) : ?>
<?php dynamic_sidebar('sidebar'); ?>
<?php endif; ?>
</div>
回到前端来刷新一下，我们得到了“分类目录”和“近期文章”小公具
6、还记得我们在functions.php文件中放了一个side-widget类，它可以方便我们使用style.css文件设置小工具样式，如下面的代码块所示，我们为小工具添加一些样式
.side-widget{
border:1px #ccc solid;
padding:10px 10px;
margin-bottom:20px;
margin-top:20px;
}
.side-widget li{
list-style: none;
line-height:2.2em;
border-bottom:dotted 1px #ccc;
}
.side-widget a{
text-decoration: none;
}
现在看起来就好多了
7、此时我们点击导航或文章详情页时，发现页面出现了问题，这是因为我们只在index.php中修改了container和main的层级关系，我们把在index.php中修改和添加的代码复制粘贴到page.php和single.php文件中。
<div class="sidebar">
<?php if(is_active_sidebar('sidebar')) : ?>
<?php dynamic_sidebar('sidebar'); ?>
<?php endif; ?>
</div>
<div class="clr"></div>
</div>
<?php get_footer(); ?>
现在检查各个页面，应该都恢复正常了。
8、所有不同的格式和所有不同的页面都已设置; 它们都有了侧边栏。 当然，如果你不想要哪个页面显示侧边栏，你只需修改相应页面。 如果我们想稍微减少代码，我们可以将以下代码放在footer.php中：
<div class="sidebar">
<?php if(is_active_sidebar('sidebar')) : ?>
<?php dynamic_sidebar('sidebar'); ?>
<?php endif; ?>
</div>
<div class="clr"></div>
</div>
将其放在footer.php中后，我们来展示一下footer.php中的代码：
<div class="sidebar">
<?php if(is_active_sidebar('sidebar')) : ?>
<?php dynamic_sidebar('sidebar'); ?>
<?php endif; ?>
</div>
<div class="clr"></div>
</div>
<footer>
<div class="container">
<p>© 2018 - <?php bloginfo('name'); ?></p>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
我们同样需要将page.php、index.php和single.php中相对应的以下代码删掉：
<div class="sidebar">
<?php if(is_active_sidebar('sidebar')) : ?>
<?php dynamic_sidebar('sidebar'); ?>
<?php endif; ?>
</div>
<div class="clr"></div>
</div>
保存代码并返回前端页面刷新，所有页面显示都正常。
