---
description: 了解如何在您的 WordPress 網站上安裝網路聊天小工具。
title: 在 WordPress 上安裝網站聊天小工具
image: https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2F3f43c48b21b24f4e8b02b100c0c8fab0
---

[新的🔥 搶先試試 WhatsApp Business Calling API（開放式測試版）！![arrow-icon](https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2Fe43213a7a9314673bd8d2060c25f9b87)](/tw/whatsapp-business-calling-api)

幫助我... ⌘ 

1. [All Collections >](/tw/help)
2. [ 頻道 >](/tw/help/channels)
3. [ 網站聊天小工具 >](/tw/help/website-chat-widget)
4. 在 WordPress 上安裝網站聊天小工具

# 在 WordPress 上安裝網站聊天小工具

![Avatar](https://assets2-proxy.respond.io/ph8r57dk1q9w/7tin8k9c1emscQGOhIuNbC/0ed3f91c8580c4e5dfa90f035355122e/Petrina_Jo_avatar.svg)

JQ Lee

· 28 Aug 2025

4 分鐘

在您的 WordPress 網站上新增網路聊天小工具是一個快速且簡單的過程。 它不需要任何編碼技能或技術知識。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/3je9y7R0f3NgEmslRx5Q6F/b2012551e43f584e0307aecd2fa23d0d/word-press-logo.png?fm=jpg&q=80&w=500) 

## 安裝設定

為了在 WordPress 上安裝網路聊天小工具，您需要以下內容：

* 造訪您的網站的 WordPress 儀表板。
* 您的網路聊天小工具的程式碼片段。

如果您還沒有代碼片段，您將在創建 Respond.io [網站聊天小工具](https://respond.io/tw/help/website-chat-widget/website-chat-widget-overview) 或使用 [Facebook 聊天插件](https://respond.io/tw/help/facebook-messenger/facebook-chat-plugin) 為 [Facebook Messenger](https://respond.io/tw/help/facebook-messenger/facebook-messenger-overview) 時生成一個。

> 如果您已在 respond.io 平台上連接頻道，並且需要檢索生成的程式碼片段，請按照此處 [的說明進行操作](https://respond.io/tw/help/website-chat-widget/website-chat-widget-overview#finding%5Fthe%5Fwebsite%5Fchat%5Fwidget%5Fcode%5Fafter%5Fconnecting%5Fthe%5Fchannel)。

為了成功安裝，請確保填寫了您的網站網域。 有兩種方法可以解決這個問題。

轉到 respond.io **設定** \> 選擇 **頻道** \> 選擇你的網站聊天頻道 > 點擊配置 > 添加網站域名。 

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/1e7uaH6kDm1O7pGveCSLtj/cd6e069ed2d3ba023349b508560e3fab/screen-shot-2023-02-14-at-7-47-59-pm.png?fm=jpg&q=80&w=640) 

轉到 respond.io 設定 > 選擇 **增長小部件** \> 點擊要添加到網站的小部件 > 在 **常規** 開關中，將你的網站域名添加到 **網站域名** 欄位。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/3p3pQU8wHpzk061bqvS0Tr/65706ba2cdd4a08d5972ca1c7f0fe11f/chat-widget-settings.png?fm=jpg&q=80&w=640) 

## 在 WordPress 上安裝

**步驟 1：登入 WordPress**

導航至您網站的 WordPress 管理儀表板並登入。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/7BEtXv2z3DbKUr6hji7TOm/aeb0a76500168de0c4db1758459f36d4/install-webchat-on-word-press.png?fm=jpg&q=80&w=640) 

**第 2 步：導覽至插件頁面**

在左側導覽面板中，點選 **外掛程式**。 在外掛頁面上，按下頁面頂部的藍色 **新增** 按鈕。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/4yyIZmSrxmxdrhKGl8VcOl/b9881e62aab33064babb824daffbfe66/install-webchat-on-word-press-2.png?fm=jpg&q=80&w=640) 

**步驟 3：新增插件**

使用搜尋欄，搜尋 **WPCode** 外掛程式。 您將在搜尋結果頁面上看到許多可用的選項，但在本教學中，我們將使用 WPCode 的 "插入頁首和頁尾" 外掛程式。 按下 **立即安裝** 按鈕並確保啟動插件以使用它。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/5GGHqfES2lXgv5NzIoFz1P/15f02cef289ef90f490c4aecd1601ce7/add_new_plugin.png?fm=jpg&q=80&w=640) 

**步驟 4：開啟頁首和頁尾控制台**

從左側導覽選單中，按一下程式碼片段，然後從子選單中選擇 **頁眉 & 頁腳** 。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/2DwpPlV3Td8AqC1JJByNz0/7806704ac1df123f86c8a1ecbe5a5afb/Screenshot_2025-04-09_at_5.34.35_PM.png?fm=jpg&q=80&w=640) 

