如何將JavaScript添加到WordPress頁面（+調試提示）

已發表: 2025-06-20

您是否要將JavaScript添加到WordPress頁面上，但是您認為自己做錯了，甚至不知道從哪裡開始？還是您已經執行此操作，正在看到錯誤消息和/或您不知道如何故障排除的性能問題？

無論哪種方式，您都在正確的位置。

這篇文章將是關於JavaScript和WordPress的所有事物的第一行教育。最後，您將了解有關為什麼在WordPress中使用JavaScript的所有內容是一個好主意，如何將其添加到您的頁面中，以及當它無法正常工作或放慢網站時該怎麼做。

tl; dr

您是否忙於閱讀整個帖子並想要快速摘要？好，但這只是因為你。

將JavaScript添加到WordPress頁面可以使您的網站更具交互性，並允許您將其與許多第三方工具集成在一起。同時，需要仔細考慮以避免打破您的網站。

採取安全預防措施，例如使用受信任來源的JavaScript，使用子主題備份您的網站，並首先測試舞台或開發環境中的更改。此外，請密切關注您添加到網站的任何代碼的性能影響。

通過WordPress掛鉤， functions.php ，單獨的文件，WordPress編輯器或使用插件，有幾種方法可以將JavaScript添加到您的網站中。

通過瀏覽器開發工具，調查插件和主題衝突以及WordPress調試模式來解決問題。

通過組合，縮小，推遲或延遲腳本來提高JavaScript性能。您也可以使用WP Rocket等插件來自動化該過程。

為什麼在WordPress頁面中添加JavaScript？

JavaScript通常縮寫為JS，是一種流行的編程語言。這是用於創建網頁的三種主要技術之一。另外兩個是HTML，它定義了負責樣式的頁面結構和內容以及CSS。

JavaScript是一種客戶端語言，這意味著它在瀏覽器中運行，而不是在服務器上運行。因此，即使在頁面完成加載後，您也可以使用它來修改和更新現有的CSS和HTML。

這就是為什麼它的主要用途之一是使網頁更加互動。例如，JavaScript通常會驅動頁面元素，例如：

  • 滑入菜單
  • 彈出窗口
  • 動畫

WordPress塊編輯器也主要寫在JavaScript中。

基於JavaScript的WordPress塊編輯器

除了互動性外，JavaScript也是將第三方服務集成到您的網站的常見方法，例如跟踪Web Analytics（Web Analytics）的腳本。其他示例包括：

  • 實時聊天
  • 電子郵件選擇加入和聯繫表格
  • 嵌入式視頻
  • 交互式圖
  • 社交媒體提要

重要的考慮因素

如果錯誤地完成，將JavaScript添加到WordPress頁面上可能會導致錯誤和問題。從一開始就採取預防措施可以節省您的時間和挫敗感：

  • 僅使用來自受信任來源的JavaScript來確保您的網站安全穩定。
  • 在進行更改之前，請全面備份您的網站文件和數據庫，以防萬一出現問題。
  • 當您將JavaScript直接添加到主題文件時，請始終使用子主題。如果修改主題，則更改時將失去更改。
  • 在將它們應用於您的實時網站之前，請在分期或開發環境中進行測試。
  • JavaScript向您的WordPress頁面添加了額外的代碼，這可以減慢它們。在向您的網站引入新功能時，請跟踪性能。

6種將JavaScript添加到WordPress中的頁面的方法

對理論夠了。在下面，我們向您展示了從大多數技術到最不技術的六種方法將JavaScript添加到WordPress。

1。使用WordPress鉤子和功能

掛鉤是放置在WordPress加載過程中的代碼部分，您可以在其中連接自定義代碼（所謂的“功能”），以便在特定時間或位置執行。

