這一章節(jié)盟蚣，我們學(xué)習(xí)如何在主題中創(chuàng)建窗口小工具。 我們將有一個(gè)小工具位置卖怜，這將位于側(cè)邊欄中屎开。
1、打開(kāi)index.php马靠，找到class=main的div標(biāo)簽奄抽，在其結(jié)束標(biāo)簽下方創(chuàng)建一個(gè)class=sidebar的div，和一個(gè)class=clr的div用于清除浮動(dòng)甩鳄，代碼如下：
<div class="sidebar">
Sidebar
</div>
<div class="clr"></div>
保存代碼刷新前端頁(yè)面：
2逞度、現(xiàn)在我們將.main div浮動(dòng)并設(shè)置寬度，然后讓側(cè)邊欄浮動(dòng)到右邊妙啃，我們?cè)跇邮奖碇?strong>修改如下代碼：
.main{
margin:15px 0;
float:left;
width:68%;
}
然后為側(cè)邊欄添加樣式档泽；將其向右浮動(dòng)，我們將設(shè)置28％的寬度揖赴，并清除浮動(dòng)茁瘦，如下面的代碼所示：
.sidebar{
float:right;
width:28%;
}
.clr{
clear:both;
}
3、現(xiàn)在我們將main div里面的container div拿到其外部储笑，將main和sidebar包裹在內(nèi)甜熔，代碼大致如下：
<div class="container">
<div class="main">
......
<div class="sidebar">
Sidebar
</div>
<div class="clr"></div>
</div>
回到前端刷新頁(yè)面，現(xiàn)在我們有了main區(qū)域和側(cè)邊欄區(qū)域
4突倍、接下來(lái)腔稀，我們將看到如何添加小工具，我們轉(zhuǎn)到functions.php羽历。 在這里焊虏，我們可以使用小部件并定義我們想要小工具顯示的位置。我們將深入到文件的最底層并創(chuàng)建一個(gè)函數(shù)秕磷，如下面的代碼塊所示诵闭。 我們將其稱(chēng)為init_widgets，并且將接收id，我們將其稱(chēng)之為register_sidebar疏尿。
我們將使用register_sidebar創(chuàng)建一個(gè)側(cè)邊欄小工具瘟芝，實(shí)際上無(wú)論你的小部件創(chuàng)建在哪里，底部或是標(biāo)題位置褥琐，都必須使用register_sidebar锌俱，它的功能就是用于實(shí)際注冊(cè)小工具位置的。
在functions.php文件內(nèi)下方加入如下新代碼然后保存敌呈。
//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');
返回后臺(tái)頁(yè)面刷新贸宏，看到如下頁(yè)面：
5、我們把“分類(lèi)目錄”和“近期文章”小工具拖動(dòng)到Sidebar磕洪。
此時(shí)回到前端刷新吭练，不會(huì)發(fā)現(xiàn)任何變化，因?yàn)槲覀冞€沒(méi)在模板中添加它析显。讓我們來(lái)看看我們?cè)趇ndex.php文件中有Sidebar的位置线脚，加入以下代碼用來(lái)檢查窗口小工具
<div class="sidebar">
<?php if(is_active_sidebar('sidebar')) : ?>
<?php dynamic_sidebar('sidebar'); ?>
<?php endif; ?>
</div>
回到前端來(lái)刷新一下，我們得到了“分類(lèi)目錄”和“近期文章”小公具
6叫榕、還記得我們?cè)趂unctions.php文件中放了一個(gè)side-widget類(lèi)浑侥，它可以方便我們使用style.css文件設(shè)置小工具樣式，如下面的代碼塊所示晰绎，我們?yōu)樾」ぞ咛砑右恍邮?/p>
.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;
}
現(xiàn)在看起來(lái)就好多了
7寓落、此時(shí)我們點(diǎn)擊導(dǎo)航或文章詳情頁(yè)時(shí)，發(fā)現(xiàn)頁(yè)面出現(xiàn)了問(wèn)題荞下，這是因?yàn)槲覀冎辉趇ndex.php中修改了container和main的層級(jí)關(guān)系伶选，我們把在index.php中修改和添加的代碼復(fù)制粘貼到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(); ?>
現(xiàn)在檢查各個(gè)頁(yè)面尖昏，應(yīng)該都恢復(fù)正常了仰税。
8、所有不同的格式和所有不同的頁(yè)面都已設(shè)置; 它們都有了側(cè)邊欄抽诉。 當(dāng)然陨簇，如果你不想要哪個(gè)頁(yè)面顯示側(cè)邊欄，你只需修改相應(yīng)頁(yè)面迹淌。 如果我們想稍微減少代碼河绽，我們可以將以下代碼放在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中后，我們來(lái)展示一下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中相對(duì)應(yīng)的以下代碼刪掉：
<div class="sidebar">
<?php if(is_active_sidebar('sidebar')) : ?>
<?php dynamic_sidebar('sidebar'); ?>
<?php endif; ?>
</div>
<div class="clr"></div>
</div>
保存代碼并返回前端頁(yè)面刷新耙饰，所有頁(yè)面顯示都正常。
