這節我們學習使用小公具 我們現在有個側邊欄，但是其內容都是靜態的，我們把側邊欄替換成動態的小公具。在部落格頁面和任何其他頁面上，除了我們稍後將建立的自定義主頁之外，這將是唯一的小工具。我們將在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。 然後，我只需在內容中貼上一兩句話，然後點選儲存： 回到前端重新整理。 回到後臺，我們點選文字選項，然後我們可以在內容裡新增程式碼，我們來新增一個按鈕，只是為了美觀，並不給按鈕新增功能。 你可以在自定義文字小部件中放置任何自己喜歡的內容： 之後我們再新增一個分類目錄小工具，點選儲存，然後到前端重新整理頁面 我們開啟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="block showcase">', 
        'after_widget'  => '</div>',
        'before_title'  => '<h3>',
        'after_title'   => '</h3>' 
    ));

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

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

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

這些新複製貼上的程式碼決定了下一節課，定製主頁時一些小工具的顯示位置。現在我們返回到後臺小工具區域，會看到多出幾個小工具顯示區域： 如果我們現在把東西放進去，什麼都不會發生，因為我們的模板中沒有它們。