您是否注意到某些网站在浏览器选项卡中其名称旁边有一个小图标? 这些称为网站图标,它们是为您的网站添加品牌和个性的好方法。 如果您使用 WordPress,添加网站图标相对容易。
网站图标是代表您网站的小图标。 它通常显示在浏览器的地址栏中、书签列表中网站名称的旁边,也可以由网络浏览器在选项卡上使用。
WordPress 允许您轻松地将网站图标上传到您的网站。 本教程将向您展示如何添加 WordPress 图标。
目录
如何添加 WordPress 网站图标?
第 1 步:创建您的网站图标图像
您需要做的第一件事是创建您的网站图标图像。
这应该是 16x16px 或 32x32px PNG、GIF 或 ICO 文件。
您可以在您喜欢的图像编辑器中创建此文件。 为了获得最佳效果,请创建一个具有纯色背景的简单图像,其中包含您网站的徽标或缩写。 创建图像后,将其保存在计算机上的文件夹中,稍后您可以在其中找到它。
第 2 步:将图像上传到 WordPress
接下来,您需要将您的网站图标图像上传到 WordPress。
为此,请登录 WordPress 仪表板并转到“设置”>“媒体”页面。
在此页面上,您将看到“上传文件”选项。 在“上传文件”下,选择“将我的上传整理到基于月份和年份的文件夹”选项,然后单击页面底部的“保存更改”按钮。
现在这一切都已经解决了,请转到“媒体”>“添加新内容”页面,然后从计算机上传您的网站图标图像。 上传图像后,从“文件 URL”字段复制其 URL 并将其粘贴到安全的地方以供以后使用。 您将在第 4 步中需要此 URL。
第 3 步:将 Favicon 代码添加到 Header.php 文件中
现在您的图像已上传到 WordPress,您需要编辑主题的 header.php 文件以告诉 WordPress 在哪里可以找到它。 为此,请从 WordPress 仪表板转到外观 > 编辑器。
在“编辑主题”页面上,从右侧模板列表中选择 header.php 文件,然后单击它以在编辑器中打开它。
打开 header.php 后,查找标签靠近文件顶部。
如果那里还没有,请将其添加到开口下方像这样的标签: 。 现在,直接在标签,添加以下代码:
请务必将“Paste_URL_Here”替换为您在第 2 步中复制的网站图标图像的实际 URL! 添加此代码并将“Paste_URL_Here”替换为您的 URL 后,单击页面底部的“更新文件”按钮以保存更改。
此时,如果您在浏览器中预览您的网站(通过访问 www[YourSiteName].com),您应该会在网站名称旁边看到新的图标!
不过,如果您还没有看到它,请不要担心; 有时,浏览器会缓存页面,并且在您清除缓存或在私密浏览窗口中访问您的网站之前不会显示更新的网站图标。
您可以使用两种方法将网站图标添加到 WordPress 网站。
第一种方法是使用插件,第二种方法是编辑主题的代码。
1) 如果您使用插件,我们建议使用 RealFaviconGenerator 插件的 Favicon。
该插件将允许您轻松上传您的网站图标并根据需要进行编辑。 它还确保您的网站图标在所有浏览器和设备上正确显示。
要使用该插件,首先安装并激活该插件。 然后,在 WordPress 管理区域中转至设置 > RealFaviconGenerator 的 Favicon。 从这里,您可以上传您的网站图标或将其粘贴到您的网站图标所在的 URL 中。
然后该插件将自动生成不同设备和浏览器所需的不同尺寸。 最后,点击“Generate Favicon”按钮并下载生成的包。 下载后,解压包并通过 FTP 将内容上传到 WordPress 网站的根目录。
2) 如果您不想使用插件,您还可以通过编辑主题代码来添加图标。 为此,首先为您的网站图标创建一个 16x16px PNG 或 ICO 文件。 然后,通过 FTP 将其上传到 WordPress 网站的根目录。 最后,编辑主题的 header.php 文件并将以下代码粘贴到其中: /favicon.ico”>
保存更改并将 header.php 文件上传回您的服务器。 就是这样! 当您访问您的网站时,您的网站图标现在应该出现在网络浏览器的选项卡中。
结论
这就是在 WordPress 中添加图标的全部内容! 正如我们之前提到的,随着越来越多的人在浏览互联网时使用多个选项卡,网站图标变得越来越重要,因此绝对值得花几分钟向您自己的网站添加一个网站图标。
如果您对此过程有任何疑问或在此过程中遇到任何问题,请在下面的评论中告诉我们!
也可以参考: