spot_img
HomeWordPress教程如何使用 WordPress 自定义 HTML 块

如何使用 WordPress 自定义 HTML 块

spot_img

自定义 HTML 块可让您添加 HTML 内容并对其进行编辑,而无需查看页面或以 HTML 形式发布。 您可以嵌入 HTML,甚至可以使用它来标记您的文本,然后根据需要将其转换为带有样式文本的段落块。 这个块非常适合那些喜欢在 HTML 中工作的人,它是嵌入某些类型代码(例如 Google 地图)的最佳方式之一。

在本文中,我们将仔细研究自定义 HTML 块。 我们将了解如何将其添加到您的帖子和页面、查看其设置和选项、查看有关如何使用它的提示以及常见问题解答。

订阅我们的 YouTube 频道

如何将自定义 HTML 块添加到您的帖子或页面

如何将自定义 HTML 块添加到您的帖子或页面

WordPress divi主题

要将自定义 HTML 块添加到您的内容,请将光标放在您希望块出现的位置,然后选择插入器工具。 将打开一个搜索框,您可以在其中输入搜索词或滚动选项。 搜索 html 并在结果中显示该块时选择该块。

如何将自定义 HTML 块添加到您的帖子或页面

或者,您可以键入 /html 您希望块出现的位置并按 Enter 键或从块区域上方的选项中选择它。

如何将自定义 HTML 块添加到您的帖子或页面

现在,您的内容中有一个自定义 HTML 块,您可以在其中添加 HTML。 当我们完成设置时,我们将看到一些带有代码的示例。

自定义 HTML 块设置和选项

自定义 HTML 块设置和选项

与大多数块不同,自定义 HTML 块不包括编辑器侧栏中的选项。 您将在工具栏中找到所需的所有选项。

自定义 HTML 块工具栏

自定义 HTML 块工具栏

单击块内的任意位置以查看其工具。 如果您没有看到它们,请在新区域中的块下方单击,然后再次选择块时将显示其余工具。

每个块都有自己的特定控件,您可以在其中选择块的选项。 工具栏上方的一小组块选项允许您更改块类型、转换为块以及打开选项。

WordPress建站服务

让我们详细看看每个设置。

自定义 HTML 更改块或样式

自定义 HTML 更改块或样式

在选项中选择 HTML 会打开一个下拉框,您可以在其中将块转换为其他类型的块。 选项包括代码、列或组。

代码 – 将自定义 HTML 块转换为代码块,以便您可以显示不同类型的代码。

– 将块放置在列中。

H10的年终大促

团体 – 将块添加到组中,以便您可以将它们作为单个块进行调整。

自定义 HTML 块拖动工具

自定义 HTML 块拖动工具

拖动工具包括六个点,您可以用鼠标抓住它们来移动它。

自定义 HTML 块拖动工具

然后,只需将块拖动到内容中您想要的任何位置并将其放下。 将出现一条蓝线,指示在您四处拖动块时将放置块的位置。

自定义 HTML 块拖动工具

一旦您看到蓝线出现在您想要块的位置,松开鼠标按钮,您的块将被放置在新位置。

自定义 HTML 块移动

自定义 HTML 块移动

每次单击时,向上和向下箭头都会将块移动到一个内容部分。 当块自动移动到新位置时,屏幕将滚动。 这是将块移动一两个部分的简单方法。

自定义 HTML 块 HTML 和预览

自定义 HTML 块 HTML 和预览

高质量外链购买

HTML 和预览按钮让您可以选择块如何在编辑器中与 HTML 配合使用。 默认情况下选择 HTML 按钮。 这以代码形式显示 HTML,而不是执行它。 此示例显示了 Google 地图的 HTML。

自定义 HTML 块 HTML 和预览

选择预览显示 HTML 在浏览器中执行时在前端的外观。 在视图之间来回切换以编辑 HTML 并查看最终用户的外观很容易。 这是进行编辑和快速查看结果的绝佳方式。 此示例显示了嵌入的 Google 地图,因为它会出现在内容中。

自定义 HTML 块 HTML 和预览

再举一个例子,这里有一些 HTML 来为一行文本添加样式。 这是 HTML 视图,我可以在其中创建和编辑 HTML。

writesonic

自定义 HTML 块 HTML 和预览

