如何在 WordPress 頁面和文章中加入 JavaScript：初學者指南 - OpenByt

JavaScript 是一種功能強大的程式語言，可讓您在網站上加入互動功能。無論是動態計算機、視訊播放器，或是按下按鈕時彈出的警示方塊，JavaScript 都能讓您的網站更具吸引力和功能性。在這份全面的指南中，我將教導您如何安全有效地將 JavaScript 新增到 WordPress 頁面和文章中，並涵蓋各種方法以符合不同的需求。

您可以在 WordPress 中使用 JavaScript 嗎？

是的，您可以在 WordPress 中使用 JavaScript！JavaScript 常用於增強使用者體驗 (UX)，使網站更具互動性和回應性。您可以使用 JavaScript 來建立彈出式警示、在使用者移動元素時顯示訊息，或甚至新增互動工具，例如計算機或自訂表單驗證。雖然在 WordPress 中加入 JavaScript 相對簡單，但如果您對 HTML 和 CSS 有基本的了解，就能幫助您充分運用 JavaScript。

提示:如果您剛開始使用 JavaScript，請不要擔心某些詞彙會讓您感到吃力。一步一步來，很快您就能像專家一樣加入 JavaScript！

在 WordPress 中加入 JavaScript 前的注意事項

在您將 JavaScript 加入 WordPress 網站之前，請記住幾件重要的事情。JavaScript 錯誤有可能會破壞您的網站，因此最好謹慎行事，並遵循以下步驟：

備份您的網站:在新增任何自訂程式碼之前，請務必先備份最新的網站備份。這包括資料庫（儲存您的文章、頁面、設定和組態）和檔案（如圖片、主題和外掛程式）。外掛程式如 噴射背包 或手動備份可以幫助您保護您的工作。
- 個人說明:我不知道備份救了我多少次！這是你希望自己在出錯之前已經做過的事情之一。
使用子主題:子主題是您目前主題的複本，讓您可以在不影響原始程式碼的情況下自訂主題。如果您修改了主主題檔案，它們可能會在下次主題更新時被覆蓋。使用子主題也會讓您的修改更容易管理。
測試環境:建立一個測試環境，您可以在其中新增 JavaScript 程式碼，而不會有損壞您的即時網站的風險。服務如 本地由 Flywheel 提供 或暫存網站可以幫助您安全地測試變更。
- 快速提示:測試環境是您最好的朋友。它可以讓您在沒有風險的情況下進行實驗，因此您可以自由地犯錯、學習。

在 WordPress 中加入 JavaScript 的方法

有幾種方法可以在 WordPress 中加入 JavaScript，我將在此介紹最有效的幾種方法。您可以選擇最適合您特定需求的方法。

方法 1：使用外掛程式

如果您不習慣寫程式碼，或只是想要更簡單的解決方案，使用外掛將 JavaScript 加入 WordPress 網站是最簡單的選擇。

插入頁首和頁尾外掛程式:此外掛程式可讓您在 WordPress 的頁首和頁尾加入自訂程式碼，而無需修改主題檔案。
步驟:
1. 安裝並啟動 插入頁首和頁尾 插件。
2. 前往 設定 > 插入頁眉、頁尾 在您的 WordPress 面板中。
3. 您會看到兩個標有 標題中的腳本 和 腳本在頁尾.您可以在此貼上 JavaScript 程式碼。
例如，如果您要新增一個按鈕時彈出的確認方塊，請將下列程式碼貼到 標題中的腳本 節：

<script
  function myFunction() {
    var txt；
    if (confirm("Press a button!")){
      txt = 「您按了確定！」；
    } else {
      txt = 「您按了取消！」；
    }
    document.getElementById("demo").innerHTML = txt；
  }

此 JavaScript 程式碼會在按下特定按鈕時加入警示方塊，讓您與訪客互動。

使用範例:

想像一下，當有人點選「註冊」按鈕時，您想要顯示特殊訊息。使用外掛程式可輕鬆新增必要的 JavaScript，而無需碰觸任何主題檔案。

摘要:

優點:易於使用，無需編碼技能。
優點:彈性有限，如果加入太多指令碼，可能會產生效能問題。

真實談話:如果您剛開始使用，像這樣的外掛可以讓您省去很多麻煩。您不需要鑽研程式碼，照樣可以得到想要的結果！

挑戰:使用 Insert Headers and Footers 外掛程式，將簡單的 JavaScript 警示加入您的首頁。這將幫助您適應這個過程。

方法 2：直接在主題檔案中加入 JavaScript

您可以直接在主題檔案中加入 JavaScript，但要小心。如果您不熟悉程式碼，這種方法風險較大。最好還是使用子主題來防止您的變更在主題更新時被覆蓋。

建立自訂 JavaScript 檔案:

