wordpress列数布局_如何设置WordPress注释布局的样式

wordpress列数布局

Recently we showed you how to style the WordPress comment form, and we thought it would be incomplete if we did not write about styling WordPress comments layout. In the past, we have discussed that there are default WordPress generated CSS classes and IDs to help make it easier for theme designers to style their templates. In this article, we will be using those default classes to show you how to style your WordPress comments layout and some of the cool things you can do with it.

最近，我们向您展示了如何设置WordPress注释表单的样式 ，并且我们认为如果不撰写有关样式化WordPress注释布局的文章，这将是不完整的。 过去，我们讨论过使用默认的WordPress生成CSS类和ID来帮助主题设计者更轻松地设置模板样式。 在本文中，我们将使用这些默认类向您展示如何设置WordPress注释布局的样式以及您可以使用它进行的一些出色操作。

For the sake of this example, We will be modifying the default Twenty Twelve WordPress theme in this article. Note: This article is for beginning theme designers and DIY users who have fair understanding of HTML and CSS.

为了这个示例，我们将在本文中修改默认的Twenty Twelve WordPress主题。 注意：本文适用于对HTML和CSS有一定了解的入门主题设计师和DIY用户。

默认的WordPress注释类 (Default WordPress Comments Classes)

By default WordPress generates these classes for elements in the comments template:

默认情况下，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类 (How to Find Which CSS Classes You Need to Edit)

Before we move on to styling WordPress comments layout, a little tip for our new users. Google Chrome and Mozilla Firefox web browsers come with a handy tool that you can use to improve your WordPress theme development skills. The tool is called Inspect Element. Simply take your mouse to an element on a web page, right click and choose inspect element. Your browser window will split into two rows and in the lower window you will see the source code of that element. Also in the lower window, you will be able to see CSS elements and how they are styled. You can even edit the CSS in there for testing purposes. It’s important to remember, anything you change using the Inspect Element is only visible to you. The moment you refresh the page, those changes will disappear. To make the changes permanent, you have to use your style.css file or other appropriate files in your themes.

在继续设计WordPress注释布局样式之前，为新用户提供一些提示。 Google Chrome和Mozilla Firefox Web浏览器附带了一个方便的工具，您可以使用它来提高WordPress主题开发技能。 该工具称为检查元素 。 只需将鼠标移至网页上的某个元素，右键单击并选择检查元素。 浏览器窗口将分为两行，在下面的窗口中，您将看到该元素的源代码。 同样在下面的窗口中，您将能够看到CSS元素及其样式。 您甚至可以在此处编辑CSS以进行测试。 请记住，重要的是，使用“检查元素”所做的任何更改仅对您可见。 刷新页面后，这些更改将消失。 要使更改永久生效，您必须在主题中使用style.css文件或其他适当的文件。

添加奇数和偶数背景色以进行注释 (Adding Odd and Even Background Colors for Comments)

Having a different background color for odd and even comments is a design trend that has been around for some years now. It helps the readability specially if you have a lot of comments. It also looks really good with certain theme colors which is why many designers want to utilize this functionality. To help designers achieve this goal, WordPress adds an odd and even class to each comment respectively.

对于奇数和偶数注释，使用不同的背景颜色是一种设计趋势，这种趋势已经存在了多年。 如果您有很多评论，它特别有助于提高可读性。 在某些主题颜色的情况下，它看起来也非常好，这就是为什么许多设计师希望使用此功能的原因。 为了帮助设计人员实现此目标，WordPress分别为每个注释添加了奇数和偶数类。

You can easily add the odd/even styling for comments in your theme’s style.css by pasting the following code.

您可以通过粘贴以下代码轻松在主题的style.css中添加注释的奇/偶样式。

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

The result would look something like this:

结果看起来像这样：

样式注释作者和元信息 (Styling Comment Author and Meta Information)

WordPress also adds classes to elements displayed in each comment header. This allows theme designers to customize the display of author information and other comment meta such as comment date and time. Here is a sample code to paste in your theme’s style.css file to style these elements differently. In this example we have added background color to comment meta along with some spacing.

WordPress还将类添加到每个注释标题中显示的元素。 这使主题设计者可以自定义作者信息和其他评论元的显示，例如评论日期和时间。 以下是示例代码，可粘贴到主题的style.css文件中，以对这些元素进行不同的样式设置。 在此示例中，我们为注释元添加了背景色以及一些间距。

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

This is how it should look like:

它应该是这样的：

文章发帖作者的评论风格不同 (Styling Post Author Comments Differently)

Often times you might see that post author comments are highlighted either with a different background color or some additional badge. WordPress adds a default class bypostauthor to all comments made by the post’s author. WordPress theme designers can use this class to style post author comments differently.

