Wordperss佈景製作教學系列(四)：WordPress佈景sidebar.php製作

2012 年 05 月 10 日 by: 阿湯 in: Wordpress 教學, Wordpress 佈景 6 Comments



今天要教的部份是Sidebar.php，相信大家如果已經細心的將前幾篇反覆的看過並練習，我想應該對於網站製作應該已經都有基本的概念與知識，漸漸的應該愈來愈熟悉後面的內容，今天要介紹的Sidebar.php主要是讓你了解怎麼加入Widget模組，這並不是WordPress佈景本身都一定會有，是要有加入Widget的相關程式碼才能在後台直接拖曳Widget使用，而最常用到的地方就是側邊欄，今天我們也一樣用最簡單的方式來搞定側邊欄吧。

如果你是突然看這篇的朋友，建議可以往前先回顧這系列的前文。

Wordperss佈景製作教學系列：

側邊若想要使用模組(就是在後台直接拖曳Widget到側邊)就得先在functions.php裡定義，定義Widget的函式如下，其中需要修改的含義如下：

  • 'name' => 'SideBar'，Widget名稱
  • 'before_widget' => '<div class="sidebar">'，widget前所使用的div
  • 'after_widget' => '</div>'，設了div當然就要關閉了。
  • 'before_title' => '<h3>'，widget的標題所使用的div
  • 'after_title' => '</h3>'，設了div當然就要關閉了。
 1: <?php

 2: if ( function_exists('register_sidebar') )

 3:         register_sidebar(array(

 4:         'name' => 'SideBar',

 5:         'before_widget' => '<div class="sidebar">',

 6:         'after_widget' => '</div>',

 7:         'before_title' => '<h3>',

 8:         'after_title' => '</h3>',

 9:  ));

 10: ?>

01

functions設定完後，就可以先到後台的模組裡看看，是不是多了一個我們剛剛所加上去的Widget。

02

既然後台已經完成，那麼接下來就是要在前台能夠顯示，所以我們必須在sidebar.php裡加入以下內容，其中紅框的地方，這個名稱必須跟我們剛剛在functions裡所填入的「name'」要一模一樣。

當然也記得可以在外層加入一個div區塊將widget包起來，方便定義css。

 1: <div id="right_sidebar">

 2: <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('SideBar') ) : else : ?>

 3: <?php endif; ?>

 4: </div>

03

好了，來看看這還沒有定義CSS之前的樣子，可以到後台的模組先去拖曳一些內容進去，然後到網站看看，側邊欄的內容有沒有正常顯示。

04

以上都完成後就可以大概來定義一下CSS的部份，在style.css裡加入以下內容，當然你也可以自己定義。

 1: #right_sidebar{

 2: float:left;

 3: width:280px;

 4: padding:0 10px;

 5: }

 6: .sidebar{

 7: background:#eee;

 8: width:260px;

 9: padding:10px;

 10: margin-bottom:10px;

 11: }

 12: .sidebar h3{

 13: font-size:18px;

 14: border-bottom:1px solid #222;

 15: margin:5px 0;

 16: }

 17: .sidebar li{

 18: margin-left:16px;

 19: }

定義完css後，看起來就像樣了一些吧，今天sidebar.php就到這裡為止囉，下一次就是介紹footer.php

05

請記得css語法必須自己想辦法學習，佈景才能做的更漂亮，更多元哦。

6 Comments

  1. kimy -  2015 年 10 月 18 日 - 04:54:57 (Your Comment is Under Moderation)

    請問我不小心刪除了頁面的sidebar，之後雖然我新增了一個blog sidebar，但只出現在blog的總覽頁面，點進去的詳細頁面卻沒有跟著出現blog sidebar(原本sidebar的位置變成空白)，請問該如果解決?謝謝。
    頁面為http://www.ZenUI.com/blog/
    theme:Mirror

    回覆
  2. 始终不够 » Wordpress主题制作不完全指南 -  2013 年 05 月 18 日 - 22:45:01 (Your Comment is Under Moderation)

    [...] sidebar的制作相对比较复杂，因为它涉及到了小工具的使用。这里推荐一篇文章，供读者阅读。Wordperss佈景製作教學系列(四)：WordPress佈景sidebar.php製作。原文地址：http://wpnote.tw/wordperss%E4%BD%88%E6%99%AF%E8%A3%BD%E4%BD%9C%E6%95%99%E5%AD%B8%E7%B3%BB%E5%88%97%E5%9B%9B%EF%BC%9Awordpress%E4%BD%88%E6%99%AFsidebar-php%E8%A3%BD%E4%BD%9C/ [...]

    回覆
  3. 瑋威 -  2012 年 12 月 09 日 - 01:43:58 (Your Comment is Under Moderation)

    我的也跑到下面去了怎麼辦= =

    回覆
    • 阿湯 -  2012 年 12 月 13 日 - 13:24:58 (Your Comment is Under Moderation)

      css 設定有問題或其它因素

      回覆
  4. 阿湯 -  2012 年 06 月 19 日 - 09:32:00 (Your Comment is Under Moderation)

    這要看你的css怎麼配置

    回覆
  5. mei -  2012 年 06 月 18 日 - 22:36:21 (Your Comment is Under Moderation)

    請問一下為什麼我的sidebar設定完後是在文章的最下面像是footer的位置??

    回覆

Leave A Comment

Your email address will not be published. Required fields are marked (required):

Y

下載最新的Wordpress

下載最新的Wordpress

FaceBook粉絲團

Back to Top