如何在WordPress頁面或帖子中輕鬆添加JavaScript（3種方法）

您是否要在WordPress頁面或帖子中添加JavaScript？ 有時，您可能需要向整個網站或特定頁面添加JavaScript代碼。 默認情況下，WordPress不允許您直接在帖子中添加代碼。 在本文中，我們將向您展示如何輕鬆地在WordPress頁面或帖子中添加JavaScript。

什麼是JavaScript？

JavaScript是一種不在您的服務器上而是在用戶的瀏覽器上運行的編程語言。 這種客戶端編程使開發人員可以做很多很酷的事情而不會降低您的網站速度。

如果您想嵌入視頻播放器，添加計算器或其他第三方服務，那麼通常會要求您將JavaScript代碼段複製並粘貼到您的網站中。

典型的JavaScript代碼段可能如下所示：

現在，如果您將javascript代碼段添加到WordPress帖子或頁面，那麼當您嘗試將其保存時，它將被WordPress刪除。

話雖如此，讓我們看看如何輕鬆地在WordPress頁面或帖子中添加JavaScript而不破壞您的網站。

方法1。使用插入頁眉和頁腳添加JavaScript網站範圍

有時，系統會要求您將JavaScript代碼段複製並粘貼到您的網站中，以添加第三方工具。 這些腳本通常在開始前的頂部或底部 您網站的標籤。 這樣，代碼將加載到每個頁面視圖上。

例如，您需要在網站的每個頁面上顯示Google Analytics（分析）安裝代碼，以便它可以跟踪您的網站訪問者。

您可以將此類代碼添加到WordPress主題的header.php或footer.php文件中。 但是，當您更新或更改主題時，這些更改將被覆蓋。

因此，我們建議您使用插件在您的網站上加載javascript。

首先，您需要安裝並激活“插入頁眉和頁腳”插件。 有關更多詳細信息，請參閱有關如何安裝WordPress插件的分步指南。

激活後，您需要訪問 設置»插入頁眉和頁腳 頁。 您將看到兩個框，一個框用於頁眉，另一個框用於頁腳部分。

現在，您可以將復制的JavaScript代碼粘貼到以下框之一，然後單擊“保存”按鈕。

插入頁眉和頁腳插件現在將自動加載您在網站的每個頁面上添加的代碼。

方法2。使用代碼手動添加JavaScript代碼

此方法要求您將代碼添加到WordPress文件中。 如果您之前沒有做過，請參閱我們的指南，了解如何在WordPress中復制和粘貼代碼。

首先，讓我們看一下如何將代碼添加到WordPress網站標題中。 您需要將以下代碼添加到主題的functions.php文件或特定於站點的插件中。

function wpb_hook_javascript() {
    ?>
        
    
使用代碼將JavaScript添加到特定的WordPress帖子或頁面 
假設您只想在特定的WordPress帖子上加載此javascript。 為此，您將需要在代碼中添加條件邏輯。 看下面的例子：
function wpb_hook_javascript() {
  if (is_single ('16')) { 
    ?>
        
    
如果您仔細看一下上面的代碼，您會發現我們已經將JavaScript代碼包裝在條件邏輯周圍，以匹配特定的帖子ID。 您可以通過用自己的帖子ID替換16來使用它。 
現在，此代碼適用於除頁面之外的任何帖子類型。 讓我們看另一個例子，除了這個例子將在將javascript代碼添加到head部分之前檢查特定的頁面ID。 
function wpb_hook_javascript() {
  if (is_page ('10')) { 
    ?>
        
    
代替 is_single，我們現在正在使用 is_page 檢查頁面ID。 
我們可以使用相同的代碼並稍作修改，以將javascript代碼添加到您網站的頁腳中。 看下面的例子。 
function wpb_hook_javascript_footer() {
    ?>
        
    
現在，我們不再將函數掛接到wp_head，而是將其掛接到wp_footer。 您還可以將其與條件標籤一起使用，以將Javascript添加到特定的帖子或頁面。 
方法3。使用插件在帖子或頁面內添加JavaScript代碼
此方法將允許您在WordPress帖子和頁面內的任何位置添加代碼。 您還可以選擇要在內容中嵌入javascript代碼的位置。 
首先，您需要安裝並激活Code Embed插件。 有關更多詳細信息，請參閱有關如何安裝WordPress插件的分步指南。
激活後，您需要編輯要在其中添加JavaScript的帖子或頁面。 在帖子編輯頁面上，單擊“屏幕選項”按鈕，然後選中“自定義字段”選項。 

現在向下滾動到帖子編輯器下方，您將看到“自定義字段”元框，您需要在其中單擊“輸入新”鏈接。 

現在將顯示自定義字段名稱和值字段。 
您需要為自定義字段提供一個帶有CODE前綴的名稱（例如CODEmyjscode），然後將javascript代碼粘貼到value字段中。 

不要忘記單擊“添加自定義字段”按鈕以保存您的自定義字段。  
現在，您可以使用此自定義字段將JavaScript代碼嵌入此文章或頁面中的任何位置。 只需在您的帖子內容中的任何位置添加此嵌入代碼。 
{{CODEmyjscode}} 
現在，您可以保存您的帖子或頁面並查看您的網站。 您將可以使用檢查工具或查看頁面源代碼來查看javascript代碼。 
小費： 這些方法適用於初學者和網站所有者。 如果您正在學習WordPress主題或插件開發，則需要適當地將JavaScript和样式表加入項目。 
我們希望本文能幫助您學習如何在WordPress頁面或帖子中輕鬆添加JavaScript。 您可能還想查看有關WordPress函數文件的極其有用的技巧的列表。 
如果您喜歡這篇文章，請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。