使用 WordPress 图像块:如何在 WordPress 中添加图像 [+秘密提示]

使用 WordPress 图像块:如何在 WordPress 中添加图像 [+秘密提示]

对于许多用户来说,处理图像确实令人沮丧。选择正确的宽高比或正确调整图像大小以在整个布局中看起来不错并不总是那么容易。

  1. 为什么要使用 WordPress 图像块
  2. 如何使用 WordPress 图像块添加图像
  3. 附加格式化图像过程
  4. 我们在文章中提供的额外提示

较旧的 WordPress 版本(直到 v5.0)使用“+添加媒体”按钮添加图像。问题是,即使对图像大小进行了最小的更改,您也需要重新上传。这意味着浪费时间和多余的点击。

新的基于块的编辑器 Gutenberg 改变了将图像添加到 WordPress 中的方式,使最终用户的此过程更加简单。在本文中,我们将向您展示有关添加和编辑 WordPress 图像块的实用指南。此外,我们将解释另一种粘贴图像的选项 - 如何只需单击几下即可将图像复制并粘贴到内容区域。我们还将向您介绍 WP 5.3 中新增的功能。

但首先我们来谈谈为什么应该在帖子和页面中使用图像。

为什么 WordPress 图片块是您网站的必备品

吸引眼球

图像吸引网站访问者的注意力。它们必须很有趣,才能让访问者在您的网站上停留更长时间。想象一下没有图片的博客文章。这只是一堆文字。乍一看,它并不是很有趣,尽管它可能很有价值并且充满信息。此外,照片可以帮助更好地想象和描述您的主题。

因此,我们需要使用 WordPress 图像块来将注意力集中在重要的事情上。

2 个带有或不带有图像的博客的示例
2 个带有或不带有图像的博客的示例

说明性文本和上下文

图像也是理解内容的重要组成部分,因为它们可以让访问者更好地理解文章的内容。借助信息图表,您可以解释复杂的联系并以简单的方式讲述事物。它可以帮助访问者更好地了解您所谈论的问题。

信息图示例
信息图提供更好的文字解释

让网站变得更好

此外,图像很好地为整个网站设计做了最后的润色。这不仅与网站布局有关,还与可用性有关。正确选择和放置图像可以帮助访问者更轻松地浏览您的网站。

如何在 WordPress 块编辑器中添加图像

要将图像插入到帖子或页面中,您需要添加核心块 - 图像块。有几种方法可以做到这一点:

– 在顶栏或编辑器中的任何位置使用“+”

单击“+”添加图像块
单击“+”添加 WordPress 图像块

– 使用斜杠“/”并在后面写入单词“image”

使用斜杠添加图像块
使用斜杠“/”添加图像块

将创建新块,您可以在其中添加实际图像。

将图像上传到 WordPress

如何将图像放置在您想要的位置?

  • 使用上传,然后从硬盘中选择图像
  • 使用媒体库,您可以在其中选择已上传到您网站的图像
  • 使用鼠标并拖放图像
  • 插入图片URL地址
上传图像的选项
上传图像的可用选项 - 其中之一是从文件夹中拖放图像

添加 WordPress 图片的鲜为人知的方法

除了前面提到的通过上传窗口上传图像之外,还有另一种插入图像的方法(而且这种方法非常快捷!)。借助改进的 WordPress 编辑器,您能够:

  • 从任何内容复制图像,或者
  • 只需用鼠标光标“拖动”图像即可

然后将选定的图像插入或移动(拖放)到内容区域中所需的位置。

将图像从已发布的帖子拖放到内容区域
将选定的图像拖放到您需要的位置(直接到 WordPress 编辑器)

如果您想粘贴从屏幕捕获的图像,也可以使用相同的技术。只需三个简单的步骤。第一的, 你需要截图 使用打印屏幕功能。例如,Windows 10 提供了名为 Snip & Sketch 的默认片段工具,也可以通过快捷方式使用该工具 - 只需同时按键盘上的 Win+Shift+S 键即可。然后选择您要捕获的图像区域。最后一步是使用基本快捷键 Ctrl+V 将复制的图像(或其一部分)粘贴到内容区域中。