这是预览模式,显示了它在前端的外观。

自定义 HTML 块选项

自定义 HTML 块选项

工具栏的最右侧是垂直堆叠的三个点。 这三个点在三个分区中打开一组 10 个选项,允许您隐藏设置、转换为块、复制、复制、前后插入、移动到、添加到可重用块、分组或删除块。

以下是自定义 HTML 块选项可以执行的操作:

隐藏更多设置 – 这会隐藏右侧边栏,扩展您的工作区。

转换为块 – 这会将内容转换为其他适当的块。 文本将被转换为段落块,图像将被转换为图像块等。嵌入代码,例如我在示例中使用的 Google 地图代码,将保留为自定义 HTML 块。 如果块中的其他 HTML 可以转换,则它将从块中删除,放置在不同的块中。

复制 – 这会将块复制到剪贴板,以便您可以将其粘贴到编辑器中的任何位置。

复制 – 这会将块的副本放置在原始块下方。

插入前 – 这会在自定义 HTML 块之前添加一个块区域,以便您可以放置​​另一个块。

WordPress花园粉丝福利

想做跨境电商独立站但是没什么钱?可以免费试用Shopline智能建站工具,一个月都不要一顿火锅的钱!(这里就可以在线申请!) 或者扫描下方二维码
shopline

插入后 – 这会在块之后添加一个区域,您可以在其中放置另一个块。

搬去 – 这让您可以使用箭头键向上或向下移动块。 您将移动一条蓝线。 当它到达你想要的位置时,按回车键,方块会立即移动。

添加到可重用块 – 将自定义 HTML 块添加到您的可重用块中,以便您可以在任何页面或帖子上再次使用它。

团体 – 这会将块添加到组中,以便您可以将块作为一个单元进行调整。

删除块 – 这将删除块。

有效使用自定义 HTML 块的提示和最佳实践

首先使用此块设置文本样式并编辑 HTML,然后使用转换为块工具创建段落或其他类型的内容。 这使您可以更好地控制内容,并且在您不需要保留 HTML 版本时尤其有用。 您可以随时查看预览。 这使您不必在侧边栏中的 WordPress 设置中的可视化编辑器和代码编辑器之间进行更改。

将此块用于嵌入的地图、广告、视频等。这样您就不必切换到代码编辑器视图并将代码添加到其他类型的块中,例如段落块。

使用此块而不是页面和帖子的代码编辑器版本可以让您不必使用页面和帖子标签。 这创造了一个更清洁、更易于使用的工作环境。

无论您是添加自己的 HTML 还是嵌入来自其他来源的代码,请经常使用预览功能来确保您的 HTML 以您想要的方式执行。

不要在块中使用脚本标签。 它可能会被删除,然后您的代码将无法工作。

关于自定义 HTML 块的常见问题

自定义 HTML 块有什么作用?

它允许您将 HTML 输入到一个字段中,这样您就可以在使用它的同时将页面或帖子保留在可视化编辑器中。

如何使用自定义 HTML 块?

可以添加任何带有受支持标签的 HTML。 您可以将块用于广告、地图、视频、任何带有 iframe、表格等的内容。这也是一种标记文本然后将其转换为段落块的简单方法。

它会对标记进行颜色编码吗?

不,块中的标记看起来像任何文本编辑器。

自定义 HTML 块是否运行 HTML?

它在前端正常运行 HTML。 在编辑器中,它可以运行 HTML 或向您显示代码。 由您决定查看哪个,您可以随时单击按钮在两个选项之间进行选择。

是否支持所有 HTML 标签?

否。您可以在 WordPress 支持的代码页面上看到支持的 HTML 标签列表。

结论

这就是我们对自定义 HTML 块的看法。 此块不仅适用于开发人员。 使用此块的主要优点是您无需在可视化编辑器和代码编辑器之间切换即可使用 HTML。 这意味着您可以正常显示其余内容。 然后您可以在块中使用 HTML 并随时预览它。 自定义 HTML 块提供了一种在块编辑器中使用 HTML 的简单方法。

我们希望听到您的意见。 您使用自定义 HTML 块吗? 请在评论中告诉我们您的体验。

精选图片来自 enterlinedesign/shutterstock.com

siteground guangda
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES