Wordperss佈景製作教學系列(六)：WordPress佈景single.php製作

在前五篇的製作過程，其實大部份的架構已經都差不多，雖然這次要解講的是Single.php，也就是內文頁的製作，不過主要和index.php僅差異在留言的部份，不過留言區塊並不難製作，如果不需要做的很花悄其實只要簡單定義CSS就可以，因此我們這次的single.php只要從index.php複製一份再掛上留言區塊的函式，我想應該不用10分鐘就可以做完，至於要怎麼自訂義留言區塊細節，就留待以後慢慢撰寫吧。

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

Wordperss佈景製作教學系列：

• (一)：WordPress佈景基本格局設置
• (二)：WordPress佈景header.php製作
• (三)：WordPress佈景index.php製作
• (四)：WordPress佈景sidebar.php製作
• (五)：WordPress佈景footer.php製作
• (六)：WordPress佈景single.php製作(本篇)
• (七)：WordPress佈景分頁導覽製作

WordPress佈景footer.php製作：

index.php與single.php其實內容主要是差在留言與分頁連結，所以我們直接複製index.php來做即可。

先將上次製作完的index.php複製一份，並命名為single.php。

然後在endwhile上方插入留言系統的函式。

   1: <?php comments_template(); ?>

完成以上就可以看看內頁的呈現效果，立刻就會多一個留言系統囉，不過全部都擠在一起，我們必須針對每一區塊自己定義CSS。

至於要怎麼定義CSS，因為DIV我們沒有自定義，所以可以看看網頁源始碼，查看每個DIV區塊的ID是什麼，再決定如何定義，往下有範例。

這一段是阿湯大概定義的CSS，定義完呈現效果會如下圖。

   1: h3#comments{

   2: margin:30px 0 15px 0;

   3: }

   4: ol.commentlist{

   5: margin:10px 0;

   6: }

   7: ol.commentlist li{

   8: margin:10px 0;

   9: padding:5px;

  10: list-style-type:none;

  11: border:1px solid #eee;

  12: }

  13: #respond{

  14: margin:10px 0;

  15: }

  16: .comment-body p{

  17: margin:10px 0;

  18: }

  19: .comment-author,.comment-meta{

  20: background:#eee;

  21: padding:3px;

  22: }

  23: #commentform input{

  24: margin:3px 0;

  25: }

下次講解的是index.php的分頁導覽與single.php的內頁分頁導覽製作。