如何創建帖子片段庫以在您的帖子和頁面中使用

許多 WordPress 網站在其帖子和頁面中的某處使用自定義代碼或功能。 該平台可以輕鬆添加此代碼，但如果您要在整個站點中重複使用代碼段，則在需要時手動添加代碼可能會很麻煩。

不必每次需要時都手動插入代碼片段，使用插件組織和保存它們更有意義。 在本文中，我們將討論保持代碼片段井井有條的好處，然後分兩步向您展示如何使用代碼片段擴展插件來做到這一點。 讓我們開始工作吧！

為什麼你應該組織你的代碼片段

即使您不是開發人員，您也可能需要手動向網站添加一些代碼。

許多 WordPress 用戶將自定義代碼片段添加到他們的帖子和頁面中。 無論您的細分市場和規模如何，在很多情況下您都需要向您的網站添加一些代碼。 以 Google Adsense 或 Facebook Pixel 為例，它們都需要您在網站中添加幾行 JavaScript 才能工作。 許多 WordPress 插件還要求您使用短代碼，因此向您的網站添加自定義代碼的機會很高。

鑑於此，找到一種方法來保存您在網站上使用的所有代碼片段是一個很好的主意。 原因如下：

• 您可以在必要時引用您的代碼。 有時，您可能會忘記添加到文件中的自定義代碼行，因此使用庫來組織您的代碼段是值得的。
• 您將能夠更輕鬆地重複使用您的代碼片段。 如果您需要多次使用相同的代碼，最好將其存儲以備後用。

當然，您可以使用計算機上或云中的常規文本文件保存這些代碼片段。 但是，使用正確的 WordPress 插件可以為您提供更合適的方式將它們存儲在您的站點中。 這樣，您就會知道您已將哪些代碼添加到您所使用的每個特定網站。

介紹代碼片段擴展插件

Code Snippets Extended 插件是一個有趣的工具，可讓您在 WordPress 中設置一個簡單的代碼庫。 它允許您保存自定義代碼，使用您想要的任何名稱來識別它，然後只需點擊幾下即可將其添加到您的任何帖子和頁面中。

此外，該插件還可讓您預覽代碼片段的效果，只要它們是簡單的 JavaScript 或 CSS。 它還支持 PHP，但使用該工具的預覽功能通常不會顯示這些片段。

雖然該插件總體上與 Divi Builder 配合得很好，但有一個問題需要解決。 默認情況下，該工具會向編輯器添加一個新按鈕，使您可以將任何庫的片段添加到您的帖子或頁面。 但是，切換到 Divi Builder 時，該按鈕會消失。 不過修復很簡單，我們將在一分鐘內對其進行更多探索。

主要特點：

• 將所有自定義代碼片段保存到儀表板內的集中式庫中。
• 使用唯一名稱標識每個片段。
• 為圖書館中的每個項目分配易於使用的短代碼。
• 使用 WordPress 編輯器上的新選項將片段添加到您的帖子和頁面，而無需觸摸代碼。

價格：免費 | 更多信息

如何創建帖子片段庫以在您的帖子和頁面中使用（分 2 個步驟）

在我們開始之前，您需要安裝並激活插件。 一旦你準備好了，跳到第一步！

第 1 步：將新片段添加到您的庫中

安裝插件後，您將在 WordPress 儀表板上看到一個名為Snippets的新選項卡。 單擊它並查找“添加代碼段”選項。 在下一個屏幕上，您將能夠設置一個名稱來標識庫中的代碼，以及上傳代碼執行所需的任何媒體文件：

請記住 - 即使您沒有從該頁面上傳必要的媒體，只要它在您的庫中，代碼仍然可以工作。 此功能僅在那裡您可以使用頁面底部的測試按鈕預覽代碼的效果。

繼續前進，您還將看到一個編輯器，您可以在其中鍵入 CSS、JavaScript、PHP 和 jQuery 代碼。 但是，它需要被包裝在每種語言的特定標籤中。 以下是一些快速示例供參考：

<style>CSS goes between these tags.</style>

<?php PHP tags, on the other hand, are different, so keep that in mind. ?>
<script type="text/javascript"> Same goes for JavaScript, which uses this tag type. </script>
<script type="text/javascript"> jQuery(function($) {
$(document).ready(function(){
// jQuery uses the most complex tags – they need to be set up exactly as shown, and any code should go within this section.
});
});
</script>

每當您添加新代碼段時，您都可以在編輯器下方引用所有這些標籤，只要您記住每種語言需要不同的語言，您就無需記住它們。 另外，您可以在同一個代碼段中使用多種語言——只需確保使用各自的標籤將它們包裝起來。

完成輸入或粘貼代碼後，使用頁面底部的“保存代碼段”按鈕，它將顯示在 WordPress 儀表板上的“代碼段”>“代碼段”選項卡中：

現在，剩下的就是使用 WordPress 編輯器和 Divi Builder 測試您的新代碼段。

第 2 步：將您的片段插入您的 Divi 帖子和頁面

如果您不使用 Divi Builder，則可以使用常規 WordPress 編輯器打開任何帖子或頁面。 在頂部，您會看到一個新的“插入代碼段”按鈕：

單擊它會顯示一個覆蓋圖，顯示您庫中的所有項目，您可以選擇您想要的任何一個：

現在插件會將代碼添加到編輯器中，您就完成了設置——就這麼簡單。 但是，如果您使用的是 Divi Builder，您將無法訪問此選項。 解決此問題的最簡單方法是在新窗口中打開儀表板的代碼段選項卡，然後復制要添加的代碼的相應短代碼。 獲得後，返回 Divi Builder 並將代碼模塊添加到您正在處理的頁面：

進入後，將您的短代碼粘貼到內容字段中並保存您的更改：

現在，您的代碼段將照常工作。 使用 Divi Builder 為該過程增加了一個步驟，但您仍然可以將所有代碼片段存儲在一個易於訪問的內部庫中。

結論

如果您和我們一樣，您就會重視所有項目的效率。 手動將相同的代碼添加到多個頁面或帖子是可能的，但這並不能很好地利用您的時間。 相反，最好對代碼進行一次測試，將其保存到您的庫中，然後將其保存在您的虛擬後袋中以備不時之需。

Code Snippets Extended 插件使您能夠做到這一點。 只需安裝它並按照以下兩個步驟操作：

1. 將新片段添加到您的庫中。
2. 將您的片段插入到您的 Divi 帖子和頁面中。

您對如何將代碼片段添加到您的 Divi 網站有任何疑問嗎？ 在下面的評論部分提問！

文章縮略圖由 Andrii Bezvershenko/shutterstock.com 提供。