您粘贴到编辑器中的 WordPress 图像会发生什么情况?嗯,它会自动添加到媒体库中,您可以在其中编辑该图像。

图像元数据选项有限

在图像编辑中,您可以设置其标题、说明文字、描述和替代文本。不幸的是,您无法更改图像文件名 - 它将保留其自动生成的名称,例如 图片-1.png 等等。由于与文件命名建议冲突,这种类型的文件名在 SEO 优化方面可能有点不利。因此,在将 WordPress 图像移动到内容区域之前,您需要考虑这一方面。

图像对齐

图像对齐是主要功能之一。无论您是否将 WordPress 图像块添加到帖子或页面中,您都应该始终根据网站设计考虑放置位置。基于该图像对齐可以在其上方的工具栏中选择。默认情况下,您可以将图像左对齐、右对齐或居中对齐。一些 WordPress 主题允许图像以宽或全宽居中。这实际上取决于主题功能,因为并非所有主题都支持它。

图像对齐设置
图像对齐选项

调整图像大小

WordPress 编辑器中图像块的革命性功能是实用的大小调整。只需拖动图像的一侧即可使其变小或变大。这样您就可以根据内容中的文本调整图像大小。编辑器会自动保持图像比例,这意味着您不必担心变形。

调整图像大小
通过抓住其手柄来平滑调整图像大小

将图像转换为圆形的新块样式

如果您使用的是最新版本的 WordPress,您可能已经注意到可用于图像的新圆形裁剪样式。通过单击第一个“更改块类型或样式”图标,可以通过顶部工具栏更改图像的形状。默认(矩形)形状将被剪切为圆形。

图像的圆形
适合您图像的新圆形风格设计

WordPress 图片块中的新功能(在 WP 5.3 中添加)

支持高分辨率图像

WP 5.3 的最大亮点之一是改进了 WordPress 平台上的图像处理。处理图像现在有两个主要功能:

  1. 恢复上传 – 如果您正在上传高分辨率照片并且互联网连接失败,上传过程将从中断点自动继续
  2. 自动图像旋转 – 最新发布的 WP 版本可确保错误旋转的图像在上传时自动旋转到正确的位置

检查器中的设置

要配置确切的尺寸,您可以使用编辑器右侧边栏上的检查器。图像尺寸设置提供随时可用的格式,例如缩略图、中尺寸、大尺寸或全尺寸。当然,您可以以像素或百分比为单位设置宽度和高度。

可用的图像尺寸设置
图像尺寸设置

它非常快速且实用,因为您可以在 WordPress 图像块内完成所有图像大小调整更改,并在块编辑器中的一处进行所有操作。

其他图像块设置

如何添加URL地址

图像可以用作静态图像,也可以单击并链接到:

  •   媒体文件
  •   附件页
  •   自定义网址
图片链接设置
可用的图像链接设置

如何在WordPress图像块中编辑图片

单击铅笔图标后可以编辑每个图像。带有媒体库的模态窗口将打开,您可以在其中编写替代文本、标题、说明文字和说明。与您已经习惯在旧版 WordPress 版本中使用经典编辑器执行此操作的方式相同。

用于 SEO 目的的图像详细信息
您应该填写的图像详细信息以改善您的网站 SEO

为什么填写这些文本很重要?

如果访问者单击图像以查看更大的图像,他们会看到图像标题(例如 Citadela 主页)而不是图像文件名。此外,如果加载图像时出现任何问题,您的网站上将显示替代文本。

额外提示

除了 WordPress 图片块的所有这些原因和设置之外,还有最重要的一点。您可以使用图像吸引更多访问者访问您的网站。那么如何获得它们呢?

现在的人都懒得读书了。他们更喜欢向下滚动图片来寻找答案。你的照片和图片怎么能排名?文字就是答案。对于 SEO 优化来说非常重要的是完美的图片标题和描述。不要忘记填写替代文本。然后谷歌可以更好地理解图像。因此,您将有更高的机会在图像搜索结果中对其进行排名。

添加图像标题的 2 种方法

使用块编辑器添加图像标题非常容易。在图像的正下方有一个可以写文字的空间。这是第一种方式 - 将标题写入给定子页面上的该确切图像。

