如何在 WordPress 中显示全尺寸图像(4 种简单方法)

03/09/2023

您是否想在 WordPress 中显示全尺寸图像?

自 5.3 版本以来,WordPress 自动缩小大图像以提高网站性能。但是,有时您可能需要以全尺寸展示高质量图像。

在本教程中,我们将向您展示如何在 WordPress 网站上显示全尺寸图像。

何时应在 WordPress 中显示全尺寸图像?

如果您经营摄影或平面设计商店,可能需要在 WordPress 中显示全尺寸图像。如果您销售数字下载作品,您可能希望展示大图像,以向潜在客户展示其真实质量。

即使您经营 WooCommerce 实体产品商店,您可能仍需要显示一些全尺寸图像。您可以使用产品缩略图,用户可以点击它以查看图像的原始尺寸并对项目细节进行放大。

然而,大图像可能会导致很多问题。它们可能会减慢您网站的速度,从而负面影响其搜索引擎优化(SEO)。

由于这个原因,WordPress 现在会在您上传时自动调整大图像的大小。如果图像高度和/或宽度超过 2560 像素,WordPress 将按比例缩小图像,以保持原始图像尺寸。

大多数 WordPress 主机提供商还限制了您可以上传到媒体库的文件大小。如果您有很多大图像需要显示,这可能是一个障碍。

如果要更改大小限制,可以参考我们的 如何增加 WordPress 中的最大文件上传大小 指南。

现在,让我们看看如何在您的 WordPress 网站上显示全尺寸图像。我们有 4 种方法可以实现此目的。有些方法更适合单个图像,而其他方法更适合多个图像。只需使用以下链接直接跳到您喜欢的方法:

  • 方法 1: 使用全尺寸图像 URL(适用于单个图像)
  • 方法 2: 禁用 WordPress 中的图像缩放(推荐用于多个文件)
  • 方法 3: 使用插件禁用图像缩放(适合初学者)
  • 方法 4: 在 Lightbox 中打开全宽度 WordPress 图像(适用于画廊)

方法 1: 使用全尺寸图像 URL(适用于单个图像)

如果您只想在网站上显示一两个大图像,则可以使用原始图像 URL 简单地添加它们。

当您上传超过最大尺寸的图像时,WordPress 会缩小该图像以创建较小版本。但是,原始的大图像仍然保持完整。

首先,转到 WordPress 仪表板的 媒体 » 。确保将视图更改为 列表 视图。

然后,将鼠标悬停在您的大图像上。寻找文件名以 -scaled 结尾的图像。

复制 URL 按钮出现时,点击它。

完成此操作后,您可以将图像 URL 粘贴到浏览器的地址栏中,并从图像 URL 的末尾删除 -scaled。小心不要移除图像格式(如:.png、.jpg、.gif 等)。

例如,如果缩小的图像 URL 是 http://example-website.local/wp-content/uploads/2024/03/example-image-scaled.jpg,则您原始的图像 URL 是 http://example-website.local/wp-content/uploads/2024/03/example-image.jpg

当您访问该 URL 时,您将看到图像的原始尺寸。

现在,您可以将图像添加到网站上的任何位置。由于我们使用链接添加图像,您需要嵌入它,而不是从媒体库中选择它。

为此,打开要使用图像的帖子或页面的 Gutenberg 块编辑器。然后点击 + 添加块 图标以添加一个新块。在这里,您可以选择图像块。

完成此操作后,点击 从 URL 插入

然后,您可以简单地将全尺寸图像 URL 粘贴到字段中,并按下键盘上的 Enter 键。

准备上线时,只需点击 发布更新。现在,您可以访问此页面或帖子,查看全尺寸图像的效果。

要添加更多全尺寸图像,只需重复上述相同的过程。

方法 2: 禁用 WordPress 中的图像缩放(推荐用于多个文件)

如果要显示多个大图像,最好禁用图像缩放功能。

一种方法是将代码添加到主题的 functions.php 文件。如果这是您第一次向 WordPress 插入代码,则可以参考我们的 如何在 WordPress 中添加自定义代码 指南。

尽管如此,如果您希望整个过程更安全,我们建议使用 WPCode。它是最适合初学者的代码片段插件,通过它添加代码不会意外破坏您的主题文件。

此外,如果您更新您的 WordPress 主题,代码不会被覆盖,它将保持在 WPCode 中完整。

注意:对于这种方法,WPCode 的免费版本已经足够,但如果您想使用测试模式功能,可以选择获取高级计划。测试模式功能允许您在不对网站进行永久更改的情况下查看代码的工作方式。

首先,您需要在管理员面板中安装并激活 WordPress 插件。完成后,转到 Code Snippets » Add Snippet

在此,选择 Add Your Custom Code (New Snippet) 并点击 使用片段 按钮。

现在,为自定义代码片段输入一个标题。这可以是任何帮助您在 WordPress 仪表板中识别片段的内容。

