如何設置WordPress註釋佈局的樣式


最近,我們向您展示瞭如何設置WordPress註釋表單的樣式,並且我們認為如果不撰寫有關樣式化WordPress註釋佈局的文章,這將是不完整的。 在過去,我們討論了默認的WordPress生成的CSS類和ID,以幫助主題設計人員更輕鬆地設置模板樣式。 在本文中,我們將使用這些默認類向您展示如何設置WordPress註釋佈局的樣式以及您可以使用它進行的一些出色操作。

為了這個示例,我們將在本文中修改默認的Twenty Twelve WordPress主題。 注意:本文適用於對HTML和CSS有一定了解的初級主題設計師和DIY用戶。

默認的WordPress註釋類

默認情況下,WordPress會為註釋模板中的元素生成以下類:

/*Comment Output*/

.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 Web瀏覽器附帶了一個方便的工具,您可以使用它來提高WordPress主題開發技能。 該工具稱為 檢查元素。 只需將鼠標移至網頁上的某個元素,右鍵單擊並選擇檢查元素。 瀏覽器窗口將分為兩行,在下面的窗口中,您將看到該元素的源代碼。 同樣在下面的窗口中,您將能夠看到CSS元素及其樣式。 您甚至可以在此處編輯CSS以進行測試。 請記住,重要的是,使用“檢查元素”所做的任何更改僅對您可見。 刷新頁面後,這些更改將消失。 要使更改永久生效,您必須在主題中使用style.css文件或其他適當的文件。

檢查Google Chrome瀏覽器中的元素以查看源代碼并快速找到匹配的CSS規則

添加奇數和偶數背景色以進行註釋

對於奇數和偶數註釋,使用不同的背景顏色是一種設計趨勢,這種趨勢已經存在了多年。 如果您有很多評論,它特別有助於提高可讀性。 在某些主題顏色的情況下,它看起來也非常好,這就是為什麼許多設計師希望使用此功能的原因。 為了幫助設計人員實現此目標,WordPress分別為每個註釋添加了奇數和偶數類。

您可以通過粘貼以下代碼輕鬆地在主題的style.css中添加註釋的奇/偶樣式。

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

結果看起來像這樣:

使用CSS在WordPress中為偶數和奇數註釋添加替代顏色

樣式註釋作者和元信息

WordPress還將類添加到每​​個註釋標題中顯示的元素。 這使主題設計者可以自定義作者信息和其他評論元的顯示,例如評論日期和時間。 以下是示例代碼,可粘貼到主題的style.css文件中,以對這些元素進行不同的樣式設置。 在此示例中,我們為註釋元添加了背景色以及一些間距。

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

它應該是這樣的:

在WordPress註釋中設置註釋元和作者信息的樣式

文章發帖作者的評論風格不同

通常,您可能會看到作者後的評論以不同的背景色或其他徽章突出顯示。 WordPress添加了默認類 bypostauthor 對帖子作者的所有評論。 WordPress主題設計師可以使用此類來以不同方式設置帖子作者的評論樣式。

有些主題使用自己的回調函數來顯示註釋。 使用回調函數,這些主題可以將附加信息添加到帖子作者的評論中。 例如,Twenty Twelve在註釋回調函數中使用以下行 twentytwelve_comment() (位於 functions.php 主題文件)。

// If current post author is also comment author, make it known visually.

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

此代碼添加 Post Author 註釋元信息。 根據您的WordPress主題如何處理帖子作者的評論,您可以將其修改為所需的任何內容。

如果您使用的主題不同於“十二點十二分”,那麼您需要了解主題如何處理評論。 只需打開您主題的 comments.php 文件。 如果您的主題使用其自己的回調函數,那麼您將在其中看到它 wp_list_comments 功能,像這樣:

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

在上面的示例中,您可以看到主題正在使用 twentytwelve_comment 作為回調函數。 如果指定了回調函數,則找到此函數的最可能的位置是主題的functions.php文件中。

在此示例中,我們將更改此功能以顯示“編輯器”而不是“後創作者”。 為此,我們修改了註釋回調函數,如下所示:

// If current post author is also comment author, make it known visually.

( $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註釋中對Aurhor註釋的樣式不同

WordPress註釋中的樣式註釋回复鏈接

大多數WordPress主題在每個評論下方都有一個回复鏈接。 僅當啟用了主題註釋時,才會顯示此功能。 要啟用主題註釋,請轉到WordPress管理員(設置»討論)。 查看說明其他評論設置的部分,然後選中啟用主題(嵌套)評論的框。

WordPress為回复鏈接生成的默認CSS類是 replycomment-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;
}

它是這樣的:

使用CSS在WordPress註釋中設置註釋回复按鈕的樣式

樣式註釋編輯按鈕

在大多數WordPress主題中,具有編輯評論功能的登錄用戶可以在每個評論下方看到評論編輯鏈接。 這是使用默認類的一些CSS comment-edit-link 修改鏈接的外觀。

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;
}

看起來像這樣:

使用CSS為WordPress註釋中的註釋編輯鏈接設置樣式

樣式取消評論回复鏈接

在大多數優秀的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;
}

看起來像這樣:

在WordPress評論回复表單中設置取消評論回复鏈接的樣式

設置WordPress註釋表單的樣式

可用的,美學上令人愉悅的和時尚的評論表單鼓勵用戶在您的博客上發表評論。 早些時候,我們寫了一篇有關如何設置WordPress評論表單樣式的詳細文章。 我們強烈建議您去檢查一下,看看如何將WordPress評論錶帶到下一個級別。

我們希望本文能幫助您設置WordPress註釋佈局的樣式。 如果您有任何疑問或建議,請隨時在下面發表評論讓我們知道。