OpenByt - 您免費 WordPress 知識的終極來源

如何在 WordPress 頁面和文章中加入 JavaScript：新手指南

開啟

JavaScript is a powerful programming language that allows you to add interactive features to your website. Whether it’s a dynamic calculator, a video player, or an alert box that pops up when a button is clicked, JavaScript helps make your website more engaging and functional. In this comprehensive guide, I’ll walk you through how to add JavaScript to your WordPress pages and posts safely and effectively, covering various methods to suit different needs.

您可以在 WordPress 中使用 JavaScript 嗎？

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

提示: If you’re starting, don’t worry if some terms seem overwhelming. Take it one step at a time, and soon, you’ll be adding JavaScript like a pro!

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

Before you add JavaScript to your WordPress website, remember a few essential things. JavaScript errors can potentially break your site, so it’s always best to proceed with caution and follow these steps:

  1. 備份您的網站:在新增任何自訂程式碼之前，請務必先備份最新的網站備份。這包括資料庫（儲存您的文章、頁面、設定和組態）和檔案（如圖片、主題和外掛程式）。外掛程式如 噴射背包 或手動備份可以幫助您保護您的工作。
    • 個人說明: I can’t tell you how many times a backup has saved me! It’s one of those things you wish you had done before something went wrong.
  2. 使用子主題:子主題是您目前主題的複本，讓您可以在不影響原始程式碼的情況下自訂主題。如果您修改了主主題檔案，它們可能會在下次主題更新時被覆蓋。使用子主題也會讓您的修改更容易管理。
  3. 測試環境:建立一個測試環境，您可以在其中新增 JavaScript 程式碼，而不會有損壞您的即時網站的風險。服務如 本地由 Flywheel 提供 或暫存網站可以幫助您安全地測試變更。
    • 快速提示:測試環境是您最好的朋友。它可以讓您在沒有風險的情況下進行實驗，因此您可以自由地犯錯、學習。

在 WordPress 中加入 JavaScript 的方法

There are several methods to add JavaScript to WordPress, and I’ll cover the most effective ones here. You can choose the method that best suits your specific needs.

方法 1：使用外掛程式

If you’re not comfortable writing code or just want a simpler solution, adding JavaScript to your WordPress site using a plugin is the easiest option.

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

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

使用範例:

Imagine you want to display a special message when someone clicks on a “Sign Up” button. Using a plugin makes it easy to add the necessary JavaScript without touching any theme files.

摘要:

真實談話: If you’re starting, plugins like this can save you a lot of headaches. You don’t need to dive into code; you can still get the desired results!

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

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

You can add JavaScript directly to your theme files, but be careful. This method is riskier if you’re unfamiliar with the code. It is always better to use a child theme to prevent your changes from being overwritten during theme updates.

建立自訂 JavaScript 檔案:

  1. Please create a new file in your theme’s directory and name it custom.js.
  2. 在此檔案中寫入 JavaScript 程式碼並儲存。
  3. 若要將此檔案連結至您的主題，請編輯您的 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，這個方法就可以讓您這麼做。

摘要:

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

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

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

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

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

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

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

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

This is ideal when you want a piece of JavaScript functionality that isn’t tied to a specific theme—maybe you want it to persist even if you change your theme later.

摘要:

專業提示: Creating your plugin may seem daunting, but it’s a great way to make your code reusable across different themes or projects.挑戰: Create a simple custom plugin that adds a “Hello, World!” alert to your site. This is a great way to get familiar with plugin development.

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

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

  1. 導覽到 小工具 區段。
  2. 新增一個 自訂 HTML Widget 到您的側邊欄或頁尾。
  3. 使用 <script 標籤：
<script
  alert("Hello, this is a widget alert!")；

使用範例:

想要在側邊欄中加入歡迎訊息或一些有趣的互動嗎？將 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）非常有用，因為可以確保它們不會影響主要內容的載入速度。

摘要:

調試 WordPress 中的 JavaScript 錯誤

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

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

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

define('SCRIPT_DEBUG', true)；

3.停用外掛程式: If your JavaScript isn’t working as expected, disable all plugins to see if one is causing a conflict. Then, reactivate them one by one to find the culprit.

4.常見錯誤:

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

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

工具與資源

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

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

常見問題 (FAQ)

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

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

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

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

3. Why isn’t my JavaScript working?

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

4. How do I make sure my JavaScript doesn’t affect accessibility?

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

總結

總表:

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