如何新增程式碼片段貼上至WordPress網站

在WordPress主題檔案中複製和貼上程式碼對於有經驗的使用者來說似乎很容易,但對於初學者來說可能會比較折騰。

在本教程中,我們將向您展示如何在不破壞您的網站的情況下從網路複製和貼上程式碼片段到WordPress。

如何新增程式碼片段貼上至WordPress網站

為什麼要向WordPress網站新增程式碼片段?

由於其提供的靈活性,WordPress是世界上最好的網站開源系統之一。向您的站點新增新特性和功能非常容易,並且可以幫助構建幾乎任何型別的網站。

我們分享了各種提示和技巧,您可以使用它們來改善您的網站。其中一些提示會要求您向WordPress新增程式碼。

雖然向您的網站新增自定義程式碼片段是可選的,而且您經常可以找到外掛來完成相同的任務,但有時一個簡單的程式碼片段會更有效。

通常,新增程式碼片段是修復許多常見WordPress錯誤、提高WordPress安全性以及向網站新增新功能的簡單方法。

話雖如此,讓我們來看看如何安全地將程式碼片段新增到您的WordPress網站中。

在WordPress中新增程式碼片段的最佳方法是什麼?

值得一提的是,在開始向WordPress網站新增程式碼片段之前,您應該安裝並使用WordPress備份外掛

這可以確保您的WordPress站點安全,並且您可以隨時從備份中恢復它,以防出現任何問題。

當新增片段到WordPress,你會發現說明將它們新增到WordPress主題模板檔案,如index.phpsingle.php等。

這些片段僅對那些特定的主題檔案有用,因此您必須直接新增它們或建立子主題

但是,大多數程式碼片段將新增到您的WordPress主題的functions.php檔案中。一些教程可能會建議將其直接新增到檔案中,但有更好的替代方法可以讓您的更改在未來得到驗證。

這樣,即使您更改了主題,也不會刪除您的自定義功能。

話雖如此,讓我們來看看在WordPress中新增自定義程式碼片段的一些最適合初學者的方法。

1. 使用程式碼片段WordPress外掛

程式碼片段WordPress外掛

使用程式碼片段外掛是將程式碼新增到 WordPress 的最安全且對初學者最友好的方式。

Code Snippets外掛,您可以在您的網站新增和管理自定義程式碼片段容易。

它帶有一個故障安全開關,如果它導致錯誤,它會立即停用程式碼片段。這可以防止您在新增自定義程式碼片段時無法訪問您的網站。

注意:程式碼片段方法對於需要新增到functions.php檔案中的片段很有用。如果要求您在其他主題檔案中新增程式碼片段,則此方法將不起作用。

2. 建立子主題以儲存自定義程式碼

建立子主題以儲存自定義程式碼

將程式碼新增到WordPress的另一個好方法是建立WordPress子主題。使用子主題將有助於在更新主題時保持對網站所做的任何更改完整無缺。

有關更多詳細資訊,請參閱有關如何在WordPress中建立子主題的初學者指南。

注意:此方法也適用於需要新增到其他主題模板檔案中的程式碼片段。

3. 為自定義程式碼使用特定於站點的外掛

為自定義程式碼使用特定於站點的外掛

另一個靈活的選擇是使用特定於站點的WordPress外掛。這是一個自定義外掛,您可以為自己的網站建立並用於儲存所有自定義程式碼。

這種方法的優點是您的程式碼不依賴於您的主題,即使您更改主題,它也會保持活動狀態。它也不受您網站上任何WordPress更新的影響。

注意:此方法僅適用於需要新增到functions.php檔案中的程式碼片段。

4.使用Insert Headers and Footers外掛新增自定義程式碼

Insert Headers and Footers外掛新增自定義程式碼

有時您可能只需要將程式碼新增到您的主題header.phpfooter.php檔案中。將Insert Headers and Footers外掛可以幫你輕鬆做到這一點。

當您需要將Google Analytics、Facebook Pixel、Google AdSense等的跟蹤程式碼新增到您的網站時,這會派上用場。

此外,它還可以讓您在一個地方管理所有頁首和頁尾程式碼,防止任何手動錯誤,並讓您無需擔心升級或更改主題。

注意:此方法最適合跟蹤指令碼、自定義CSS和Javascript程式碼。

4.直接在Functions.php檔案中新增程式碼

在Functions.php檔案中新增程式碼

最後,可以將程式碼片段直接新增到主題functions.php檔案中。但是,我們建議使用上面的其他選項,因為有一些缺點。

首先,如果您更新WordPress主題,那麼您的所有更改都將消失。

接下來,您新增的程式碼僅在您使用該特定主題時才有效。

話雖如此,讓我們來看看如何正確複製和貼上程式碼片段並避免破壞您的網站。

