創建widgets顯示位置
這一章節，我們學習如何在主題中創建窗口小工具。 我們將有一個小工具位置，這將位於側邊欄中。
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區域和側邊欄區域
添加小工具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');
返回後臺頁面刷新，看到如下頁面：
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>
保存代碼並返回前端頁面刷新，所有頁面顯示都正常。