从0到1制作WordPress主题#11使用小工具widgets

创建widgets显示位置

这一章节，我们学习如何在主题中创建窗口小工具。我们将有一个小工具位置，这将位于侧边栏中。
1、打开index.php，找到class=main的div标签，在其结束标签下方创建一个 class=sidebar的div，和一个 class=clr的div用于清除浮动，代码如下：

<div class="sidebar">
	Sidebar
</div> 

<div class="clr"></div>

保存代码刷新前端页面：

Sidebar

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区域和侧边栏区域
区域划分

添加小工具widgets

我们将看到如何添加小工具，我们转到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');

返回后台页面刷新，看到如下页面：
小公具页面（widget）
5、我们把“分类目录”和“近期文章”小工具拖动到Sidebar。
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;
}

现在看起来就好多了
sidebar

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>&copy; 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>

保存代码并返回前端页面刷新，所有页面显示都正常。