如何設置WordPress評論表單的樣式（最終指南）

您是否要在網站上更改WordPress評論表的樣式？ 評論在建立網站用戶參與度方面起著重要作用。 美觀的用戶友好評論表單鼓勵用戶參與討論。 這就是為什麼我們創建了有關如何輕鬆設置WordPress註釋表單樣式的最終指南。

開始之前

WordPress主題控制著您網站的外觀。 每個WordPress主題都帶有幾個文件，包括模板文件，函數文件，JavaScript和样式表。

樣式表包含WordPress主題使用的所有元素的CSS規則。 您可以添加自己的自定義CSS來覆蓋主題的樣式規則。

如果您以前沒有做過，請參閱我們的文章，如何為初學者在WordPress中添加自定義CSS。

除CSS之外，您可能還需要添加一些功能來修改WordPress註釋表單的默認外觀。 如果您之前沒有做過，請參閱我們的文章，了解如何在WordPress中復制和粘貼代碼。

話雖如此，讓我們看一下如何設置WordPress註釋表單的樣式。

由於這是一個相當全面的指南，因此我們創建了一個目錄以便於導航：

在WordPress中更改評論表單樣式

在大多數WordPress主題中，都有一個名為comments.php的模板。 此文件用於在您的博客文章上顯示評論和評論表單。 WordPress註釋表單是通過使用以下函數生成的： 。

默認情況下，此功能使用三個文本字段（名稱，電子郵件和網站），註釋文本的textarea字段，符合GDPR的複選框和提​​交按鈕生成註釋表單。

您可以通過簡單地調整默認CSS類輕鬆地修改每個字段。 以下是WordPress添加到每個註釋表單的默認CSS類的列表。

#respond { } 
#reply-title { } 
#cancel-comment-reply-link { }
#commentform { } 
#author { } 
#email { } 
#url { } 
#comment 
#submit
.comment-notes { } 
.required { }
.comment-form-author { }
.comment-form-email { } 
.comment-form-url { }
.comment-form-comment { } 
.comment-form-cookies-consent { }
.form-allowed-tags { } 
.form-submit

通過簡單地調整這些CSS類，您可以完全改變WordPress註釋表單的外觀。

讓我們繼續嘗試更改一些內容，以便您可以很好地了解其工作原理。

首先，我們將從突出顯示活動表單字段開始。 突出顯示當前活動的字段可以使您的表單對有特殊需求的人更易於訪問，並且還可以使註釋表單在較小的設備上看起來更好。

	
#respond { 
background: #fbfbfb;
padding:0 10px 0 10px;
}
 
/* Highlight active form field */
 
#respond input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
  
  
#respond input[type=text]:focus,
input[type=email]:focus, 
input[type=url]:focus,
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
margin: 5px 1px 3px 0px;
border: 2px solid rgba(81, 203, 238, 1);
}

更改後，這就是我們的表單在WordPress 26主題中的樣子：

使用這些類，可以更改文本在輸入框中的顯示方式。 我們將繼續更改作者姓名和URL字段的文本樣式。

#author, #email { 
font-family: "Open Sans", "Droid Sans", Arial;
font-style:italic;
color:#1d1d1d; 
letter-spacing:.1em;
} 
 
#url  { 
color: #1d1d1d;
font-family: "Luicida Console", "Courier New", "Courier", monospace; 
} 

如果您仔細查看下面的屏幕截圖，則名稱和電子郵件字段字體與網站URL不同。

您還可以更改WordPress評論表單提交按鈕的樣式。 讓我們給它一些CSS3漸變和陰影，而不是使用默認的Submit按鈕。

#submit {
background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
} 
 
#submit:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
background-color:#5cbf2a; 
}
#submit:active { 
position:relative;
top:1px;
}

將WordPress評論表格提升到新的水平

您可能會認為這太基礎了。 好吧，我們必須從這裡開始，以便每個人都可以跟隨。

您可以通過重新排列表單字段，添加社交登錄，訂閱評論，評論指南，快速標籤等來將WordPress評論表單提升到新的水平。

將社交登錄添加到WordPress評論

讓我們從向WordPress評論添加社交登錄開始。

您需要做的第一件事是安裝並激活WordPress社交登錄插件。 有關更多詳細信息，請參閱有關如何安裝WordPress插件的分步指南。

激活後，您需要訪問 設置»WP社交登錄 頁面以配置插件設置。

該插件將需要API密鑰才能與社交平台連接。 您將看到有關如何獲取每個平台此信息的說明的鏈接。

輸入API密鑰後，單擊“保存設置”按鈕以存儲您的更改。

