如何在 WordPress 中新增程式碼片段

如果您想將程式碼片段新增到您的 WordPress 網站，那麼您來對地方了。

通常，人們會複製程式碼並將其貼到 WordPress 主題檔案中。 這是一個簡單的過程，但此過程適合專家用戶。

對於初學者和中級用戶來說，複製和貼上可能看起來令人生畏。 這就是我寫這篇文章的原因。

此外，專家用戶也可以獲得好處，因為我將向您展示如何輕鬆添加程式碼片段。

讓我們開始吧！

將程式碼片段加入 WordPress 網站的原因

首先，WordPress 是最受歡迎的網站建立器，因為它具有適合初學者的設定和以使用者為中心的功能。

但是，添加一些自訂程式碼可以擴展 WordPress 的功能，而不會破壞您的網站。

假設您有一些可以在您的網站上實現的程式碼。 但是您將在哪裡或如何發布它們？

這就是貼上程式碼選項的用武之地。這是為您的網站提供創新功能的好方法。

使用自訂程式碼的另一個原因是它是擴展 WordPress 功能的有效方法。

幾乎對於所有需要，您都會找到一個 WordPress 外掛。 但是安裝滿足所有需求的插件並使您的網站變得沉重是明智的嗎？

如果您可以使用一小部分程式碼來解決問題，那麼您應該這樣做。

話雖如此，讓我們來看看 WordPress 網站添加自訂程式碼的過程。

新增自訂程式碼的方法

您可以透過多種方式為 WordPress 網站新增自訂程式碼。 在討論這一部分之前，我希望您安裝一個 WordPress 備份插件，以便您的新程式碼不會破壞網站中的任何內容。

如果出現問題，您可以從備份中還原先前的版本，並將您的網站還原到早期階段。 話雖這麼說，添加程式碼片段的另一個方面是在哪裡添加它們。

通常，您可以將程式碼新增至主題模板檔案中，例如index.php。 還有其他 PHP 文件，您可以直接貼上程式碼。

我想，最受歡迎的方法是將片段加入functions.php。 至少，這是您在大多數可用教程中看到的內容。

但是，當您更改主題或想要一次停止該功能時，我將展示對您最有幫助的最佳方法。

不過，您可以使用以下一些方法將自訂程式碼新增至 WordPress 網站。

如何在 WordPress 中新增程式碼片段 (FluentSnippets)

第一步是使用名為 FluentSnippets 的插件來新增自訂程式碼。 順便說一句，這個外掛是由我們（您最喜歡的 WPManageNinja）開發的。 如果您已經是 Fluent 用戶（使用任何 Fluent 產品），您就會知道我們的插件保持著多麼高品質。

第一步 – 安裝免費插件

前往插件 > 新增插件並蒐索 FluentSnippets。

點選立即安裝按鈕。

現在點擊「啟動」按鈕，您的外掛程式將被啟動。

返回 WordPress 儀表板並從左側面板中找到 FluentSnippets。 您將看到一個按鈕，上面寫著Create Your First Snippet 。 或者，您可以隨時按下右上角的「新片段」按鈕。

第二步 – 貼上程式碼片段

現在貼上您的程式碼片段並為其命名。 如果需要，您可以寫一些描述。 畢竟，告訴它在哪裡運行並單擊“創建片段”按鈕。

您也可以使用數字設定一些優先級，數字越低，優先順序越高。

當您有多個片段時，您可以將它們組織到群組中。 您也可以指派一些標籤以輕鬆找到您的片段。

有一個稱為高級條件邏輯的選項。 如果啟用它，您可以過濾您的程式碼片段並讓它在滿足條件時運行。

順便說一句，您可以為 PHP、PHP + HTML、CSS 和 JS 編寫腳本。

複製和貼上程式碼最簡單的方法就在這裡完成。 您可以去查看“設定”，儘管那裡沒什麼可做的。

將程式碼貼到主題檔中

預設情況下，WordPress 具有豐富的功能可套用至您的網站。 主題通常具有豐富的功能和自訂選項。 但是當您需要精確的東西時，您可能會添加一些自己編寫的程式碼。

這裡的 function.php 檔案可以拯救你的背部。 好吧，您可以在每個主題中找到該文件，但我希望您遵循最安全的方式。 這就是為什麼我建議您創建一個兒童主題。

不要不知所措。 子主題位於主主題之下，其運作方式與父主題類似。 好處是，如果出現任何問題，只有早午餐會受到影響，而不是樹（主題）。

第一步 – 建立子主題

若要建立子主題，您必須透過 FileZilla 等 FTP 用戶端存取網站的資料夾。 您也可以使用網站託管位置的文件管理器進行存取。

成功登入後，前往wp-content > 主題。 當您導航到那裡時，您可以看到網站上安裝的所有主題的資料夾。

現在您需要為要建立的子主題建立一個資料夾。 給資料夾命名。 我建議您寫一個描述性的名稱，以免將來發生混淆。 假設您的主題名稱是 tropica，您可以將您的子主題命名為 tropica_childtheme。

第二步 – 新增 css 文件

建立資料夾後，在其中新增 style.css 檔案。 在文字編輯器中，貼上以下程式碼：

 /* Theme Name: My Child Theme Theme URI: https: //mysite.com/ Description: This is a new child theme I have created for experimentation. Author: Your Name Author URI: https: //mysite.com/ Template: parenttheme Version: 0.1 */

不要忘記用虛擬內容取代您的訊息。 確保正確書寫父親主題的名稱（此處為tropica）。 另一件重要的事情是，您需要在子主題的 style.css 檔案中呼叫父主題的 CSS。

您只需添加以下程式碼即可做到這一點：

 @import url("../parenttheme/style.css");

這裡的「父親主題」是tropica。 正確的？

因此，不要忘記正確寫出您的父主題的名稱。 完成後，將檔案另存為 style.css 在子主題的資料夾中。

步驟 3 – 建立一個functions.php 文件

接下來，您必須為您的子主題建立一個functions.php 檔案。 開啟文字編輯器並貼上以下 PHP 標籤：

 <?php //* Write your code here

現在將此檔案儲存為functions.php並將其新增至子主題的資料夾。 另外，使用 FTP 用戶端將此資料夾拖曳到網站的主題目錄中。

第四步 – 啟動您的主題

是時候啟動您的主題了。 為此，請從 WordPress 儀表板的左側面板前往外觀 > 主題。 您可以在那裡看到您創建的子主題。 點擊“激活”按鈕，您的子主題將開始工作。

第五步 – 新增程式碼片段

這裡主要做任務。 若要將程式碼片段新增至子主題，請導覽至外觀 > 主題檔案編輯器。 現在選擇functions.php 或您想要自訂的任何其他檔案。

這是一個functions.php的例子

完成後，按一下“更新檔案”，您的變更將在您的網站上實施。 只需重新加載網站並自行檢查即可！

結論

現在您知道如何將自訂程式碼片段新增到您的 WordPress 網站。 讓我們利用這些知識，透過自訂程式碼使您的網站比以往更加強大。 我希望添加程式碼不再是一件困難的事情。