• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载

更改WordPress的LOGO大小

徽标是任何品牌标识的重要组成部分。看到你喜欢的公司的标志可以帮助你立即与产品建立联系和信任。您网站上的徽标也是如此。您访问的每个网站都会在他们发布的几乎所有页面和帖子上都有他们的徽标。

在我们开始之前

徽标提供了一种将品牌标识添加到网站的简便方法。因此,几乎所有主题都可以选择使用 wordpress 管理仪表板中的定制器更改徽标。但是,更改徽标大小并非如此。这基本上意味着您可能需要做更多的工作才能完成它。

有很多方法可以更改 WordPress 网站中的徽标大小,但我们将仅限于两种方法,它们开始对 ner 友好并且不需要您对网站代码进行大量修改。

让我们从简单的开始吧!

使用内置设置更改 WordPress 徽标大小

一些高级主题开发人员将为您提供开箱即用的解决方案,用于更改 WordPress 网站上徽标的大小。我们将通过 ThemeFo rest上的一个名为Eduma的教育主题来学习如何做到这一点。

第一步是在您登录到后端后,从 WordPress 管理仪表板访问外观 > 自定义。

现在我们环顾四周,看看可用的菜单选项,并找出其中哪些可以具有我们需要的徽标设置。General菜单似乎是一个不错的选择,因此我们单击它。

更改WordPress的LOGO大小  第1张

单击屏幕上显示的下一个菜单项列表中的徽标。然后,您应该会看到一些更改徽标及其大小的选项。这个特殊的主题允许我们配置许多东西,比如为常规和粘性版本的徽标提供不同的图像。

更改WordPress的LOGO大小  第2张

如果您在设置中向下滚动一点,您应该会看到类似Logo Width或Logo Height的内容。在我们的例子中,我们将Logo Width的值设置为60%。您所做的任何更改都会立即反映在网站预览中,因此您可以撤消任何您不喜欢的更改。

更改WordPress的LOGO大小  第3张

使用自定义css更改 WordPress 徽标大小

这种更改 WordPress 徽标大小的方法需要更多的工作,但它也为您提供了更多的控制权。理想情况下,仅当您的主题没有任何选项可以在定制器设置中直接更改徽标大小时,才应考虑使用它。

我们将在这里使用 WordPress 二十一二十一主题作为示例,但相同的步骤适用于您拥有的任何主题。

第一步是找出主题使用哪个 CSS 选择器来定位您网站上的徽标。为此,只需访问您网站上的任何页面,然后右键单击徽标。单击上下文菜单中的检查。

更改WordPress的LOGO大小  第4张

这应该会在浏览器中打开开发人员工具,您应该会看到类似于下图的代码。找到指定徽标宽度和高度的 CSS 选择器。找到没有这些属性被划掉的选择器很重要——当属性被划掉时,这意味着它们被列表中更靠前的另一个选择器覆盖。

在我们的例子中,突出显示的选择器将完美地工作。

更改WordPress的LOGO大小  第5张尝试使用这些值来确定适合您网站的徽标大小。这里有两件事你应该记住。

一,最好避免同时为徽标设置width和height值。这可能会导致徽标被强力拉伸,从而破坏其设计。

第二,仅仅设置一个width或height值可能并不总是改变标志的大小。max-width这通常是因为由于和max-height属性,这些值可能被限制在某个最大大小。例如,如果值为300px ,则将 logo 设置width为 600px 将不起作用。在这种情况下,max-width您将需要对两者进行更改max-width。max-height下图显示了我们的价值观。

更改WordPress的LOGO大小  第6张现在是我们更改徽标大小的部分。通过导航到外观 > 自定义,转到 WordPress 管理仪表板中的主题定制器。

更改WordPress的LOGO大小  第7张您应该会看到一个名为Additional CSS的菜单项。点击它。

更改WordPress的LOGO大小  第8张现在将您之前更改的选择器和 CSS 属性粘贴到此框中,然后点击发布按钮。

更改WordPress的LOGO大小  第9张这应该会更新网站上徽标的大小。

更改WordPress的LOGO大小  第10张

最后的想法

在本教程中,我们学习了两种在 WordPress 中更改徽标大小的不同方法。第一种方法更易于使用,如果您的主题支持该功能,则应该首选。主题开发人员很有可能包含一些内置检查,以确保徽标大小的任何极端变化都不会影响布局。


文章目录
  • 在我们开始之前
  • 使用内置设置更改 WordPress 徽标大小
  • 使用自定义css更改 WordPress 徽标大小
  • 最后的想法