如何設計你的 WordPress 留言佈局

最近我們展示了如何設計 WordPress 留言表單，若不討論設計 WordPress 留言佈局就會不夠完整。在過去，我們討論過 WordPress 內建的 CSS 類別和 ID，這些可以幫助主題設計師更輕鬆地設計模板。在這篇文章中，我們將利用這些預設的類別，展示如何設計你的 WordPress 留言佈局，也會介紹一些你可以進行的有趣設計。

為了這個例子，我們將會修改預設的 Twenty Twelve WordPress 主題。注意：這篇文章適合有基礎 HTML 和 CSS 知識的初學者主題設計師和 DIY 用戶。

WordPress 留言預設類別

WordPress 預設會為留言模板中的元素生成以下這些類別：

.commentlist .reply {}
.commentlist .reply a {}

.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}

.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}

.commentlist .comment-meta {} 
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}

.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}

.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}

#cancel-comment-reply {}
#cancel-comment-reply a {}

如何找到需要修改的 CSS 類別

在開始設計 WordPress 留言佈局之前，給新的用戶一點小提示。Google Chrome 和 Mozilla Firefox 網頁瀏覽器都有一個名叫 Inspect Element（檢查元素）的工具，使用這個工具可以幫助你提高 WordPress 主題開發技能。只需將滑鼠移至網頁上的一個元素，點擊右鍵並選擇檢查元素。瀏覽器視窗會分成兩行，在下方視窗會看到該元素的源代碼。也可以看到 CSS 元素及其樣式。你甚至可以在那裏編輯 CSS 以作測試。切記，使用檢查元素做的任何更改僅對你可見。一旦刷新頁面，這些更改就會消失。要使更改永久保存，你必須使用你的 style.css 文件或其他適當的文件。

為留言添加奇数和偶数背景色

為奇數和偶數留言添加不同的背景色是一種設計趨勢，已經流行了好幾年。這有助於提高可讀性，特別是當你有很多留言時。它也與某些主題顏色非常搭配，因此許多設計師都想利用這個功能。為了幫助設計師達成這個目標，WordPress 會分別為每條留言添加 odd 和 even 類別。

你可以很容易地在主題的 style.css 中粘貼以下代碼，來為留言添加奇數/偶數樣式：

.commentlist .even .comment {
background-color:#ccddf2;
}
.commentlist .odd .comment {
background-color:#CCCCCC;
}

設計留言作者和元信息

WordPress 還會為每條留言標題中的元素添加類別。這允許主題設計師自定義作者信息及其他留言元信息（如留言日期和時間）的顯示。以下是一個範例代碼，可粘貼到主題的 style.css 文件中來不同地設計這些元素。在這個例子中，我們為留言元信息添加了背景顏色和一些間距。

.comments-area article header {
margin: 0 0 48px;
overflow: hidden;
position: relative;
background-color:#55737D;
color:#FFFFFF;
padding: 10px;
}

以不同方式設計文章作者的留言

很多情況下，你可能會看到文章作者的留言被突出顯示，無論是使用不同的背景顏色還是額外的徽章。WordPress 為文章作者的留言添加了預設的 class bypostauthor。WordPress 主題設計師可以使用這個 class 來以不同方式設計文章作者的留言。

一些主題使用自己的回調函數來顯示留言。使用回調函數，這些主題可能會為文章作者的留言添加額外信息。例如，Twenty Twelve 使用以下代碼在函數 twentytwelve_comment()（位於主題的 functions.php 文件中）的回調函數中：

// 如果當前文章作者也是留言作者，則在視覺上顯示出來。

( $comment->user_id === $post->post_author ) ? ' ' . __( 'Post author', 'twentytwelve' ) . '' : '' );

此代碼將文章作者添加到留言元信息中。根據你的 WordPress 主題處理文章作者留言的方式，你可以將其修改為任意內容。

如果你使用的是不同的主題，則需要找出你的主題如何處理留言。只需打開你的主題的 comments.php 文件。如果你的主題使用自己的回調函數，那麼你會在 wp_list_comments 函數中看到，如下所示：

 'twentytwelve_comment', 'style' => 'ol' ) ); ?>

在上面的例子中，你可以看到該主題使用 twentytwelve_comment 作為回調函數。如果有指定回調函數，那麼最可能找到這個函數的位置是你的主題的 functions.php 文件。

在這個例子中，我們將修改此函數，使其顯示為 Editor 而非文章作者。為此，我們修改了留言回調函數，如下所示：

// 如果當前文章作者也是留言作者，則在視覺上顯示出來。

( $comment->user_id === $post->post_author ) ? ' ' . __( 'Editor', 'twentytwelve' ) . '' : '' );

我們還將通過在主題的 style.css 文件中添加以下代碼來修改其外觀：

li.bypostauthor cite span {
color: #21759b;
background-color: #f8f0cb;
background-image: none;
border: 1px solid #f8f0cb;
border-radius: 3px;
box-shadow: none;
padding: 3px;
font-weight:bold;
}

設計 WordPress 留言中的回覆鏈接

大多數 WordPress 主題在每個留言下都有一個回覆鏈接。此功能僅在你啟用了嵌套留言時顯示。要啟用嵌套留言，進入你的 WordPress 領域管理（設定 » 討論）。查看“其他留言設置”部分，並勾選“啟用嵌套（嵌套）留言”的選框。

WordPress 為回覆鏈接生成的預設 CSS 類別為 reply 和 comment-reply-link。我們將使用這些類別來修改回覆鏈接，將其變為CSS按鈕。

.reply {
float:right;
margin:0 10px 10px 0;
text-align:center;
background-color: #55737D;
border:1px solid #55737D;
border-radius:3px;
padding:3px;
width:50px;
box-shadow: 1px 1px 2px 2px #4f4f4f;
}

.comment article {
padding-bottom:2.79rem;
}

a.comment-reply-link,
a.comment-edit-link {
color: #FFFFFF;
font-size: 13px;
font-size: 0.928571429rem;
line-height: 1.846153846;
text-decoration:none;
}

a.comment-reply-link:hover,
a.comment-edit-link:hover {
color: #f6e7d7;
}

設計留言中的編輯按鈕

在大多數 WordPress 主題中，有權限編輯留言的已登錄用戶可以在每條留言下看到一個留言編輯鏈接。以下是一個使用預設類別 comment-edit-link 修改鏈接外觀的小小 CSS：

a.comment-edit-link {
float:left;
margin:0 0 10px 10px;
text-align:center;
background-color: #55737D;
border:1px solid #55737D;
border-radius:3px;
padding:3px;
width:50px;
box-shadow: 1px 1px 2px 2px #4f4f4f;
}

設計取消留言回覆鏈接

在大多數不錯的 WordPress 主題中，點擊回覆鏈接會在你要回覆的留言框下方打開留言表單，並提供一個取消留言回覆的鏈接。讓我們使用預設 CSS ID cancel-comment-reply 來修改這個取消留言回覆的鏈接：

#cancel-comment-reply-link  {
text-align:center;
background-color: #55737D;
border:1px solid #55737D;
border-radius:3px;
padding:3px;
width:50px;
color:#FFFFFF;
box-shadow: 1px 1px 2px 2px #4f4f4f;
text-decoration:none;
}