WordPress主题制作进阶#9使用主题小工具widget

这节我们学习使用小公具
我们现在有个侧边栏，但是其内容都是静态的，我们把侧边栏替换成动态的小公具。在博客页面和任何其他页面上，除了我们稍后将创建的自定义主页之外，这将是唯一的小工具。我们将在functions文件中添加小工具的显示位置。

打开functions.php，然后找到after_theme_setup这行代码；在这行代码下方添加一些代码，这些代码用来设置小工具位置。

//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');

现在我们跳转到index.php中，查看侧边栏部分的代码。

<div class="side">
    <div class="block">
    <h3>侧边栏</h3> 

根据这部分代码来修改刚刚添加到functions.php中的代码：

'before_widget' => '<div class="block side-widget">', 
'after_widget'  => '</div>',
'before_title'  => '<h3>',
'after_title'   => '</h3>' 

然后再回到index文件中，修改侧边栏部分代码：

<div class="side">
    <?php if(is_active_sidebar('sidebar')) : ?>
    <?php dynamic_sidebar('sidebar'); ?>
    <?php endif; ?>
</div>

回到前端查看首页，侧边栏那里什么都没有，因为我们没有添加任何小部件

侧边栏空了

现在我们把所有文件中出现的静态侧边栏代码全部替换，archive、company-template、single、search、page、等页。
现在到后台打开外观 -> 小工具页面，我们添加一个自定义文本小工具，放置一个标题My Text Widget。 然后，我只需在内容中粘贴一两句话，然后点击保存：

文本小工具

回到前端刷新。

widget出现了

回到后台，我们点击文本选项，然后我们可以在内容里添加代码，我们来添加一个按钮，只是为了美观，并不给按钮添加功能。 你可以在自定义文本小部件中放置任何自己喜欢的内容：

自定义内容

之后我们再添加一个分类目录小工具，点击保存，然后到前端刷新页面

分类目录

我们打开style.css文件，为分类目录添加一些样式：

.side-widget {
    margin-bottom: 20px;
}
.side-widget li {
    list-style: none;
    line-height: 2.1em;
    border-bottom: 1px dotted #ccc;
}

保存代码，回到前端刷新，现在看起来好多了：

分类

接下来，我将其余的小工具添加到functions.php或其他小工具位置，即使我们在本节中不会这样做。 在下一节中，我们将使用这些小部件创建自定义主页。

在functions.php中找到我们前面添加的 init_widgets（）函数，将函数内部代码块复制粘贴4遍，然后修改刚刚粘贴的代码块，替换它们的名字和相应的类名，代码如下：

//Widget Locations
function init_widgets($id){
    register_sidebar(array(
        'name' => 'Sidebar',
        'id' => 'sidebar',
        'before_widget' => '<div class="block side-widget">', 
        'after_widget'  => '</div>',
        'before_title'  => '<h3>',
        'after_title'   => '</h3>' 
    ));

    register_sidebar(array(
        'name' => 'Showcase',
        'id' => 'showcase',
        'before_widget' => '<div class="showcase">', 
        'after_widget'  => '</div>',
        'before_title'  => '<h3>',
        'after_title'   => '</h3>' 
    ));

    register_sidebar(array(
        'name' => 'Box1',
        'id' => 'box1',
        'before_widget' => '<div class="box">', 
        'after_widget'  => '</div>',
        'before_title'  => '<h3>',
        'after_title'   => '</h3>' 
    ));

    register_sidebar(array(
        'name' => 'Box2',
        'id' => 'box2',
        'before_widget' => '<div class="box">', 
        'after_widget'  => '</div>',
        'before_title'  => '<h3>',
        'after_title'   => '</h3>' 
    ));

    register_sidebar(array(
        'name' => 'Box3',
        'id' => 'box3',
        'before_widget' => '<div class="box">', 
        'after_widget'  => '</div>',
        'before_title'  => '<h3>',
        'after_title'   => '</h3>' 
    ));
}
add_action('widgets_init', 'init_widgets');

这些新复制粘贴的代码决定了下一节课，定制主页时一些小工具的显示位置。现在我们返回到后台小工具区域，会看到多出几个小工具显示区域：

显示位置

如果我们现在把东西放进去，什么都不会发生，因为我们的模板中没有它们。