如何在WordPress中更改头像图像大小

你想在WordPress中更改Gravatar图像大小吗?Gravatar是一项将用户的电子邮件地址与图片连接起来的服务。WordPress 主题以设定的大小显示头像,但您可能更喜欢将这些图像变小或变大,以更好地适合您网站的设计。在本文中,我们将向您展示如何在WordPress中更改Gravatar图像的大小。

如何在WordPress中更改Gravatar图像大小

为什么要在WordPress中更改头像图像大小?

Gravatar 代表 全球公认的头像。这是一项网络服务,可让您创建个人资料并将头像图像与您的电子邮件地址相关联。

大多数WordPress主题在用户的评论旁边显示一个Gravatar。一些主题还会在作者简介框中显示一个头像。

即使用户没有Gravatar帐户,您的网站仍将显示默认的WordPress Gravatar之一。

默认的WordPress Gravatar

有时您可能想更改主题的头像的大小。例如,您可能希望将它们放大以使其脱颖而出。这可以吸引访问者对您网站的评论部分的注意,并帮助您在WordPress帖子上获得更多评论。

方法1:使用WordPress全站编辑器更改头像大小(仅限块主题)

如果您使用的是基于块的主题,例如 主题岛赫斯蒂亚专业版 or 二十二三,那么您可以使用全站点编辑器更改 Gravatar 大小。

此方法不适用于所有主题,因此如果您不使用启用块的主题,那么我们建议您改用方法 2。

在WordPress仪表板中,转到外观»编辑器。

打开WordPress全站编辑器(FSE)

在左侧菜单中,您可以选择是编辑模板还是模板部件。

要更改WordPress评论的Gravatar大小,您通常会从左侧菜单中选择“模板部件”。

模板部件,在启用 WordPress 块的主题中

之后,只需点击“评论”。

您现在可以单击以选择 注释 模板部分。

WordPress完整站点编辑器中的“评论”模板部分

这将打开一个新菜单,其中包含可用于自定义注释模板部分的设置。

您现在可以继续并单击实时预览中的任何头像。

使用完整站点编辑器更改头像图像大小

在右侧菜单中,您可以选择“阻止”选项卡(如果尚未选择)。

您现在可以通过拖动“图像大小”滑块来放大或缩小头像。

使用WordPress中的完整站点编辑器(FSE)更改Gravatar的大小

当你移动滑块时,所有的头像都会自动更新,所以你可以尝试不同的尺寸,看看什么看起来最好。

当您对所做的更改感到满意时,请单击“保存”按钮。

使用全站编辑器 (FSE) 保存调整大小的头像

现在,如果您访问WordPress网站上的任何评论部分,您将实时看到更改。

方法2:更改WordPress评论的头像大小(适用于所有主题)

如果您没有使用启用块的WordPress主题,则可以使用代码更改WordPress注释的Gravatar大小。

此方法要求您编辑主题文件,因此它不是最适合初学者的选项。但是,此方法应该适用于大多数WordPress主题。

如果您直接编辑WordPress主题文件,则下次更新主题时,这些更改将消失。

创建子主题后,您需要使用FTP客户端(如FileZilla)连接到WordPress站点,或者您可以使用WordPress托管cPanel的文件管理器。

如果您是SiteGround客户,则可以改用站点工具仪表板。

连接后,您需要转到/wp-content/themes/并打开当前WordPress主题的文件夹。

FTP 客户端示例

到达此处后,打开注释.php文件并查找函数。在此函数中,您将找到设置头像大小的函数。wp_list_comments``avatar_size

下面是一个示例:

<?php
wp_list_comments(
    array(
        'avatar_size' => 60,
        'style'       => 'ol',
        'short_ping'  => true,
    )
);
?>

您可以简单地将其更改为要使用的大小。在上面的代码片段中,这意味着将 60 更改为另一个数字。avatar_size

头像是正方形的,因此WordPress将对图像的宽度和高度使用相同的值。这意味着您只需要输入一个数字。

进行此更改后,请确保保存文件并将其上传回您的WordPress托管帐户。完成后,您可以访问WordPress博客以查看操作中的更改。

如果 Gravatar 图像没有更改,则可能是由于缓存。

如果 Gravatar 仍然没有更改,那么您的主题的 CSS 可能会覆盖 comment.php 文件中的设置。

您可以使用浏览器的检查工具查看是否是这种情况。步骤会因您使用的浏览器而异,但在 Chrome 上,您只需右键单击或按住 Ctrl 键单击头像,然后选择“检查”。

使用谷歌浏览器检查WordPress Gravatar

这将在新面板中显示页面的 HTML 和 CSS 代码。

在此代码中,您需要查找高度和宽度值。

使用Chrome的检查工具编辑WordPress Gravatar

如果大小与您在 comment.php 文件中指定的大小不同,则意味着您的主题样式.css文件将覆盖您的更改。

如果是这种情况,则只需切换回FTP客户端即可。您现在可以打开主题的文件夹,然后打开 style.css 文件。

使用 FTP 客户端打开 WordPress 主题的样式.css文件

在这里,搜索带有单词 .avatar

您通常会在 CSS 类中找到它,例如:comment-author .avatar

.comment-author .avatar {
    height: 42px;
    position: relative;
    top: 0.25em;
    width: 42px;
}

您现在可以继续将宽度和高度更改为您想要的重力头像值。

之后,只需保存更改即可。现在,如果您访问WordPress博客或网站,您将看到更新的Gravatar图像。

此时,您可能想知道为什么我们建议在使用更简单的 CSS 方法之前尝试更改 注释.php 文件中的 Gravatar 大小。

首先,CSS有时会使头像看起来模糊,特别是如果你使头像比原始图像大得多。其次,更改评论中的图像大小.php通常可以帮助您的网站更快地加载。

方法3:如何更改作者简历的头像大小

如果您运行多作者WordPress网站,那么作者框可以帮助读者了解有关帖子作者的更多信息。

许多作者简历显示了作者的头像以及他们的简历。要更改作者简介框中的默认 Gravatar 大小,您需要找到添加简介的主题文件。

只需使用FTP客户端(如FileZilla)或WordPress托管的文件管理器连接到您的网站。连接后,转到/wp-content/themes/并打开当前WordPress主题的文件夹。

之后,您需要打开模板部件文件夹。

使用 FTP 客户端编辑 WordPress 主题中的模板部分

现在需要找到包含代码的文件。您通常会在名为 author-bio.php、单个.php文件、函数.php文件或类似文件的模板部件文件中找到此代码。get_avatar

下面是此代码的外观示例:

<div class="author-bio <?php echo get_option( 'show_avatars' ) ? 'show-avatars' : ''; ?>">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), '85' ); ?>

在上面的代码段中,您只需将数字 85 更改为您要使用的大小即可。

在其他主题中,代码可能如下所示:

get_avatar( get_the_author_meta( 'user_email' ), 85);

您可以简单地将数字替换为要用于使 Gravatar 变大或变小的值。

更改大小后,不要忘记保存更改。然后,您可以访问您的网站以查看新的作者简介框。

如果头像没有改变,则需要按照上述相同的过程在 style.css 文件中搜索头像类。找到此类后,您可以键入新的 Gravatar 高度和宽度值。