**步驟 5：新增即時聊天腳本**

從 respond.io 複製您的外掛程式腳本並將其貼到頁首和頁腳控制台頁面的 **頁腳腳本** 區域中。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/Ian351FEXVFMTGKlYGxmH/861c265623900ca5302d72ea4a4606ed/wpcode-live_chat_script.png?fm=jpg&q=80&w=640) 

貼上腳本後，點擊頁面底部的藍色 "**儲存**" 按鈕。

**完畢！**

打開網站並查看聊天插件。 您會在右下角找到它。 現在您的網站訪客可以輕鬆地與您聊天。 如果您使用了從 respond.io 平台產生的程式碼片段，您將能夠從平台管理對話並更新小工具的外觀。

> 聊天小工具現在在您的網站上處於活動狀態！

## 識別登入用戶

> 本節僅適用於您的網站具有使用者登入功能的情況。

**步驟 1：登入 WordPress 帳戶**

導航至您網站的 WordPress 管理介面並登入。

**第 2 步：開啟主題頭文件**

從左側導覽功能表中，點選 **外觀** 並選擇 **主題檔案編輯器**。 繼續選擇 **主題標題** 檔案。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/64VlcD24OVD9CUaFiK9U5B/91eb153aabead2673c1674395a0605a1/identify-logged-in-users.png?fm=jpg&q=80&w=640) 

**步驟 3：新增檢索到的使用者 ID 和姓名代碼**

複製下面的範例程式碼並將其貼上到主題頭檔中。 貼上程式碼後，點擊頁面底部的 **更新檔案** 按鈕。

> 下面的範例程式碼是從 WordPress 取得使用者 ID、名字和姓氏。 如果您想獲得其他聯繫字段，請隨意修改。

```html
<?php 
	$user_info = get_userdata(get_current_user_id());
？>

<script type="text/javascript">
	窗口。$wp_ID = "<?php echo $user_info->ID; ？>";
	視窗。$wp_firstname = "<?php echo $user_info->first_name; ？>";
	視窗。$wp_lastname = "<?php echo $user_info->last_name; ？>";
</script>
```

\`

**步驟 4：開啟頁首和頁尾控制台**

從左側導航選單中，點選 **設定** 並從設定的子選單中選擇 **頁眉 & 頁腳** 外掛。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/7gZgsdh0AM40EiyW1iCfQR/a5102c94de84f92388de60fe9b6f3602/wpcode-open_console.png?fm=jpg&q=80&w=640) 

**步驟 5：新增識別登入使用者腳本**

複製下面的範例程式碼並將其貼上到頁首和頁腳控制台頁面的 **頁腳腳本** 區域中。 請注意， **辨識登入使用者腳本** 必須放在 **即時聊天腳本**上方。

> 下面的範例程式碼使用使用者 ID 作為標識符，並傳遞名字和姓氏。 如果您想獲取其他聯絡字段，請隨意修改。

```html
<script>  
      window.\_\_respond\_settings = {  
    	identifier: $wp\_ID,  
        firstName: $wp\_firstname,  
        lastName: $wp\_lastname,    
      };  
</script>
```

貼上腳本後，點擊頁面底部的藍色 "**儲存**" 按鈕。

**完畢！**

打開網站並查看聊天插件。 可以識別您 WordPress 的登入使用者。 一旦傳遞的標識符與現有聯絡人匹配，當前對話就會恢復。

## 常見問題和疑難排解

### 

WPCode

如果您正在使用 WordPress 快取外掛（例如 WPCode），請按照以下步驟操作，以便小工具正確顯示。

**禁用 JavaScript 的資料最小化功能**

轉到 **WordPress 設定** \> 選擇 **WPCode** \> 在 WPCode 頁面上，選擇 **檔案優化** 標籤 > 取消勾選 **最小化 JavaScript 檔案**。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/7u1DdW6UTB1nHdrE0QlgIB/f3412a5f90adf94cab31a67c4a42d108/css-and-js-files-minified-source-wp-rocket.png?fm=jpg&q=80&w=640) 

**將我們的小部件域加入到 Javascript 排除檔中**

`https://cdn.respond.io/webchat/widget/(.*).js`

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/3TcEXrKx1zKh7IhvT4G7Cp/6308494d1b35b918e250d3ebc387b87e/wp-rocket-javascript-excluded-files.png?fm=jpg&q=80&w=640) 

> 儲存後，建議清除 WordPress 中的快取。

分享這篇文章

