如何改变你的 WordPress Logo 大小 (适用于任何主题)

如何改变你的 WordPress Logo 大小 (适用于任何主题)

如何改变你的 WordPress Logo 大小 (适用于任何主题)

最近我们的一位读者问我们是否可以在 WordPress 中改变你的 logo 大小?网站标志是你的品牌的重要组成部分。根据你使用的 WordPress 主题,有时不清楚如何改变你的 logo 大小,使其变大或变小。

在本文中,我们将逐步向你展示如何轻松地更改 WordPress logo 的大小。

为什么要在 WordPress 中改变 Logo 的大小?

当你把你的 logo 上传到 WordPress 时,它的大小可能并不总是正确的。

一个太小的标志不会引人注目。然而,太大的 logo 最终会对你的网站设计产生负面影响。

如果你已经投资了一个自定义标志设计,那么你想要确保你的标志显示为正确的大小在你的网站标题。

对于那些仍然在标志设计过程中,看我们挑选的最好的免费标志制造者。

话虽如此,我们将向你展示几种不同的方法,你可以用它来改变 WordPress 中的 logo 大小。

你选择的方法取决于你使用的 WordPress 主题,以及你编辑 CSS 代码的舒适度。

方法 1. 用 WordPress Customizer 改变 WordPress Logo 的大小

在 WordPress 中改变 logo 大小最简单的方法是使用主题定制器。但是,这个方法只有在你的 WordPress 主题支持它时才有效。

许多流行的主题,如 Divi, Astra, Ultra,和其他都有内置的标志大小改变工具。

当你在 WordPress 中上传你的 logo 时,这些主题可以很容易地用一个简单的滑块来调整 logo 的宽度和高度。

注意:你的 logo 大小只和你上传的图片一样大,所以如果你的目标是让它更大,你需要确保你上传的是一个更大的 logo 图片。

为了教程的目的,我们将展示如何在 Divi, Astra 和 Ultra 主题中改变你的 logo,但是方法是类似于大多数受欢迎的 WordPress 主题。如果你的主题没有这个选项,那么你需要使用本教程的方法 2 或 3。

在 Divi WordPress Theme 中改变 WordPress Logo 的大小

首先,导航到 Divi» 主题定制,并单击 “标题和导航” 菜单选项。

选择自定义主题

然后,点击 “主菜单栏” 下拉选项。在这里你可以改变你的标志的大小。

首先,你需要调整 “菜单高度” 设置。这将控制整个导航菜单的高度,并定义 logo 的大小。在那之后,你可以改变 “Logo 最大高度” 设置,这是菜单总高度的百分比。

你可以上下调整 “Logo 最大高度” 滑块,直到你找到最适合你的 WordPress 博客的 Logo 大小。确保在退出屏幕前点击 “Publish” 按钮保存更改。

在 Astra WordPress Theme 中改变 WordPress Logo 大小

你需要做的第一件事是导航到外观 » 自定义,然后点击 “标题” 菜单选项。

之后,点击 “站点标识” 菜单选项。在这里,你可以轻松地调整你的 logo 的大小。

你所要做的就是把 “Logo 宽度” 滑块移到左边或右边。当你移动滑块时,你可以实时自动看到徽标大小的变化。

一旦你对你的 logo 的大小感到满意,确保在退出页面之前点击 “发布”。

方法 2. 通过编辑 CSS 来改变 WordPress Logo 的大小

如果你的 WordPress 主题不支持使用 WordPress 主题定制器改变 logo 的大小,那么你可以通过添加自定义 CSS 来改变大小。

你需要做的第一件事是导航到你的网站主页。然后,右键单击页面上的任何地方,选择 “Inspect” 选项。这将弹出一个 Inspect 菜单,其中显示该页面的所有代码。

之后,你需要单击看起来像鼠标指针的 “Select an element” 图标。这将让你选择你的网站的标志元素和查看代码。

接下来,只需将鼠标悬停在你的网站 logo 上,直到 CSS 类弹出。它将看起来类似于下图。

你将使用这个 CSS 类来定制你的 WordPress logo 的大小。所以,在文本编辑器中写下来,比如记事本。

现在你可以回到你的 WordPress 管理仪表盘并导航到外观 » 定制。你需要点击 “附加 CSS” 菜单选项。这将弹出一个下拉框,你可以在其中添加自定义 CSS 代码。

只需添加前面找到的 CSS 类并指定新的图像尺寸。你可以使用下面的 CSS 代码作为示例。

img.custom-logo {
     max-height: 100px !important;
}

你需要将上面的自定义 logo CSS 类修改为你的主题使用的 CSS 类。

你还可以将 max-height 更改为你想要的任何大小。