通常，您可能会看到作者后的评论以不同的背景色或其他徽章突出显示。 WordPress将默认的类bypostauthor添加到帖子作者的所有注释中。 WordPress主题设计师可以使用此类来以不同方式设置帖子作者的评论样式。

Some themes, use their own callback function to display comments. Using the callback function, these themes may add additional information to a comment by post author. For example, Twenty Twelve uses the following line in the comment callback function twentytwelve_comment() (located in functions.php file of the theme).

有些主题使用自己的回调函数来显示注释。 使用回调函数，这些主题可以将附加信息添加到帖子作者的评论中。 例如，Twenty Twelve在注释回调函数二十(十二twentytwelve_comment() (位于主题的functions.php文件中twentytwelve_comment()使用以下行。

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

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

This code adds <span>Post Author</span> to the comment meta information. Depending on how your WordPress theme handles comments by the post author, you can modify that to anything you want.

此代码将<span>Post Author</span>到评论元信息。 根据WordPress主题如何处理帖子作者的评论，您可以将其修改为所需的任何内容。

If you are using a different theme than Twenty Twelve, then you need to find out how your theme handles comments. Simply open your theme’s comments.php file. If your theme is using its own callback function, then you would see it inside wp_list_comments function, like this:

如果您使用的主题不同于“十二点十二”，那么您需要了解主题如何处理评论。 只需打开主题的comments.php文件。 如果您的主题使用其自己的回调函数，则可以在wp_list_comments函数中看到它，如下所示：

<?php wp_list_comments( array( 'callback' => 'twentytwelve_comment', 'style' => 'ol' ) ); ?>

In the above example, you can see that the theme is using twentytwelve_comment as the callback function. If a callback function is specified, then the most probable location to find this function is in your theme’s functions.php file.

在上面的示例中，您可以看到主题使用的是twentytwelve_comment作为回调函数。 如果指定了回调函数，则找到此函数的最可能的位置是主题的functions.php文件中。

In this example we are changing this function to display Editor instead of Post Author. To do that we have modified the comment callback function like this:

在此示例中，我们将更改此功能以显示“编辑器”而不是“后作者”。 为此，我们修改了注释回调函数，如下所示：

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

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

We are also going to modify the way it looks by adding the following in our theme’s style.css file like this:

我们还将通过在主题的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;
}

This is how it would look like:

它是这样的：

WordPress注释中的样式注释回复链接 (Styling Comment Reply Link in WordPress Comments)

Most WordPress themes have a reply link below each comment. This functionality is only displayed if you have threaded comments enabled. To enable threaded comments, go to your WordPress admin (Settings » Discussion). Look at the section where it says other comment settings, and check the box for enable threaded (nested) comments.

大多数WordPress主题在每个评论下方都有一个回复链接。 仅当启用了主题注释时，才会显示此功能。 要启用主题注释，请转到WordPress管理员( “设置”»“讨论” )。 查看说明其他评论设置的部分，然后选中启用主题(嵌套)评论的框。

The default CSS classes generated by WordPress for the reply link are reply and comment-reply-link. We will be using those classes to modify the reply link and turn into a CSS button.

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

This is how it would look like:

它是这样的：

样式注释编辑按钮 (Styling Comment Edit Button)

In most WordPress themes, logged in users with the capability to edit comments can see a comment edit link below each comment. Here is a little CSS that uses the default class comment-edit-link to modify the appearance of the link.

在大多数WordPress主题中，具有编辑注释能力的登录用户可以在每个注释下方看到一个注释编辑链接。 这是一个使用默认类comment-edit-link修改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;
}

Here is how it would look like:

看起来像这样：

样式取消评论回复链接 (Styling Cancel Comment Reply Link)

In most good WordPress themes, clicking on the Reply link opens up the comment form just below the comment you are replying to with a link to cancel comment reply. Lets modify this cancel comment reply link by using the default CSS ID cancel-comment-reply.

在大多数优秀的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;
}

Here is how it would look like:

看起来像这样：

设置WordPress注释表单的样式 (Styling the WordPress Comment Form)

Usable, aesthetically pleasant and stylish comment forms encourage users to leave a comment on your blog. Earlier we have written a detailed article about how to style WordPress comment form. We would highly recommend that you go check that out to see how you can take your WordPress comment form to next level.

可用的，美学上令人愉悦的和时尚的评论表单鼓励用户在您的博客上发表评论。 早些时候，我们写了一篇有关如何设置WordPress注释表单样式的详细文章。 我们强烈建议您去检查一下，看看如何将WordPress评论表带到下一个级别。

We hope that this article helps you style your WordPress comments layout. If you have any questions or suggestions, then please feel free to let us know by leaving a comment below.

我们希望本文能帮助您设置WordPress注释布局的样式。 如果您有任何疑问或建议，请随时在下面发表评论让我们知道。

翻译自: https://www.wpbeginner.com/wp-themes/how-to-style-your-wordpress-comments-layout/

wordpress列数布局