輕鬆寫 WordPress 模組 / 選單
WordPress 的其中一個便利功能，就是可以自由地在側邊欄增添選單，而不用打開 sidebar.php 修改 → 上傳。如果大家有興趣自己製作佈景主題給他人使用，記得要將自由增添選單 (widget supported) 這個功能加上，今天就跟大家分享如何快速、輕鬆地寫出這個功能。
我們會用到的佈景檔案如下：
- functions.php
- sidebar.php
- style.css
步驟一
開啟 functions.php，在 ?> 的前面加上以下語法：
<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name'=> 'sidebar1',
'before_widget' => '<div class="sidebar-box">',
'after_widget' => '</div>',
'before_title' => '<div class="sidebar-title">',
'after_title' => '</div>',
));
?>- name：幫側邊欄取個容易識別的名字吧
- before_widget：側邊欄一塊一塊模組的開頭(通常會用 div 把他包起來，支援 html)
- after_widget：側邊欄模組的結尾。
- before_title：側邊欄模組的標題開頭。
- after_title：側邊欄模組的標題結尾。
在這個階段我們先在 functions.php 新增好 sidebar1 這個 widget ，接下來就是要在適當的地方取出這個 sidebar1 囉。
步驟二
因為 functions.php 只是用來讓我們撰寫函式的檔案，不會有任何具體的效果。因此所有在 functions.php 寫好的函式，都要在其他 php 檔案進行呼叫的動作。而側邊欄的檔案是 sidebar.php ，所以請打開 sidebar.php 進行呼叫的動作吧！
請在要顯示這個 widget 的地方加入語法：
<?php
if ( !function_exists('dynamic_sidebar')|| !dynamic_sidebar('sidebar1') ) : ?>
<div class="sidebar-box">
<div class="sidebar-title">New Articles</div>
<div class="sidebar-entry">
<ul><?php get_archives('postbypost','8','custom',' <li-->',''); ?></ul>
</div>
</div>
<?php endif; ?>第二行的 sidebar1，就是我們在 functions.php 寫的 'name'=>'sidebar1',
這一行意思是：如果你在後台沒有使用 widget 模組；而且就算有使用，也不是放在 sidebar1 的欄位底下。那麼，就會顯示以下內容。
簡單來說，就是如果沒有啟用 widget 模組，sidebar.php 就會給你預設的一組設定，我這邊的預設設定是最新文章標題。假使你有開啟模組，裡面的內容就不會使用 sidebar.php 的預設，而會使用你拖拉的模組為準。
這設定是為了那些沒有使用模組習慣的朋友，而且在預覽佈景主題的時候，也會秀出預設設定讓大家看長甚麼樣子。所以想要設計佈景主題的朋友們，可千萬不要偷懶不寫喔。
步驟三
最後要在 style.css 設定 sidebar.php 的一些樣式啦！相信會寫佈景主題的朋友，對這些設定都已經有些瞭解，這邊就不多說了。
以下是我之前寫的側邊欄樣式，分享給大家：
.sidebar-box {
font-family: 'Source Sans Pro', sans-serif;
margin-top: 15px;
line-height: 16px;
font-weight: 400;
font-size: 13px;
padding-bottom: 5px;
border-bottom: 1px solid #ccc;
-webkit-box-shadow: white 0px 1px 0px;
-moz-box-shadow: white 0px 1px 0px;
box-shadow: white 0px 1px 0px;
}
.sidebar-box .sidebar-title {
font-family: 'Ubuntu Condensed', sans-serif;
font-size: 1.333em;
margin-bottom: 7px;
color: #e94252;
}
.sidebar-box .author {
float: left;
margin: 0 0 0 5px;
color: #999;
width: 160px;
text-shadow: 1px 1px 0 white;
}
.sidebar-box .author a img {
padding-right: 5px;
}
.sidebar-box .author-link {
clear: both;
font-size: 12px;
padding-top: 5px;
}
.sidebar-box a {
line-height: 160%;
color: #545454;
text-decoration: none;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.sidebar-box a:hover {color: #e94252;}
還是有點不懂，改了這個之後，有什麼不一樣，可否用圖片說明，就字面解釋，不是很理解！
是指手動填加 中分類 下面的選單嗎？