Wordperss佈景製作教學系列(五):WordPress佈景footer.php製作




一直到前一篇側邊欄sidebar.php的講解之後,其實大致上的結構都已經出來了,首頁也就只剩下底部footer.php還沒講解,而這個部份其實應該就是最簡單的部份,我們今天就快速的來搞定他,底部通常只是放一些相關資訊,或是網站版權宣告等等,當然也有人是會再放Widget模組,但阿湯主要是先讓大家做出一個最基本的模組,當你學習CSS後可以自行定義出更不一樣的版型,往下我們就來簡單定義footer.php底部資訊吧。

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

Wordperss佈景製作教學系列:

WordPress佈景footer.php製作:

首先一樣要先給footer定義一個區塊,並加入底部要放置的資訊,通常都是網站名稱還有佈景製作資訊,而網站名稱可以用WP內建的函式來取代,網站名稱的函式我們在header.php教學中已經有提到過,忘記就趕緊再去複習一下囉。

另外為了防止區塊又造成重疊,所以可以在前面先加上clear。

   1: <div class="clear"></div>

   2: <div id="footer">

   3: <?php bloginfo('name'); ?> | Theme WPnote Demo v1.0 Design By:Scorpio

   4: </div>

01

然後再定義一下CSS,讓底部區塊可以置中,並離上方區塊一點點距離即可。

   1: #footer{

   2: width:980px;margin:10px auto;text-align:center;font-size:13px;

   3: }

再加上底部後,整個首頁就已經成形囉,雖然看起來很簡單,不過只要你用心學習css,之後再調校過,就可以變成一個很棒的佈景。

02

footer.php就先到這邊,下一次我們就要來講解single.php內文的配置囉。

13 Comments

  1. Ashley -  2012 年 06 月 08 日 - 11:55:23 (Your Comment is Under Moderation)

    你好!我對wp做網頁好有興趣,想問一下用wp做一個互動的網頁可行嗎?比如說會員可登記一些資料,後台會管理這些資料庫。thanks!!

    回覆
    • 阿湯 -  2012 年 06 月 08 日 - 15:07:10 (Your Comment is Under Moderation)

      可行呀,技術性夠就可以,或是找相關外掛搭配亦可

      回覆
  2. Kevin -  2012 年 06 月 02 日 - 20:19:54 (Your Comment is Under Moderation)

    我嫁了一個測試站:http://blog.kevin-blog.twbbs.org/
    希望阿湯哥可以給我點建議

    回覆
    • 阿湯 -  2012 年 06 月 04 日 - 10:43:25 (Your Comment is Under Moderation)

      我也不知道要給你什麼建議...

      回覆
  3. Kevin -  2012 年 05 月 31 日 - 22:49:37 (Your Comment is Under Moderation)

    今天在仔細看一下
    終於找到錯誤了

    回覆
    • 阿湯 -  2012 年 05 月 31 日 - 17:11:09 (Your Comment is Under Moderation)

      直接這樣看很累,你有架上去了再給我看吧~空白通常是你沒有用margin歸零

      回覆
  4. Kevin -  2012 年 05 月 27 日 - 22:06:28 (Your Comment is Under Moderation)

    我看pseric翻譯的wordpress主題教學大概花了3到4天就做好一個佈景了
    不過有些問題想請教阿湯哥
    目前我使用google chrome firefox safari IE7 ie8 ie9排版都沒跑掉
    正常狀況:https://dl.dropbox.com/u/1012728/01.jpg
    不過用ie6就變成這樣了:https://dl.dropbox.com/u/1012728/02.jpg
    不知道該如何解決?
    還有一個問題
    那就是該如何在文章中顯示發文的日期呢?
    我有先google 不過找不到要用哪個函數
    希望阿湯哥能協助我 謝謝

    回覆
  5. yanblue -  2012 年 05 月 27 日 - 21:38:25 (Your Comment is Under Moderation)

    期待整套的完成。

    回覆
    • 阿湯 -  2012 年 05 月 28 日 - 15:18:23 (Your Comment is Under Moderation)

      盡量寫囉

      回覆
  6. AR wli -  2012 年 05 月 27 日 - 01:09:23 (Your Comment is Under Moderation)

    footer看起來比較簡單

    回覆
    • 阿湯 -  2012 年 05 月 28 日 - 15:18:16 (Your Comment is Under Moderation)

      是的

      回覆

Leave A Comment

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

留言前請輸入「YA」

Back to Top