之后,打开 Code Type 下拉菜单并选择 PHP Snippet

在代码编辑器中,添加以下代码片段:

add_filter( 'big_image_size_threshold', '__return_false' );

完成后,向下滚动到 Insertion 部分。WPCode 可以将您的代码添加到不同的位置,例如每篇文章之后、仅前端或仅管理员。要在整个 WordPress 博客或网站中使用自定义 PHP 片段,请点击 自动插入(如果尚未选择)。然后,打开 位置 下拉菜单并选择 运行在任何地方

之后,您就可以滚动到屏幕顶部,点击 非活动 切换按钮将其更改为 活动。最后,点击 保存片段 使 PHP 片段生效。

现在,如果您上传大图像,WordPress 将使用原始尺寸,而不是调整图像大小。这样,您将始终可以访问全尺寸图像。

方法 3:使用插件禁用图像缩放(适合初学者)

如果您觉得代码方法过于令人畏惧,您可以使用 Perfect Images 插件来禁用图像缩放。这个免费插件允许您在 WordPress 中创建额外的图像尺寸,更新媒体元数据等。

首先,您需要安装并激活 Perfect Images 插件。有关安装插件的更多详细信息,请参阅我们的分步指南 如何安装 WordPress 插件

激活后,前往 Meow Apps » Perfect Images 并勾选 Image Threshold 旁边的禁用框。

从现在开始,WordPress 将不再向任何图像添加 -scaled 属性,这样您可以上传大媒体文件,WordPress 将默认显示它们的全尺寸。

方法 4: 在 Lightbox 中打开全宽度 WordPress 图像(适用于图像画廊)

最后一个选项是在您的网站上添加一个全尺寸图像 lightbox,这对于创建图像画廊、幻灯片或照片作品集非常适用。

这种方法允许您在页面首次加载时显示较小的缩略图图像。访问者可以点击任何缩略图以在弹出窗口中查看全尺寸图像。

请注意,您需要使用上述方法之一预先禁用图像缩放。如果不这样做,您的 lightbox 将显示缩小版的大图像。

禁用图像缩放后,是时候创建一个画廊了。我们推荐使用 Envira Gallery,因为它是市场上最好的 WordPress 图像画廊插件。

安装并激活 Envira 后,您可以按照我们的分步教程 如何在 WordPress 中添加带有 lightbox 效果的画廊

想要使用其他画廊插件?查看 NextGEN Gallery。在我们的测试中,我们发现这个插件对专业摄影师或艺术家来说是最好的,因为它提供了大量功能,可以专业地展示和销售您的图像。

额外提示:优化图像以提高速度和 SEO

在 WordPress 中显示全尺寸图像对于向您的网站访客提供清晰的视觉视图非常有用。然而,这些图像也可能会减慢网站加载速度,进而影响您的 SEO。

因此,我们建议您优化图像以提升 WordPress 网站的性能。

例如,您可以压缩图像的大小使其更小且加载更快。EWWW Image Optimizer 是一个很好的选择,因为它支持多种格式,如 PNG、JPEG、WebP、SVG 和 PDF。

另一种优化图像的方法是阻止 WordPress 自动生成默认的 WordPress 图像尺寸。

当您上传图像到 WordPress 时,它会创建多个不同尺寸的副本。这在需要以缩略图或原始文件的中等大小显示图像时非常有用。

尽管如此,如果您不使用这些尺寸,它们会占用大量存储空间,因此我们建议在需要时删除它们。

有关更多图像优化技巧和窍门,请查看这些指南:

希望本文能帮助您了解如何在 WordPress 中显示全尺寸图像。您还可以查阅我们关于最佳拖放页面构建器插件和如何在 WordPress 中创建自定义 Instagram 照片流的指南。



Related Posts

  • 2024-08-04
  • WordPress 教学

不喜欢 WordPress 4.3 引入的格式化快捷键?觉得有点烦人?最近,有用户问我们如何在 WordPress 中禁用视觉编辑器格式化快捷键。在本文中,我们将向您展示如何做到这一点。

閱讀更多
  • 2024-07-31
  • WordPress 教学

你在 WordPress 网站上看到 503 服务不可用错误吗?503 错误是因为服务器无法处理请求,通常是由于服务器过载或维护。而这个错误不会告诉你具体原因,这对于初学者来说非常令人沮丧。本文将向你展示如何修复 WordPress 中的 503 服务不可用错误。

閱讀更多
  • 2024-07-30
  • WordPress 教学

管理一个企业需要大量的工作。如果您无法正确维护您的 WordPress 网站,可能会迅速看到流量和销售额下降的现象。幸运的是,您可以聘请虚拟助手 (VA) 来帮助管理您的网站。本文将教您如何聘请 WordPress 虚拟助手,以便您可以专注于业务中最重要的活动。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>