例如，wp_head（）在您網站頂部的<頭>部分中運行。如果要使用它將JavaScript添加到WordPress頁面，則必須在（孩子）themy的functions.php文件中執行此操作，例如：

 function add_custom_script() { ?> <script> // Place your JavaScript code here </script> <?php } add_action('wp_head', 'add_custom_script');

輸入您的JavaScript代碼，其中說：“將您的JavaScript代碼放在此處。”您還可以將函數名稱從“ add_custom_script”更改為更具描述性的內容。

此方法非常適合具有明確定義目的的較小腳本，例如簡單的分析跟踪代碼或基本交互式元素。它還可以在頁腳中加載JavaScript，這是提高頁面性能的流行解決方案。只需使用wp_footer（）而不是wp_head（）。

頁面頭和頁腳是加載腳本的流行位置，因為它們通常在網站上出現在任何地方。這使它們成為將JavaScript添加到WordPress網站的所有頁面的好方法。

如果您只想在特定頁面上加載JavaScript，則可以將此方法與有條件的語句相結合：

 function add_custom_script() { if (is_page(123)) { ?> <script> // Place your JavaScript code here </script> <?php } } add_action('wp_head', 'add_custom_script');

將其限制在單個頁面的部分是IS_PAGE（123）。 “ 123”是頁面ID，如果要使用此代碼，則需要更新到頁面ID。當您在WordPress編輯器中打開頁面時，它會顯示在瀏覽器欄中。您也可以使用is_page（）按名稱或URL slug來定位頁面。

瀏覽器欄中的WordPress頁面ID
還有許多其他有條件的標籤，例如博客帖子的is_single（），博客頁面的iS_home（），歸檔頁面的is_archive（），以及類別檔案的is_category（）。

2。在單獨的文件中加載JavaScript

另一個選擇是將您的JavaScript放入自己的文件中。這是一個好主意，尤其是對於大型腳本，但總體上也很有意義，因為它允許您使用wp_register_script（）和wp_enqueue_script（）函數加載文件。

這是首選方法，因為它有助於避免衝突，以正確的順序加載腳本並管理依賴關係。這是它的樣子：

 function enqueue_custom_script() { wp_register_script( 'my-custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0.0', true ); wp_enqueue_script('my-custom-script'); } add_action('wp_enqueue_scripts', 'enqueue_custom_script');

在此示例中，將腳本放置在主題目錄中，我們使用get_template_directory_uri（）（對於兒童主題，使用get_stylesheet_directory_uri（））。數組（'jQuery'）表明該腳本取決於jQuery，應在其之後加載。 “ 1.0.0”是版本號，“ true”表示WordPress應將腳本加載到頁腳中。

這也有效，也是加載第三方JavaScript的正確方法，例如跟踪代碼。在將代碼放在網站上之前，請確保將代碼更新為您的用例。

3。在主題文件中包括代碼

鉤子是從一個地方啟用所有JS腳本的好方法，但它們並不是將它們加載到主題中的唯一方法。

您可以通過將腳本或鏈接直接發佈到主題文件中的主題文件中的腳本或鏈接來實現相同的內容，而不是使用WP_head（）加載某些內容。

在經典主題中，通常是header.php 。在主題中找到它，製作一個副本並將其放在您的孩子主題中，然後將腳本直接包含在<head>部分中的某個地方。

如果您只想在特定頁面上加載它，則可以像以前一樣使用條件語句。另外，借助模板層次結構，也可以僅為該頁面創建一個自定義文件，例如Page-contact.php 。

WordPress阻止主題不再使用這些主題文件。如果您的主題是塊主題，則建議您選擇此處提到的其他方法之一。

4。創建一個自定義插件

使用主題文件將JavaScript添加到WordPress頁面的問題在於，它使代碼取決於主題。切換主題時，您的JavaScript也會消失。

您可以使用自定義插件來避免這種情況。這使代碼無關緊要，還允許您在WordPress插件菜單中激活和停用它。

這是一個簡單插件的標記，將JavaScript添加到您的WordPress頁面：

 <?php /* Plugin Name: Custom JavaScript Loader Plugin URI: https://yourwebsite.com Description: A simple plugin to add custom JavaScript to WordPress pages. Author: Your Name Author URI: https://yourwebsite.com Version: 1.0 */ function add_custom_script() { ?> <script> // Place your JavaScript code here </script> <?php } add_action('wp_head', 'add_custom_script');

將此代碼放入PHP文件中，並確保將插件名稱，插件，描述，作者和作者URI調整為您自己的信息，因為它在WordPress插件菜單中顯示。

將文件命名為有意義的東西，例如自定義跟踪code-plugin.php ，然後將其上傳到WordPress安裝中WP-CONTENT/插件中同名的目錄中。之後，它應該出現在插件菜單中。

5。在WordPress編輯器中添加JavaScript

儘管這不是最建議的方法，但也可以使用WordPress編輯器將JavaScript直接添加到頁面。為此，添加一個新塊（單擊加號或使用前向斜線），然後選擇自定義的HTML塊。

只需插入您的JavaScript代碼，即可將其直接加載到頁面上。

只需確保使用“打開<script”和“關閉”標籤，並將更改保存在編輯器中供它們生效。

您還可以使用“代碼”選項卡將JavaScript添加到經典編輯器中。

6。使用代碼段插件

如果還沒有插件解決方案將JavaScript添加到您的網站，則不會是WordPress。實際上，有幾個，包括：

  • WPCODE
  • 標題頁腳代碼管理器
  • 簡單的自定義CSS和JS
  • CSS和JavaScript工具箱

插件允許您更好地管理JavaScript。您可以將片段命名，將它們整理成類別，有選擇地打開和關閉它們，並設置有條件的規則。此外，像自定義插件解決方案一樣，它使您的JavaScript獨立於主題。

使用這些插件也很簡單。他們通常在您的網站上添加一個新菜單，您可以在其中管理JavaScript片段。

只需創建一個新的片段，插入您的代碼，然後配置您希望出現的位置即可。

就是這樣。

WordPress中的JavaScript問題故障排除

現在，您知道如何將JavaScript添加到WordPress網站和頁面。但是，如果某件事不做應有的工作呢？我們將花費本文的最後一部分，討論如何識別和解決您可能遇到的JavaScript問題。

1。檢查瀏覽器開發人員工具

檢查JavaScript錯誤的一種方法是使用瀏覽器的開發人員工具。它們允許您檢查基礎站點代碼，包括任何腳本。

您可以通過在任何網頁上右鍵單擊並選擇檢查打開它們。

或者，通過瀏覽器菜單訪問它們，例如，在Chrome中，它們位於更多工具>開發人員工具下。

在Safari CMD+Opt+c中，也有鍵盤快捷鍵可以打開它們，在Chrome，Edge和Firefox中它是Ctrl/Cmd+Shift+I 。

打開網站上的開發工具，然後轉到“控制台”選項卡。您應該看到任何錯誤，包括在此處由JavaScript引起的錯誤。

請注意，您可能必須重新加載頁面才能顯示。最常見的JavaScript錯誤是：

  • ReferenceError：指示缺失或未定義的變量或功能。
  • TypeError：建議操作存在問題，例如，嘗試使用不適當類型的值。
  • 語法：通常是由於代碼中的錯別字或錯誤格式而發生的，例如缺失的括號，半olon或引號。

您想找出哪些腳本，文件或功能正在引起錯誤，因此您可以對其進行糾正。它有助於在“源”選項卡中使用斷點，這使您可以暫停JavaScript執行並檢查正在發生的事情。

使用您喜歡的搜索引擎或AI，以了解有關您發現的任何錯誤消息的更多信息。此外，您可能還需要檢查“網絡”選項卡以查看您的腳本是否正確加載。

2。解決主題和插件衝突

JavaScript錯誤也可能由於主題和插件衝突而發生，例如，當使用不兼容的庫或重複功能時。

這是解決這些JavaScript問題的方法：

  • 更新主題和插件：您的主題或插件開發人員可能已經知道該問題，並在最新版本中對其進行了更正。
  • 暫時切換到默認主題：激活一個WordPress默認主題，例如二十五個。如果問題消失了，您的主題可能有錯。
  • 停用您的插件：關閉網站上的所有插件，然後一一將它們打開，以查看問題何時重新出現。更新或更換引起它的插件。

健康檢查插件允許您模擬WordPress儀表板上提到的所有內容（轉到“故障排除”選項卡），然後單擊一次。

它還提供了有關您網站狀態的更多其他信息。建議您在開發或登台網站上進行這些測試，而不是您的實時網站。

3。使用調試模式

WordPress具有內置的調試模式，可幫助您發現和解決網站問題。雖然它沒有直接顯示JavaScript的問題，但它可以更輕鬆地找到可能干擾網站上腳本的PHP，插件和主題錯誤。

要激活調試模式，請打開您的wp-config.php文件（通過FTP或您的託管文件管理器）並添加以下行：

 define('WP_DEBUG', true); define('WP_DEBUG_LOG', true); define('SCRIPT_DEBUG', true);

您可能已經找到Define（'Script_Debug'，false）;在文件中。如果是這樣，只需將其更改為“真實”。保存並重新上傳文件。

上方的設置啟用調試模式，錯誤記錄（錯誤將出現在WP-content/debug.log中），並加載核心CSS和JavaScript文件的未經文化版本，以更輕鬆地跟踪問題。

同樣，在開發網站上，遠離訪客的眼睛。另外，不要忘記刪除此代碼以後恢復正常。

您還可以使用WP調試插件啟用WordPress調試模式。

4。解決性能問題

像其他任何代碼一樣，將JavaScript添加到WordPress頁面上可以使您的網站較慢。您通常會注意到，當您加快測試網站並收到警告時，該警告說“減少未使用的JavaScript”。

為避免JavaScript引起的性能問題，請遵循以下最佳實踐：

  • 刪除您不需要的腳本：定期審核網站上的JavaScript加載，以查看您是否真的需要所有內容，尤其是第三方服務。
  • 在頁腳中加載腳本：僅在需要提早加載時，僅將JavaScript文件放在頭部部分。
  • 結合腳本：將幾個腳本組合到一個文件中（這稱為“串聯”）。一個大文件通常比幾個較小的文件更快。
  • 縮小JavaScript文件：這可以刪除不必要的格式和空格，這對於不需要執行代碼的可讀性非常有用。
  • 加載JavaScript異步：意味著瀏覽器在加載JavaScript文件時不會停止處理站點，而是將其加載到後台並在下載後執行它們。
  • 延遲大腳本：在這裡，您的文件也將在後台下載，但僅在加載過程完成後才執行，因此不會中斷。
  • 延遲JavaScript執行：該推遲所有JavaScript文件和內聯腳本的加載，直到進行用戶交互。這就像圖像的懶惰加載，但用於JavaScript文件。

用WP Rocket簡化JavaScript性能優化

您還可以選擇使用WP Rocket更輕鬆地實現它，而不是手工執行此操作。當在您的網站上活動時，插件默認情況下會減小JavaScript，您可以通過簡單地在文件優化菜單中選中一些盒子來組合，延遲，延遲和異步加載任何腳本。

WP Rocket中的JavaScript優化設置

如有必要，您可以選擇將單個腳本，插件和文件排除在優化之外，以防其乾擾頁面元素的響應能力。

除此之外，WP Rocket自動在背景中實現了許多性能改進，例如：

  • 緩存，包括單獨的移動緩存
  • GZIP壓縮
  • 預加載緩存和鏈接
  • 批判圖像優化（排除懶惰加載的折疊上方圖像）以改善最大的內容塗料
  • 自動懶惰渲染以更快地加載頁面上的元素

實際上，只需安裝和激活插件即可在您的網站上實現80％的性能最佳實踐，並立即使其更快。如果這還不夠，那麼您還可以激活許多其他功能以提高網站速度，例如：

  • 圖像的懶惰加載，包括CSS背景，視頻和iframe
  • 預加載外部文件和字體
  • 自我託管的Google字體
  • 數據庫優化
  • 輕鬆連接到CDN的選項，包括RocketCDN

準備將JavaScript添加到您的WordPress頁面中了嗎？

JavaScript為WordPress網站提供了許多令人興奮的可能性，無論是添加交互性還是與第三方軟件集成。根據您的技能水平和偏好，您可以通過多種方式將其添加到您的頁面中。

同時，JavaScript可以引入錯誤，並且是頁面性能的重要因素。因此，必須謹慎地將JavaScript添加到WordPress頁面。

如果您在與JavaScript相關的性能問題上掙扎，WP Rocket可以幫助您輕鬆有效地解決它們。另外，它還提供了許多其他功能來加快您的網站。立即獲取WP Rocket，嘗試無風險14天！