改变WordPress标志的大小的教程

398 阅读5分钟

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

我们之前的一个快速提示涵盖了我们如何改变WordPress网站的标志。我们这次的目标是改变标志的大小。

在我们开始之前

标志为人们提供了一个简单的方法来为你的网站添加品牌标识。因此,几乎所有的主题都有一个选项,可以使用WordPress管理仪表板上的自定义器来改变标志。然而,改变标志的大小就不一样了。这基本上意味着,你可能需要做更多的工作来完成它。

有很多方法可以改变WordPress网站的标志尺寸,但我们只限于两种方法,它们对初学者友好,不需要你对网站代码做很多修补。

让我们从最简单的开始

用内置设置改变WordPress标志的大小

一些高级主题开发商会提供一个开箱即用的解决方案来改变你的WordPress网站上的标志大小。我们将学习如何使用ThemeForest上的一个叫Eduma的教育主题来做到这一点。

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

现在我们环顾四周,看看有哪些可用的菜单选项,并找出其中有哪些是我们需要的标志设置。一般菜单似乎是一个很好的选择,所以我们点击它。

Eduma Theme Customizer 在屏幕上出现的下一个菜单项目列表中点击标志 。然后,你应该看到一些选项来改变标志以及它的大小。这个特定的主题允许我们配置一些东西,比如为常规和粘性版本的标志提供不同的图像。

Logo Setting in Customizer for a Premium Theme

如果你在设置中向下滚动一下,你也应该看到像标志宽度标志高度这样的东西。在我们的案例中,我们将Logo Width的值设置为60%。你所做的任何改变都会立即反映在网站预览中,所以你可以撤销任何你不喜欢的改变。

Eduma Theme Customizer Logo Options

用自定义CSS改变WordPress标志的大小

这种改变WordPress标志尺寸的方法需要多做一点工作,但它也给你更多的控制权。理想情况下,只有在你的主题没有任何选项可以直接在自定义设置中改变标志大小时,你才应该考虑使用它。

我们在这里将使用WordPress Twenty Twenty-One主题作为例子,但同样的步骤将适用于你的每一个主题。

这里的第一步是找出主题所使用的CSS选择器,以针对你网站上的标志。要做到这一点,只需访问你网站上的任何一个页面,然后右键点击标志。点击上下文菜单中的 "检查"。

Inspect Element in Browser

这将打开浏览器中的开发工具,你应该看到类似下图的代码。找到指定标志宽度和高度的CSS选择器。重要的是要找到这些属性都没有被划掉的选择器--当这些属性被划掉时,这意味着它们被另一个选择器所覆盖。

在我们的例子中,高亮显示的选择器将完美工作。

Highlighted Logo Selector

试着玩一玩这些值,找出适合你网站的标志尺寸。在这里,你应该记住两件事:

第一,最好避免同时为标志设置widthheight 值。这可能会导致标志被强行拉伸,破坏其设计。

第二,仅仅设置一个widthheight 的值不一定能改变标志的大小。这通常是因为这些值可能由于max-widthmax-height 属性而被限制在某个最大尺寸。例如,如果max-width 的值是300px,那么将标志width 设置为600px就不会起作用。在这种情况下,你将需要对max-widthmax-height 进行修改。下面的图片显示了我们的数值。

Updated CSS Property Values

现在是我们修改标志尺寸的部分。在WordPress的管理面板上进入主题定制器,导航到外观>自定义。

Customizer Navigation WordPress Dashboard

你应该看到一个菜单项,叫做附加CSS。点击它。

Additional CSS Menu Option in Customizer

现在把你之前改变的选择器和CSS属性粘贴到这个盒子里,然后点击发布按钮。

Additional CSS Input Box

这应该会更新网站上标志的大小。

Updated Logo Size in WordPress

最后的思考

在本教程中,我们学习了两种不同的方法来改变WordPress中的标志尺寸。第一种方法更容易使用,如果你的主题支持这种功能,应该优先考虑。有一个很好的机会,主题开发者包括一些内置的检查,以确保任何对标志尺寸的极端变化不会影响布局。

第二种方法有点复杂,但只要你仔细选择选择器,它几乎总是能保证工作。确保你在不同的设备上测试最终的布局,以确认不同元素的位置没有意外的转变。

  • [