輕鬆寫 WordPress 模組 / 選單

WordPress 的其中一個便利功能,就是可以自由地在側邊欄增添選單,而不用打開 sidebar.php 修改 > 上傳。如果大家有興趣自己製作佈景主題給他人使用,記得要將自由增添選單 (widget supported) 這個功能加上,今天就跟大家分享如何快速、輕鬆地寫出這個功能。

我們會用到的佈景檔案如下:

  • functions.php
  • sidebar.php
  • style.css

步驟一

開啟functions.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>','</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;}