[![Telegram](https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2F44daca77a4844f0c8fd29040ddeba057?width=22)](https://api.whatsapp.com/send?text=https://respond.io/help/website-chat-widget/install-on-wordpress)[![Facebook](https://assets1-proxy.respond.io/api/v1/image/assets/11f7a662b80a4675973850b067c01fa5/fff57eeb01160bc604392f519b4f3461ca16f0fa1b6a587b20b142cdf1ad0ba7?placeholderIfAbsent=true&width=22)](https://www.facebook.com/sharer/sharer.php?u=https://respond.io/help/website-chat-widget/install-on-wordpress)[![Linkedin](https://assets1-proxy.respond.io/api/v1/image/assets/11f7a662b80a4675973850b067c01fa5/7aaf8d87b5410844d83e06a4ed663e4f551b8c5ef51dbb20a8ff064a1eed9a0f?placeholderIfAbsent=true&width=22)](https://www.linkedin.com/sharing/share-offsite/?url=https://respond.io/help/website-chat-widget/install-on-wordpress)[![Twitter](https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2F4e03e02422a94e8eab9b8b41457c2371?width=22)](http://twitter.com/share?url=https://respond.io/help/website-chat-widget/install-on-wordpress)

## 

相關文章

* [在 Squarespace 上安裝網站聊天小工具了解如何在 Squarespace 網站上安裝網路聊天小工具。 ](/tw/help/website-chat-widget/install-on-squarespace)
* [在 Joomla 上安裝網站聊天小工具了解如何在您的 Joomla 網站上安裝網路聊天小工具。 ](/tw/help/website-chat-widget/install-on-joomla)
* [在 Wix 上安裝網站聊天小工具了解如何在您的 Wix 網站上安裝網路聊天小工具。 ](/tw/help/website-chat-widget/install-on-wix)
* [在 Shopify 上安裝網站聊天小工具了解如何在您的 Shopify 商店上安裝網路聊天小工具。 ](/tw/help/website-chat-widget/install-on-shopify)
* [網站聊天小工具快速入門將 respond.io 網站聊天小工具加入您的網站。 ](/tw/help/website-chat-widget/website-chat-widget)

找不到您想要的東西？ 🔎

[聯繫支持](/tw/contact-us)

2025-12-05T04:04:43.626Z

help

```json
[{"@context":"https://schema.org","@type":"TechArticle","articleBody":"了解如何在您的 WordPress 網站上安裝網路聊天小工具。","author":{"@type":"Person","image":"https://assets2-proxy.respond.io/ph8r57dk1q9w/7tin8k9c1emscQGOhIuNbC/0ed3f91c8580c4e5dfa90f035355122e/Petrina_Jo_avatar.svg","name":"JQ Lee","url":"https://respond.io/tw/author"},"dateCreated":"2023-03-01T07:06:53.000Z","dateModified":"2025-08-28T08:51:51.275Z","datePublished":"2023-03-01T07:06:53.000Z","headline":"在 WordPress 上安裝網站聊天小工具","image":"https://assets2-proxy.respond.io/ph8r57dk1q9w/3je9y7R0f3NgEmslRx5Q6F/b2012551e43f584e0307aecd2fa23d0d/word-press-logo.png","mainEntityOfPage":"https://respond.io/tw/help/website-chat-widget","publisher":{"@type":"Organization","logo":"https://respond.io/favicon/favicon.svg","name":"respondio"},"thumbnailUrl":"https://assets2-proxy.respond.io/ph8r57dk1q9w/3je9y7R0f3NgEmslRx5Q6F/b2012551e43f584e0307aecd2fa23d0d/word-press-logo.png","url":"https://respond.io/tw/help/website-chat-widget/install-on-wordpress"},{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Help","item":"https://respond.io/tw/help","position":1},{"@type":"ListItem","name":"頻道","item":"https://respond.io/tw/help/channels","position":2},{"@type":"ListItem","name":"網站聊天小工具","item":"https://respond.io/tw/help/website-chat-widget","position":3},{"@type":"ListItem","name":"在 WordPress 上安裝網站聊天小工具","item":"https://respond.io/tw/help/website-chat-widget/install-on-wordpress","position":4}]}]
{
  "@context": "http://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "WPCode",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>If you are using a WordPress cache plugin such as WPCode, take these steps so that the widget appears correctly.</p><p><b>Disable data-minify feature for JavaScript</b></p><p>Go to <b>Wordpress Settings</b> > Select <b>WPCode</b> > On WPCode page, select <b>File Optimization</b> tab > untick <b>Minify JavaScript files</b></p> <p><b>Add our widget domain to the Javascript Excluded Files</b></p><p><code>https://cdn.respond.io/webchat/widget/(.*).js</code></p> <blockquote><p>Once saved, it is recommended to clear the cache in WordPress.</p></blockquote><p></p>"
      }
    }
  ]
}
```
