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

这一章节，我们学习如何在主题中创建窗口小工具。 我们将有一个小工具位置，这将位于侧边栏中。

1、打开index.php，找到class=main的div标签，在其结束标签下方创建一个class=sidebar的div，和一个class=clr的div用于清除浮动，代码如下：

Sidebar

保存代码刷新前端页面：

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包裹在内，代码大致如下：

......

Sidebar

回到前端刷新页面，现在我们有了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' => '

','after_widget' => '

',

'before_title' => '

',

'after_title' => ''

));

}

add_action('widgets_init', 'init_widgets');

返回后台页面刷新，看到如下页面：

小公具页面(widget)

5、我们把“分类目录”和“近期文章”小工具拖动到Sidebar。

Sidebar内工具

此时回到前端刷新，不会发现任何变化，因为我们还没在模板中添加它。让我们来看看我们在index.php文件中有Sidebar的位置，加入以下代码用来检查窗口小工具

回到前端来刷新一下，我们得到了“分类目录”和“近期文章”小公具

小公具出现

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文件中。

现在检查各个页面，应该都恢复正常了。

8、所有不同的格式和所有不同的页面都已设置; 它们都有了侧边栏。 当然，如果你不想要哪个页面显示侧边栏，你只需修改相应页面。 如果我们想稍微减少代码，我们可以将以下代码放在footer.php中：