請在您的主題目錄中建立新檔案，並命名為 custom.js。
在此檔案中寫入 JavaScript 程式碼並儲存。
若要將此檔案連結至您的主題，請編輯您的 functions.php 檔案，並加入下列程式碼：

function custom_script_enqueue() {
    wp_enqueue_script( 'custom-js', get_template_directory_uri() .'/js/custom.js', array(), false, true )；
}
add_action( 'wp_enqueue_scripts', 'custom_script_enqueue' )；

此代碼片段將在所有網站頁面上載入您的自訂 JavaScript 檔案。

使用範例:

如果您要在每個網站頁面上新增自訂彈出訊息，請使用此方法在所有頁面上包含 JavaScript。

摘要:

優點:完全控制腳本，直接從您的主題載入。
優點:若主題更新，則有遺失變更的風險，需要編碼知識。

個人提示:當我開始在主題檔案中加入 JavaScript 時，我很快就了解到子主題的重要性。請務必使用子主題來保護您的作品不被覆寫！挑戰:建立一個子主題，並新增一個簡單的 JavaScript 檔案，在每個頁面上顯示警示。這將有助於您瞭解流程，並確保您的變更不受主題更新的影響。

方法 3：使用 WordPress 鉤子和函數

使用 WordPress 的鉤子和函式，您可以將 JavaScript 加入網站的特定部分，而無需直接編輯主題檔案。

使用 wp_enqueue_script() 函式:wp_enqueue_script() 函式會將自訂的 JavaScript 檔案加入您的 WordPress 主題。以下是方法：

function add_custom_js() {
    wp_enqueue_script( 'my-custom-js', get_template_directory_uri() .'/js/custom.js', array(), false, true )；
}
add_action( 'wp_enqueue_scripts', 'add_custom_js' )；

此方法可確保 JavaScript 檔案被正確載入，且不會與其他程式庫或主題衝突。

將 JavaScript 加入特定文章或頁面:您可以僅在特定文章或頁面中加入 JavaScript。請使用下列程式碼來完成此功能：

function add_custom_js_to_page() {
    if ( is_single( '1' ) ){ // 將 '1' 改為您的文章或頁面 ID
        ?>
            <script
                // 您的 JavaScript 程式碼
            </script
        <?
    }
}
add_action( 'wp_head', 'add_custom_js_to_page' )；

更換 1 與實際的文章或頁面 ID，JavaScript 只會新增到該頁面。

使用範例:

假設您在特定產品頁面上有一個特別促銷活動，並且想要加入只影響該頁面的 JavaScript，這個方法就可以讓您這麼做。

摘要:

優點:精確控制 JavaScript 的執行位置，防止程式碼衝突。
優點:需要熟悉 WordPress 鉤子，對初學者而言較為複雜。

快速故事:有一次，我需要在促銷期間為單一產品頁面添加倒數計時器。使用鉤子讓我可以在不影響網站其他部分的情況下，無縫地加入倒數計時器。

挑戰:使用 wp_enqueue_script() 函數，將 JavaScript 加入您網站上的特定頁面。嘗試加入倒數計時器或自訂訊息，讓頁面更具互動性。

方法 4：建立自訂外掛程式

如果您偏好將 JavaScript 程式碼獨立於主題之外，您可以建立自訂外掛程式來新增 JavaScript。

建立自訂外掛程式的步驟:

在 wp-content/plugins 目錄，建立一個名為 我的 Javascript 外掛程式.
在此資料夾中，建立一個新檔案，名稱為 my-javascript-plugin.php.
新增下列外掛程式標頭和 JavaScript 程式碼：

<script
        // 您的 JavaScript 程式碼

4.儲存並上傳此檔案至您的伺服器。現在您應該可以看到您的自訂外掛程式列在 WordPress 外掛程式 頁。

5.啟動外掛程式，您的 JavaScript 程式碼將會執行。 使用範例:

當您需要的 JavaScript 功能與特定主題無關時，這是最理想的選擇，因為您可能希望即使日後更換主題，該功能也能持續存在。

摘要:

優點:它將自訂 JavaScript 與主題分離，使其更具彈性和可攜性。
優點:需要一些外掛程式開發知識和較多的初始設定。

專業提示:建立您的外掛程式看似艱鉅，但卻是讓您的程式碼可以在不同主題或專案中重複使用的好方法。挑戰:製作一個簡單的自訂外掛，在您的網站上加入「Hello, World!這是熟悉外掛程式開發的好方法。

方法 5：在小工具中加入 JavaScript

若要在 widget 中加入 JavaScript，請遵循下列步驟：

導覽到 小工具 區段。
新增一個 自訂 HTML Widget 到您的側邊欄或頁尾。
使用 <script 標籤：

<script
  alert("Hello, this is a widget alert!")；

使用範例:

想要在側邊欄中加入歡迎訊息或一些有趣的互動嗎？將 JavaScript 加入 Widget 區域是最佳選擇。