如何編輯和新增程式碼到WordPress檔案

根據您選擇在WordPress部落格或網站上新增自定義程式碼片段的方法,有多種編輯WordPress檔案的方法。

1. 在Code Snippets外掛中新增自定義程式碼

如果您打算使用Code Snippets外掛向WordPress新增程式碼,那麼您將直接在WordPress管理儀表盤中新增程式碼。

首先,您需要安裝並啟用外掛。啟用後,只需轉到WordPress 管理儀表板中的Snippets » Add New

這會將您帶到一個介面,您可以在其中新增自定義程式碼。您所要做的就是為您的程式碼片段命名以幫助您記住,然後將您的程式碼貼上到框中。

在Code Snippets外掛中新增自定義程式碼

然後,單擊“Activate”按鈕,您的程式碼段將在您的網站上生效。

有關詳細說明,請參閱有關如何在WordPress中輕鬆新增自定義程式碼片段的教程。

2. 在特定站點的WordPress外掛中新增自定義程式碼

如果您使用的是特定於站點的外掛,那麼您可以使用內建的WordPress外掛編輯器來新增您的自定義程式碼。

首先,您需要轉到外掛»外掛編輯器,然後從標有“選擇要編輯的外掛:”的下拉選單中選擇您的外掛。

編輯器將載入您的站點特定外掛。然後,您可以簡單地向頁面新增程式碼。

外掛編輯器

完成後,請務必單擊“更新檔案”按鈕以儲存更改。

如果您的程式碼中缺少某些內容或可能破壞您的網站,那麼外掛編輯器將自動撤消您的更改。

將自定義程式碼新增到特定於站點的外掛的另一種方法是使用FTP。

只需使用您首選的FTP客戶端開啟您的網站,然後右鍵單擊外掛檔案並選擇“檢視/編輯”選項。

FTP編輯外掛程式碼

這將開啟檔案,以便您可以新增程式碼片段。當您再次儲存並上傳檔案時,更改將自動顯示。

3. 使用Insert Headers and Footers外掛新增自定義程式碼

如果您打算使用Insert Headers and Footers外掛來新增程式碼片段,那麼您可以直接從WordPress管理面板執行此操作。

首先,您需要安裝並啟用外掛。之後,您可以轉到設定»Insert Headers and Footers,然後將您的程式碼片段輸入到您網站的頁首、正文或頁尾部分。

Insert Headers and Footers插入程式碼片段

確保您點選“儲存”按鈕,您的程式碼片段就會出現在您的網站上。

有關更多詳細資訊,請參閱有關如何在WordPress中新增頁首和頁尾程式碼的指南。

4.向Functions.php或其他主題模板新增自定義程式碼

如果您將程式碼片段直接新增到主題functions.php檔案或任何其他頁面模板,則可以通過導航到WordPress 管理面板中的外觀»主題編輯器來新增程式碼。

然後,您可以從右側欄中選擇該檔案,它將在編輯器中開啟。

主題編輯器新增程式碼片段

您所遵循的教程將告訴您可以在何處新增程式碼片段,但如果沒有,則需要在檔案底部的所有現有程式碼下方新增程式碼。

另一種選擇是使用WordPress託管檔案管理器的FTP將自定義程式碼新增到您的主題檔案。

只需將您的FTP客戶端連線到您的網站,然後轉到wp-content » themes » your-theme-folder並右鍵單擊需要編輯的檔案。

FTP編輯主題檔案

然後,單擊“檢視/編輯”選項以在文字編輯器中開啟檔案並新增您的程式碼片段。

新增自定義程式碼時對PHP錯誤進行故障排除

初學者在將自定義程式碼片段新增到他們的WordPress網站時會犯一些常見的錯誤。幸運的是,大多數這些錯誤都可以輕鬆避免和修復。

讓我們來看看這些錯誤以及修復它們的最佳方法。

1. PHP開始和結束標籤的錯誤使用

WordPress主要是用PHP程式語言編寫的,它有一個特定的語法,告訴您的伺服器以下程式碼需要由PHP處理。下面是一個典型的PHP程式碼片段:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// PHP Begin Tag
<?php
// Rest of the code goes here
// PHP End Tag
?>
// PHP Begin Tag <?php // Rest of the code goes here // PHP End Tag ?>
// PHP Begin Tag
<?php
 
// Rest of the code goes here
 
// PHP End Tag
?>

您所有的PHP程式碼都需要在<?php?>標籤內。

PHP結束標記在PHP和HTML之間來回切換的檔案中非常重要。這包括大多數使用PHP標籤和HTML的WordPress主題檔案。

您需要確保如果您將程式碼貼上到PHP開始標記未關閉的位置,那麼您需要新增不帶PHP開始標記的程式碼。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php
// Some pre-existing code
// your custom code
?>
<?php // Some pre-existing code // your custom code ?>
<?php 
// Some pre-existing code
 
