如何在WordPress博客文章中輕鬆嵌入要點

[ad_1]

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頁面的支持的很少,所以我建議在安裝任何其他插件之前檢查支持。

完全披露:該帖子可能包含會員鏈接,這意味著,如果您單擊其中一個鏈接併購買商品,我們可能會收取傭金(不收取任何額外費用)。 我們僅超鏈接我們認為可以增加受眾價值的產品。 財務補償對於這些產品不起作用。

相關文章