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




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

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

Wordperss佈景製作教學系列:

WordPress佈景footer.php製作:

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

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

01

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

   1: <?php comments_template(); ?>

02

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

03

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

04

這一段是阿湯大概定義的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: }

05

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

8 Comments

  1. 王煜傑 -  2012 年 10 月 15 日 - 09:11:12 (Your Comment is Under Moderation)

    阿湯站長:
    不好意思,請問一下,
    我插入留言系統的函式沒有出現留言系統,
    也沒有出現 comments.php 的文字內容 "這是留言模板",
    也有試著刪除 comments.php 檔案,也是沒有出現留言系統呢!

    打擾了...謝謝

    回覆
    • 王煜傑 -  2012 年 10 月 15 日 - 12:46:27 (Your Comment is Under Moderation)

      阿湯站長:

      不好意思,我耍笨了,找到問題點了,原來要進入某一篇文章才會顯示留言版!

      回覆
      • 阿湯 -  2012 年 10 月 17 日 - 10:03:03 (Your Comment is Under Moderation)

        嗯嗯

        回覆
  2. 小孩 -  2012 年 06 月 14 日 - 11:00:28 (Your Comment is Under Moderation)

    請問阿湯,

    我插入留言系統的函式沒有出現留言系統,

    只有出現"這是留言模板"的樣耶,

    請問是哪裡出錯了呢?

    回覆
    • 阿湯 -  2012 年 06 月 14 日 - 17:20:05 (Your Comment is Under Moderation)

      你把comment.php刪掉,就可以了

      回覆
      • 小孩 -  2012 年 06 月 15 日 - 08:20:42 (Your Comment is Under Moderation)

        問題解決摟,刪除就出現留言系統了,

        謝謝阿湯,

        期待下一篇教學~

        正在努力學習呢 ^___^

        回覆
        • 阿湯 -  2012 年 06 月 15 日 - 09:12:34 (Your Comment is Under Moderation)

          恭喜

Leave A Comment

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

留言前請輸入「YA」

Back to Top