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的內頁分頁導覽製作。
Leave A Comment
下載最新的Wordpress
8 Comments
[…] (六)：WordPress佈景single.php製作 […]
阿湯站長：
不好意思，請問一下，
我插入留言系統的函式沒有出現留言系統，
也沒有出現 comments.php 的文字內容 "這是留言模板"，
也有試著刪除 comments.php 檔案，也是沒有出現留言系統呢!
打擾了...謝謝
阿湯站長：
不好意思，我耍笨了，找到問題點了，原來要進入某一篇文章才會顯示留言版!
嗯嗯
請問阿湯，
我插入留言系統的函式沒有出現留言系統，
只有出現"這是留言模板"的樣耶，
請問是哪裡出錯了呢?
你把comment.php刪掉，就可以了
問題解決摟，刪除就出現留言系統了，
謝謝阿湯，
期待下一篇教學～
正在努力學習呢 ^＿＿＿^
恭喜