// your custom code
 
?>

如果您將自定義程式碼貼上到PHP結束標記之外或之後,則還需要新增PHP開始標記。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php
// Some pre-existing code
?>
// Your custom code snippet
<?php
?>
<?php // Some pre-existing code ?> // Your custom code snippet <?php ?>
<?php 
// Some pre-existing code 
?> 
 
// Your custom code snippet
<?php 
 
?>

幾乎90%的錯誤都是由PHP開始或結束標記的錯誤放置引起的。檢視您的程式碼將幫助您瞭解是否需要在自定義程式碼片段中新增PHP開始或結束標記。

但是,許多WordPress主題檔案functions.php可能根本沒有PHP結束標記。這意味著您可以在檔案底部新增程式碼而無需開始或結束標記。

下面是一個示例。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php
// Lots of code in your theme's functions.php file
//
//
// Your custom code
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}
add_action('login_head', 'custom_loginlogo');
<?php // Lots of code in your theme's functions.php file // // // Your custom code function custom_loginlogo() { echo '<style type="text/css"> h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; } </style>'; } add_action('login_head', 'custom_loginlogo');
<?php
// Lots of code in your theme's functions.php file
//
//
// Your custom code
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}
add_action('login_head', 'custom_loginlogo');

請記住,某些教程可能假定您已經知道如何使用 PHP 開始和結束標記。因此,他們可能只是向您展示一個沒有這些標籤的程式碼片段。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}
add_action('login_head', 'custom_loginlogo');
function custom_loginlogo() { echo '<style type="text/css"> h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; } </style>'; } add_action('login_head', 'custom_loginlogo');
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}
add_action('login_head', 'custom_loginlogo');

有時,當給出程式碼片段時,它們可以新增到多個位置,因此不會包含PHP結束和開始標記。

當您在主題檔案中新增這樣的程式碼片段時,您需要確保它位於PHP標籤內。

2. 不正確的巢狀錯誤

PHP對函式、條件邏輯和迴圈有特定的語法。此語法依賴於指示函式何時開始和何時結束的大括號。

例如,這是一個簡單的PHP函式:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php
function wbolt_tutorial() {
echo "Hello World!";
}
?>
<?php function wbolt_tutorial() { echo "Hello World!"; } ?>
<?php 
function wbolt_tutorial() { 
echo "Hello World!"; 
} 
?>

現在如果你想新增一個與這個函式無關的自定義程式碼片段,那麼你需要把它放在這個函式之外,如下所示:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// Pre-existing code in your theme file
<?php
function wbolt_tutorial() {
echo "Hello World!";
}
// Your custom code
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}
?>
// Pre-existing code in your theme file <?php function wbolt_tutorial() { echo "Hello World!"; } // Your custom code function custom_loginlogo() { echo '<style type="text/css"> h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; } </style>'; } ?>
// Pre-existing code in your theme file
<?php
function wbolt_tutorial() { 
echo "Hello World!"; 
} 
// Your custom code 
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}
?>

如果你錯過了開始或結束的大括號,那麼這將破壞程式碼,你最終會得到一個錯誤頁面。

瞭解WordPress中的PHP錯誤

由於向WordPress新增自定義程式碼而導致的錯誤通常會導致詳細的錯誤訊息。其中大部分是由於意外字元導致的語法錯誤、解析錯誤或致命錯誤

好訊息是這些錯誤會告訴您程式碼中的哪一行導致了錯誤。

WordPress報錯排查

然後,您可以轉到確切的行檢視程式碼並找出您遺漏了什麼。

為此,我們建議使用適當的文字編輯器進行程式碼編輯,因為它們具有行號和語法突出顯示,可以幫助您輕鬆解決問題。

當您的WordPress網站無法訪問時該怎麼辦?

首先,不要驚慌。您網站的所有檔案仍然存在,您可以訪問它們。

只需使用FTP客戶端或WordPress 託管帳戶中cPanel中的檔案管理器應用程式連線到您的網站。

接下來,找到您新增了導致錯誤的程式碼的檔案,然後開啟它進行編輯。

然後,您可以嘗試使用程式碼段修復問題。如果您無法解決這些問題,只需刪除您新增的程式碼片段並儲存更改即可。

現在,您的網站應該會再次恢復正常。如果它仍然顯示一些錯誤,請下載您的WordPress主題的新副本並將zip檔案解壓縮到您的計算機。

之後,找到您之前進行更改的檔案,並在覆蓋舊檔案的同時將其上傳到您的伺服器。

有關解決這些問題的更多方法,請參閱我們關於最常見的WordPress錯誤以及如何修復它們的指南

最後,我們希望本教程能幫助您瞭解如何將程式碼片段貼上到WordPress中。

評論留言