WordPress 部落格從 2.7 版本就自帶了“ 巢狀回覆” 功能,但是很多主題都沒有新增該效果,大部分博主也用部落格外掛來實現該功能,可部落格外掛的巢狀回覆的內容樣式與父評論不能保持一致,而使用自帶的巢狀功能卻可以和父評論的內容樣式一樣。部落格吧轉載了零號相簿的 WordPress 部落格自帶巢狀回覆教程。
自帶巢狀功能工作原理:
WordPress 巢狀回覆的工作原理是 WP 的資料庫裡有個 wp_comments 的表中有一欄 comment_parent ,即可以對 comment 指定父級,達到巢狀的目的。
非外掛巢狀回覆教程:
1. 在部落格後臺的已安裝外掛列表中停用 WordPress Thread Comment 外掛。並在部落格後臺點選“ 設定” 選項卡中的“ 討論” 選項進入配置頁面,開啟“ 允許巢狀 X 層評論” 。
2. 登陸部落格後臺,點選“ 外觀” 選項卡下的“ 編輯” 選項進入主題編輯頁面,選擇主題 (這裡以 WP 自帶 classic 主題為例),編輯頭部檔案 header.php,在 WP 函式
| <?php wp_head(); ?> |
之前添上程式碼
| <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?> |
該程式碼在文章/頁面呼叫巢狀回覆的 Javascript 檔案
3. 開啟主題的 comments.php 評論模板。原有的模板程式碼大概是如下:
| <?php if ( $comments ) : ?> <ol id="commentlist"> <?php foreach ($comments as $comment) : ?> <li> ... <?php comment_text() ?> ... </li> <?php endforeach; ?> </ol> <?php else : // If there are no comments yet ?> <p><?php _e('No comments yet.'); ?></p> <?php endif; ?> |
如今有了 WP 自帶的 wp_list_comments(); 函式,即可輕鬆完成這些工作,把上面程式碼替換為:
| <?php if ( $comments ) : ?> <ol class="commentlist"> <?php wp_list_comments();?> </ol> <?php else : // If there are no comments yet ?> <p><?php _e('No comments yet.'); ?></p> <?php endif; ?> |
說明一下,原有的判斷有留言、取出、並顯示的部分用一個 wp_list_comments(); 即可取代。原來的 ol(有序列表) 的 id="commentlist" 改為 class="commentlist",這是因為到後面定義 CSS 的時候可能會與其他產生衝突。
4. 在評論模板 comments.php 中找到一個 textarea,name=”comment”,就是訪客輸入留言的文字域,看看這個 textarea 中是否有個 id=”comment”,如果有,把 id=”comment” 去掉 (不是去掉 textarea,而是去掉定義的 ID) 。
5. 在評論模板 comments.php 中找到程式碼:
| <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /> |
將程式碼替換為:
| <?php comment_id_fields(); ?> |
這是對回覆框進行定義,以便支援巢狀回覆。
6. 在評論模板 comments.php 中找到程式碼:
從
| <h2 id="postcomment"><?php _e('Leave a comment'); ?></h2> |
至
| <?php endif; // If registration required and not logged in ?> |
的外部用一個 id 為”respond” 的 div 包裹
| <div id="respond"> …… </div> |
這樣是為了在巢狀回覆時,點選留言者旁邊的“ 回覆”,即可把評論框整體移至該評論附近。
7. 在評論模板 comments.php 中的“Leave a Reply” 下面增加程式碼:
| <div id="cancel-comment-reply"> <small><?php cancel_comment_reply_link() ?></small> </div> |
這是一個取消評論的連結。一般情況下,該連結不顯示,只有要針對某人進行評論,而不想評論時可以點選這個連結把評論框復位。