如何在WordPress中显示圆形Gravatar图像

Recently, we showed you how to style your comments layout and how to style your comment form. One of our users emailed us and asked “how did you make your gravatar images round? Are you storing gravatar images locally to get them to be round?” In this article, we will show you how to display round gravatar images in WordPress. We will use the border-radius property of CSS3 to create circular gravatar images.

最近，我们向您展示了如何设置注释布局的 样式以及如何设置注释表单的样式 。 我们的一位用户给我们发送了电子邮件，并问“您如何使头像图像变圆？ 您是否在本地存储图像以使其圆润？” 在本文中，我们将向您展示如何在WordPress中显示圆形图像。 我们将使用CSS3的border-radius属性创建圆形图像。

First thing you need to do is edit your theme’s style.css file. You can do this by using a FTP program or by going to Appearance » Editor in your WordPress admin. Next, you want to add the following code in your CSS file:

您需要做的第一件事是编辑主题的style.css文件。 您可以使用FTP程序或通过WordPress管理员中的外观»编辑器来执行此操作。 接下来，您要在CSS文件中添加以下代码：

.avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}

This should work on most WordPress themes. However, if this does not work on your theme, then there is probably some plugin or your theme function messing with the default classes used for gravatar in WordPress. In order to find out which css class gravatar images are using in your theme, you need to open a blog post that has comments. Scroll down to the comments section, and right click on the gravatar image to select Inspect Element. It will show you the source code for your gravatar, like this:

这应该适用于大多数WordPress主题。 但是，如果这不适用于您的主题，则可能是某些插件或您的主题函数弄乱了WordPress中用于gravatar的默认类。 为了找出主题中使用CSS类图像，您需要打开一个带有评论的博客文章。 向下滚动到注释部分，然后在图形图像上单击鼠标右键以选择“检查元素”。 它将为您显示Gravatar的源代码，如下所示：

If the gravatar image has something other than avatar then use that instead of .avatar in the above css code.

如果图像有头像以外的其他内容， 请在上面CSS代码中使用该图像代替.avatar 。

We hope that this article helped you display round gravatar images on your WordPress blog. Let us know if you have any questions or feedback by leaving a comment below.

我们希望本文能帮助您在WordPress博客上显示圆形的图像。 请在下面留下评论，让我们知道您是否有任何疑问或反馈。

翻译自: https://www.wpbeginner.com/wp-themes/how-to-display-round-gravatar-images-in-wordpress/