摘要:

優點:快速輕鬆地將 JavaScript 新增至特定 widget 區域。
優點:範圍有限，可能不適合較大型的腳本。

挑戰:在您網站上的 widget 區域加入以 JavaScript 為基礎的歡迎訊息。這可讓您了解 widget 如何與自訂腳本搭配使用。

在頁尾加入 JavaScript

您也可以在 WordPress 網站的頁尾加入 JavaScript。最簡單的方法是使用主題 functions.php 檔案中的 wp_footer 鈎。

function add_js_to_footer() {
    ?>
    <script
        // 您的 JavaScript 程式碼
    
    <?
}
add_action( 'wp_footer', 'add_js_to_footer' )；

這可確保 JavaScript 最後才載入，從而提高網站速度，並防止出現文件物件模型 (DOM) 尚未就緒的問題。

使用範例:

在頁尾載入 JavaScript 對追蹤腳本（例如 Google Analytics）非常有用，因為可以確保它們不會影響主要內容的載入速度。

摘要:

優點:確保 JavaScript 在主要內容之後載入，以改善效能。
優點:它需要編碼知識，而且僅限於頁面載入後執行的腳本。

調試 WordPress 中的 JavaScript 錯誤

有時候，JavaScript 的表現可能不如預期。以下是如何在您的 WordPress 網站中除錯：

1.使用瀏覽器主控台:在網頁的任何地方按一下滑鼠右鍵，選擇檢查, 然後前往 控制台 標籤。在這裡，您會看到列出的任何 JavaScript 錯誤。

錯誤範例: Uncaught ReferenceError: myFunction 未定義.這表示函數遺失或命名不正確。

2.啟用腳本除錯:要在 WordPress 中啟用 JavaScript 的除錯功能，請在您的 wp-config.php file:

define('SCRIPT_DEBUG', true)；

3.停用外掛程式:如果您的 JavaScript 未如預期般運作，請停用所有外掛程式，看看是否有外掛程式造成衝突。然後逐一重新啟動，找出罪魁禍首。

範例情境:外掛程式可能會覆寫您的 JavaScript 函式，導致意想不到的行為。

4.常見錯誤:

語法錯誤:檢查您的 JavaScript 程式碼，看看有沒有遺漏的分號、不匹配的大括號或錯字。
不正確的檔案路徑:確保 JavaScript 檔案的路徑正確，尤其是使用 wp_enqueue_script() 時。
載入訂單問題:JavaScript 依賴於 DOM 中尚未可用的元素，應該包裝在 DOMContentLoaded 或 window-onload 事件中。

document.addEventListener('DOMContentLoaded', function() {
  // 您的程式碼在此
});

真實案例:有一次，我花了數小時來除錯一個問題，卻發現我忘了將腳本包裝在 DOMContentLoaded 事件中，導致腳本在所需元素載入前就已執行。這是個教訓！

工具與資源

以下是一些在 WordPress 中使用 JavaScript 時可以幫助您的工具和資源：

Chrome 開發者工具:非常適合直接在瀏覽器中檢查元素和調試 JavaScript 程式碼。
JSFiddle / CodePen:在將 JavaScript 程式碼加入您的網站之前，請使用這些線上遊樂場來測試小段的 JavaScript 程式碼。
本地由 Flywheel 提供:一個建立本機 WordPress 環境的工具，讓您可以安全地測試 JavaScript。
WP 回滾:如果外掛程式更新破壞了您的 JavaScript，您可以使用 WP Rollback 回復到較早的版本。

快速提示:使用 JSFiddle 等工具快速實驗 JavaScript。它可以讓您避免在測試時破壞您的 WordPress 網站。

常見問題 (FAQ)

1.我可以只在特定頁面中加入 JavaScript 嗎？

您可以使用 WordPress 鉤子和條件標籤來將 JavaScript 加入特定頁面。例如，is_single() 可以針對個別文章。

2.如果我的 JavaScript 損壞了我的網站怎麼辦？

在新增自訂程式碼之前，請務必使用備份。如果發生錯誤，您可以將網站還原為工作狀態。

3.為什麼我的 JavaScript 無法運作？

檢查瀏覽器主控台是否有錯誤，確保已正確載入腳本，並確認與其他外掛程式或主題沒有衝突。

4.如何確保我的 JavaScript 不會影響可讀性？

確保 JavaScript 互動可透過鍵盤存取，並為螢幕閱讀器提供替代方案。避免使用 JavaScript，因為 JavaScript 會擾亂正常的頁面流程。

總結

總表:

方法	優點	優點
外掛程式	簡單，無需編碼	彈性有限、潛在衝突
主題檔案	全面控制，輕鬆整合	主題更新期間的風險
鉤子和函數	精確控制，減少衝突	需要編碼知識
自訂外掛程式	獨立於主題，靈活	需要外掛程式開發知識