图片说明
标题直接写在图像下方

第二种方法是使用媒体库中的铅笔图标(编辑图像)编写图像标题。通过这种方式,您可以在整个网站中全局添加图像标题。这意味着如果您在三个不同的地方使用相同的图像,它将始终使用此标题。

在媒体库中添加图像标题
通过媒体库添加的图像标题

您喜欢在 WordPress 图像块中添加图像是多么简单吗?自己尝试一下吧!

了解有关我们全新 Citadela WordPress 主题及其定制布局包的更多信息。它们是专门为不同类型的企业设计和开发的,并且还支持通过 WordPress 块编辑器编辑内容的新方式。

7 对“Working with WordPress Image block: How to add images in WordPress [+Secret tip]”的思考

  1. 事实上,古腾堡编辑器之前/之后并没有真正的变化。所有这些选项都已经到位。事实上,gutenberg 编辑器完全是一场灾难,这就是 elementor、divi 和 Visual Composer 如此受欢迎的原因。我真心希望您的下一个版本将与这些构建器 100% 兼容,因为没有人使用 WordPress 编辑器😀

    1. 你好,

      感谢您的评论。是的,该模板将与根据 WordPress Codex 和标准编写的所有 WordPress 插件兼容。

      干杯!
      兹拉特科

    1. 你好呀,

      谢谢你的询问。我们的每一款产品定期保持最新状态是我们的核心业务。
      如果您对从城市指南升级到与 WordPress 古腾堡编辑器完全兼容的 Citadela 主题的选项感兴趣,答案是:是的,我们打算发布该插件,通过该插件您将能够管理从城市的迁移将主题引导为 Citadela 主题,并使用 Citadela 目录插件扩展(第一个插件应该很快发布)。

      真挚地!
      艾特团队

  2. 我注意到可以将图像直接粘贴到古腾堡编辑器中。这将导致添加到媒体库中的图像称为 image-1、image-2 等......

    我没有在本页上阅读过一项功能,因此也许是一个不错的添加功能。

    当使用 Windows 片段工具 (Win+shift+S) 截取图像时,这特别有用。然后可以将其直接粘贴到文章中光标所在的位置。

    这种方法最大的缺点是我还没有找到在粘贴期间或之后编辑文件名的方法。所以它对 SEO 不太友好。

  3. 你好
    我在将图像添加到“多作者博客”主题时遇到问题。似乎不可能将第二张或第三张图像添加到每篇博客文章顶部的旋转滑块中。这意味着滑块在几秒钟后为空,就好像它在等待第二张图像一样。
    请问可以修复吗?
    或者:一个问题——“多作者博客”对于 Archnetwork 很重要(我们在斯洛伐克有一个合作伙伴),因为我们将其用作 Nature 项目参与者的“报告”平台。您的库中是否有我们可以以相同方式使用的替代主题?
    Blair Urquhart(终身订阅 - IT 部门 Archnetwork)

    1. 你好呀,

      感谢您的来信。首先,如果可以的话,请检查您的主题/插件版本是否为最新版本:我们建议免费使用 AIT Updater 插件 -> https://www.ait-themes.club/wordpress-plugins/ ait-updater/ ,(或如何设置插件的文档:https://www.ait-themes.club/doc/updater-plugin-documentation/
      有关产品激活的说明,您可以在以下位置找到:https://www.ait-themes.club/doc/theme-activation/

      如果您的问题仍然存在,请向我们提供一些图像,或者请通过支持论坛与我们联系并提供 AIT SysInfo 报告:https://www.ait-themes.club/wordpress-plugins/ait-sysinfo/。我们的技术人员已准备好帮助您解决任何与主题相关的问题:在欧洲中部时间工作日上午 8 点至下午 5 点提供客户支持,因为我无法重现您的问题。革命滑块工作正常。

      第二,
      Citadela产品包中添加了一些有趣的功能,请查看比较表:https://www.ait-themes.club/next- Generation-directorypro/

      如果还有什么我们可以帮助您的,请联系我们。

      亲切的问候!
      兹拉特科
      艾特团队

评论已关闭。