是否可以将 React Js 代码集成到现有的 WordPress 网站中？

Question

我正在开发一个项目，其中使用 React Js 创建了一个 ChatBot。现在，我想在现有的 WordPress 网站中实施/部署我的 ChatBot。我使用 iframe 标签来显示我的 ChatBot，但问题是 iframe 没有完美地显示我的 ChatBot，因为它需要完整的网页，这会导致问题。谁能告诉我如何在 Wordpress 网站中实施或部署我的 ChatBot？我只希望 WordPress 网站（每个单页）中的 ChatBot 具有相同的大小、相同的位置。请给我建议解决方案。

• 我尝试了很多解决方案，例如我使用 000Webhost 通过运行此命令来部署 ChatBot 的构建文件

  npm run build

  ，然后我尝试在 iframe 中使用 000Webhost url。
• 我还探索了它的其他解决方案。我发现使用 WP-API 会非常有帮助，但我发现 WP REST API 只有 JWT 身份验证，我不知道如何在 WordPress 网站中正确使用它来部署我的 ChatBot。 我正在等待您的友好回复。 谢谢。

Answer 1

如果您的 ChatBot 是用 JavaScript 开发的，并且您希望将其集成到您的 WordPress 网站而不使用 iframe，您可以遵循前面提到的类似方法，并进行一些调整以适应基于 JavaScript 的解决方案。操作方法如下：

第 1 步：准备您的 JavaScript ChatBot

确保您的 JavaScript ChatBot 已准备好部署。确保您拥有 ChatBot 所需的 JavaScript 代码、HTML 结构和 CSS 样式。

第 2 步：创建自定义 WordPress 插件

1. 在您的 WordPress 目录中，导航至

   wp-content/plugins

   文件夹。

2. 为您的自定义插件创建一个新文件夹，例如“chatbot-integration”。

3. 在此文件夹中，创建一个 PHP 文件，例如“chatbot-integration.php”。

4. 在 PHP 文件中，您可以使用

   wp_enqueue_script

   函数将 ChatBot 脚本排入队列。例如：

     ```phpenter code here
       function enqueue_chatbot_scripts() {
         wp_enqueue_script('chatbot-script', 'path-to-your-chatbot.js', array(), '1.0', true);
       }
       add_action('wp_enqueue_scripts', 'enqueue_chatbot_scripts');
   
   ```
   

5. 在 JavaScript 代码中，您可以动态创建 ChatBot 容器并将其插入到 WordPress 页面中。例如：

     // Create a ChatBot container
     const chatbotContainer = document.createElement('div');
     chatbotContainer.id = 'chatbot-container';
   
     // Append the ChatBot container to the body or any desired location
     document.body.appendChild(chatbotContainer);
   
   

6. 确保向您的插件添加样式，以根据需要在 WordPress 网站上放置 ChatBot 容器。

第 3 步：激活您的插件

从 WordPress 管理仪表板激活您的自定义插件。转到“插件”并激活“ChatBot 集成”（或您的插件的名称）以将 ChatBot 添加到您的网站。

通过为基于 JavaScript 的 ChatBot 创建自定义 WordPress 插件，您可以确保它在每个页面上一致且无缝地集成到您的 WordPress 网站中。您可以控制 ChatBot 容器的位置和样式。

如果您的 JavaScript ChatBot 需要额外的功能或外部数据，您可以进一步自定义您的插件来处理 API 调用和交互。这种方法可以让您在将 ChatBot 集成到 WordPress 网站时保持灵活性。