使用技巧

如何在WordPress博客文章中轻松嵌入要点

Gist是GitHub的一项服务,可让您轻松地在Internet上共享代码示例和注释。 如果要使用Gist在WordPress网站上共享代码,可以通过以下方法轻松将Gist嵌入博客文章中。

如何在WordPress中嵌入要点

我确实在MetaBlogue上共享了很多代码,主要是因为有关自定义WordPress主题和插件的小技巧。 在Gist上创建代码示例并在WordPress上共享总是很容易的。

它不仅看起来干净,并为您的读者提供方便的界面,还可以提供语言语法支持。 唯一的问题是WordPress不提供Gist的直接嵌入选项,因此您需要在帖子上手动添加Gist。

在WordPress博客文章中嵌入Gist

您可以通过多种方式将Gist嵌入WordPress博客文章中,我们将在本文中介绍所有这些选项。

我在此博客上使用GeneratePress WordPress主题,该主题提供了惊人的自定义选项。 因此,我更喜欢没有Gist支持的插件解决方案,并且在这里不使用任何WordPress插件。 尽管我将讨论一些WordPress插件,但是如果您愿意这样做的话。

首先,让我们了解将Gist嵌入WordPress博客帖子中所需要的内容。

Gist提供了一个嵌入代码,您可以从Gist页面获取该代码。 我们需要将该代码复制并放置在我们要显示Gist的页面上。

要点从要点页面嵌入脚本代码

古腾堡街区

尽管WordPress上没有官方对Gist的支持,但是您仍然可以借助Gutenberg Blocks轻松地将Gist添加到WordPress帖子中。 古腾堡(Gutenberg)编辑器附带一个名为–自定义HTML的块。

只需添加自定义HTML块,然后将嵌入代码粘贴到该块中即可。 就是这样,您将把Gist添加到WordPress帖子中。

嵌入Gist与自定义HTML块

您甚至可以使用“预览”模式在WordPress Gutenberg编辑屏幕中查看Gist。

预览Gist嵌入Gutenberg编辑器

如果您使用的是Gutenberg Editor,那么仅需在博客文章中添加Gist。 此方法适用于所有未在其博客上使用AMP页的博客。

AMP页面剥去了页面上的所有直接脚本标记,这意味着使用此方法添加的Gist在AMP页面上将不可见。 如果您在博客上使用AMP页面,则可能要使用添加Gist的下一种方法。

要点简码

正如我之前提到的,我喜欢本机解决方案,而不是为每个小工作都安装插件。 因此,我创建了一个WordPress短代码,该代码应适用于大多数WordPress网站。

如果您要发布AMP页面,并希望它们支持Gist摘录,我们可以使用简单的短代码轻松地做到这一点。 简码应标识该页面是否为AMP,并为Gist放置AMP兼容标签。

我正在使用AMP WordPress插件在MetaBlogue上生成AMP页面。 如果在页面上标识Gist标签,它将自动添加Gist脚本。 因此,我只需要添加AMP页面的标签。 如果您使用任何其他AMP插件,请检查该插件的Gist支持。

您可以以多种格式使用此短代码,以在页面上包含要点。 它可以根据您提供的参数显示完整的Gist或Gist中的特定文件。

[gist]摘要代码段ID[/gist]
[gist id=“Gist-snippet-ID” file=“Gist-file-name” /]
[gist id=“Gist-snippet-ID” /]

您可以使用上述任何一种格式,它将自动将其转换成嵌入常规页面和AMP页面的Gist。 该代码检查它是否是AMP页,并相应地输出标签,以便它可以在您的网站上正常工作。

您可以将代码添加到function.php中,该短代码将在您的站点上可用。 只需使用Shortcode块将要点添加到您的页面即可。

根据您在网站上使用的AMP插件,可能需要对代码进行少量修改。 您需要根据插件中提供的功能修改行以正确识别AMP页面。

JetPack WordPress插件

如果您在博客上使用JetPack WordPress插件,则不需要任何东西。 该插件附带Gist Embeds支持。 您可以从Jetpack→设置→写入启用短代码嵌入模块。

JetPack简码嵌入模块

启用“短代码嵌入”模块后,您可以使用要点URL或简码将要点摘要嵌入到页面中。 这是有关 支持的短码格式

最简单的方法是将Gist URL直接粘贴到页面上。 只需确保将其写为文本而不是链接即可,其余的将由JetPack完成。 它还支持AMP页面,因此也可以在AMP页面上正确显示要点。

我个人更喜欢使用短代码格式,就像您以后要删除JetPack插件一样,您可以轻松地从博客文章中删除短代码。 我将使用下面的格式作为上面的Shortcode和Jetpack之间的通用格式,这意味着我可以轻松地在支持之间进行调整,而无需编辑帖子。

[gist]摘要代码段ID[/gist]

WordPress存储库中还有其他一些可用的插件。 它们没有长时间更新,但仍可与经典编辑器一起使用。

提供给Gutenberg编辑器和AMP页面的支持的很少,所以我建议在安装任何其他插件之前检查支持。

完全披露:该帖子可能包含会员链接,这意味着,如果您单击其中一个链接并购买商品,我们可能会收取佣金(不收取任何额外费用)。 我们仅超链接我们认为可以增加受众价值的产品。 财务补偿对于这些产品不起作用。