現在，您可以訪問您的網站以查看評論表單上方的社交登錄按鈕。

在評論表之前或之後添加評論策略文本

我們愛所有用戶，非常感謝他們花幾分鐘在我們的網站上發表評論。 但是，要創建健康的討論環境，重要的是緩和評論。

為了完全透明，我們創建了一個評論策略頁面，但是您不能僅將此鏈接放在頁腳中。

我們希望我們的評論政策突出並對所有發表評論的用戶可見。 這就是為什麼我們決定在WordPress評論表單中添加評論政策的原因。

如果要添加評論策略頁面，那麼您要做的第一件事就是創建一個WordPress頁面並定義您的評論策略（您可以竊取我們的內容並對其進行修改以滿足您的需求）。

之後，可以在主題的functions.php文件或特定於站點的插件中添加以下代碼。

function wpbeginner_comment_text_before($arg) {
    $arg['comment_notes_before'] = "
We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our comment policy.
";
    return $arg;
}
 
add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');

上面的代碼將用此文本替換註釋前的默認註釋形式。 我們還在代碼中添加了一個CSS類，以便我們可以使用CSS突出顯示該通知。 這是我們使用的示例CSS：

p.comment-policy {
    border: 1px solid #ffd499;
    background-color: #fff4e5;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0px 10px 0px;
    font-size: small;
    font-style: italic;
}

這是在我們的測試站點上的外觀：

如果要在註釋文本區域後顯示鏈接，請使用以下代碼。

function wpbeginner_comment_text_after($arg) {
    $arg['comment_notes_after'] = "
We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our comment policy.
";
    return $arg;
}
 
add_filter('comment_form_defaults', 'wpbeginner_comment_text_after');

不要忘記相應地更改URL，因此它會轉到您的評論政策頁面，而不是example.com。

將註釋文本字段移到底部

默認情況下，WordPress註釋表單首先顯示註釋文本區域，然後顯示名稱，電子郵件和網站字段。 此更改是WordPress 4.4中引入的。

在此之前，WordPress網站首先顯示名稱，電子郵件和網站字段，然後顯示註釋文本框。 我們認為我們的用戶習慣於按此順序查看評論表單，因此我們仍然使用WPBeginner上的舊字段順序。

如果您想這樣做，則只需將以下代碼添加到主題的functions.php文件或特定於站點的插件中。

function wpb_move_comment_field_to_bottom( $fields ) {
$comment_field = $fields['comment'];
unset( $fields['comment'] );
$fields['comment'] = $comment_field;
return $fields;
}
 
add_filter( 'comment_form_fields', 'wpb_move_comment_field_to_bottom'); 

此代碼只是將註釋文本區域字段移到底部。

從WordPress評論表中刪除網站（URL）字段

評論表單中的網站字段吸引了大量垃圾郵件發送者。 雖然刪除它不會阻止垃圾郵件發送者，甚至不會減少垃圾郵件評論，但它無疑可以使您免於意外批准帶有不良作者網站鏈接的評論。

它還將減少評論表單中的字段，使其更容易使用，並且更加友好。 有關此主題的更多信息，請參閱我們關於從WordPress註釋表單中刪除網站url字段的文章

要從註釋表單中刪除URL字段，只需將以下代碼添加到您的functions.php文件或特定於站點的插件中。

function wpbeginner_remove_comment_url($arg) {
    $arg['url'] = '';
    return $arg;
}
add_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');

在WordPress中添加“訂閱評論”複選框

當用戶在您的網站上發表評論時，他們可能想跟進該話題，以查看是否有人回復了他們的評論。 通過添加“訂閱評論”複選框，您可以使用戶能夠在帖子中出現新評論時立即接收通知。

要添加此復選框，您需要做的第一件事是安裝並激活“訂閱評論重新加載”插件。 激活後，您需要訪問設置»訂閱評論以配置插件設置。

有關詳細的分步說明，請參閱我們的文章，介紹如何允許用戶在WordPress中訂閱評論。

在評論表中添加快速標籤

快速標籤是格式化按鈕，使用戶可以輕鬆設置其註釋樣式。 這些按鈕包括加粗，斜體，添加鏈接或塊引用的按鈕。

要添加快速標籤，您需要安裝並激活基本評論快速標籤插件。 有關詳細信息，請參閱有關如何輕鬆地以WordPress註釋形式添加快速標記的文章。

這是添加快速標籤後您的評論表單的外觀。

我們希望本文能幫助您學習如何設置WordPress註釋表單的樣式，以使其對用戶更加有趣。 您可能還希望查看我們的技巧，以獲取有關WordPress博客文章的更多評論。

如果您喜歡這篇文章，請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。