type
status
slug
summary
date
tags
category
password
Text
AI summary
AI custom autofill
Multi-select
Status
URL
hashtag
勘误
标签
标题
类型
贴文
🪄
icon
您可以在此处查看我们将直接在我的 WordPress 网站上构建的工具示例：AI 故事生成器工具测试。
了解工具结构
在 WordPress 上创建 AI 工具涉及 3 个主要步骤。以下是如何创建此工具的详细说明：
1. 创建 WordPress 页面：
首先在托管 AI 工具的 WordPress 网站上创建一个新页面。该页面将是与该工具交互的用户界面。
2.添加HTML代码：
添加一些 HTML 代码来创建工具页面。这将是与 OpenAI API 通信的起点。
3. 实现WordPress功能：
您将添加一个自定义 WordPress 函数，该函数接收来自 HTML 表单的用户输入并将其发送到 OpenAI 的 API。该功能充当您的网站和 OpenAI 之间的桥梁，允许两者进行通信。
4. 连接OpenAI API：
WordPress 功能将与 OpenAI 的 API 连接，根据用户的提示生成文本。
获取 OpenAI API 密钥：
要使用 OpenAI 的任何模型，您必须首先获取 API 访问密钥。操作方法如下：
1）转到OpenAI 的 API 页面并单击“注册”按钮。
2）系统将提示您创建帐户。验证您的电子邮件以完成注册过程。
3）登录后，您可以在帐户仪表板下找到您的 API 密钥。
第1步：添加API调用功能
在此步骤中，我们将添加 PHP 函数，使我们的工具能够与 OpenAI API 进行通信。为此，我们将使用WordPress 中的WPCode插件。
什么是 WPCode 插件？
WPCode是一个 WordPress 插件，它提供了一种干净简单的方法来在您的网站上运行 PHP 代码片段。它消除了将自定义片段添加到主题
functions.php文件的需要。安装并激活代码片段插件
1）从 WordPress 仪表板中，转到“插件 > 添加新插件”。
2）在搜索栏中输入“ WPCode”
3）在搜索结果中找到该插件，然后单击“立即安装”，然后单击“激活”。
添加 OpenAI API 调用
激活插件后，请按照以下步骤添加 API 调用：
1）从 WordPress 仪表板中，导航至“代码片段> 添加新内容”。
2）在“标题”字段中，为新代码段命名，例如“OpenAI API 调用”。
3）将代码类型设置为PHP
4）在“代码”文本框中，您将输入 PHP 代码。下面是如何构造此代码的示例：
该代码定义了一个名为 的 PHP 函数，
openai_generate_text当使用操作向 WordPress 发出请求时，该函数将被执行openai_generate_text。该函数与 OpenAI 的 API 进行通信，根据用户提供的提示生成文本。
该函数首先从 POST 请求中检索用户提供的提示：
$prompt = $_POST['提示'];
代码的最后两行将函数与
wp_ajax_openai_generate_text和操作挂钩，以便当向 WordPress 发出包含wp_ajax_nopriv_openai_generate_text该操作的请求时执行该函数。openai_generate_text发布代码片段
现在，请确保将此脚本设置为在任何地方运行并发布它。
第2步：创建工具页面
现在我们已经准备好了 API 函数，让我们在 WordPress 网站上创建一个新页面，在其中添加我们的 AI 工具。
我们将使用Elementor（一种流行的 WordPress 页面构建器）来创建页面。
注意：您可以使用任何您想要的构建器。重要的是能够向页面添加自定义 HTML 代码。
安装并激活 Elementor
1）从 WordPress 仪表板中，转到“插件 > 添加新插件”。
2）在搜索栏中，输入“ Elementor”。
3）在搜索结果中找到该插件，然后单击“立即安装”，然后单击“激活”。
使用 Elementor 创建新页面
1）从 WordPress 仪表板导航至“页面 > 添加新内容”。
2）输入页面的标题，例如“AI Tool”。
3）单击“使用 Elementor 编辑”开始设计页面。
在 Elementor 中添加自定义 HTML
要在 Elementor 中添加自定义 HTML，您需要将 HTML 代码小部件拖放到页面中。按着这些次序：
1）在 Elementor 编辑器页面上，您会在左侧看到一个带有几个图标的侧边栏。单击看起来像网格或矩阵的那个。
2）这将打开您可以使用的小部件列表。查找“HTML”小部件
您可以在此处粘贴 AI 工具的自定义 HTML 代码。在我们的例子中，它将包括输入字段、按钮和输出结果文本区域的代码。
基本示例：
为了让您更轻松，我创建了完整的 HTML、JS 和 CSS 代码，以便您可以直接复制并粘贴。我们到了：
顺便一提！我用 ChatGPT 在大约 5 分钟内生成了这段代码！
请随意使用此代码作为您想要创建的任何工具的基线。例如，如果您想更改输入字段中的占位符文本，请调整此行：
但这还不是全部。您甚至可以将此代码输入 ChatGPT 并要求其为您进行修改。让我们看一个实际的例子：
提示：“将输入框更新为下拉列表，我可以在其中选择以下选项之一：（爱、帮助、友谊）”
运行此提示后，ChatGPT 生成的内容如下：
像 ChatGPT 这样的人工智能模型的可能性几乎是无限的，这就是为什么学习如何与这些模型交互是当今最受欢迎的技能之一，并且在未来也将继续如此。
保存您的页面！
粘贴代码后，单击“更新”以保存更改。
完美的！您现在已经为 AI 工具创建了一个页面并添加了必要的 HTML 元素。下一步将涉及将此页面连接到我们的 OpenAI API 函数。
第3步：将页面与API函数连接
现在我们已经设置了 API 函数和工具页面，是时候连接它们了。这就是JavaScript (JS) 代码的用武之地。
这段 JavaScript 代码的作用是什么？
此 JS 代码在“生成故事！”上设置一个事件侦听器 按钮，以便当单击该按钮时，它会收集用户选择的主题并使用 AJAX 将其发送到我们的 OpenAI API 函数。
生成故事时，它会显示一个加载旋转器。返回故事后，它会隐藏加载微调器并将其显示在结果文本区域中。
如果任何时候出现错误，它都会在结果文本区域中显示错误消息。
该代码还在“复制”按钮上设置了一个事件侦听器，以便在单击时将生成的故事复制到剪贴板。
添加 JavaScript 代码
以下是您需要添加的 JavaScript 代码：
这里你应该关注的是提示：
就我而言，我只是使用了一个非常基本的提示来帮助您理解这个概念。
根据您的情况，并根据您的 AI 工具逻辑，您将添加自定义提示；例如，假设我们正在创建一个域名生成器工具。您将使用如下提示：
“为有关 [主题] 的网站生成 10 个域名建议的列表，并为每个建议提供简要说明。”
如果您想更专业，请让我给您一个使用人工智能生成域名的高级秘密强力提示：
“请生成 10 个专为[利基]利基量身定制的原创和创意域名，重点关注其主要概念和目标受众。您的回应应优先考虑有效吸引[利基]受众注意力并代表其关键主题的域名。对于每个域名，提供简短的解释（1-2 句话），强调其与利基市场的相关性。确保每个域名符合以下标准：
1. 品牌相关性：与利基市场及其中心概念保持牢固的联系。
2. 令人难忘：将域名设计得引人入胜、易于记忆且拼写熟悉。
3. 简洁：每个域名的长度应保持在 6-14 个字符之间，以便于输入和记忆。
4. 简单：避免使用连字符和数字以获得更清晰的外观。
5. 关键词合并：如果可能的话，利用相关的利基关键字来改进搜索引擎优化。
6. 发音：确保每个域名在口头或“无线电友好”时易于理解。
7. 域名扩展名：在适用的情况下优先考虑 .com、.net、.org 和 .ai 扩展名。
8. 合法性：不侵犯现有商标或品牌。您的回应应该表现出灵活性和创造力，同时保持对[利基]利基市场的专注，为在该市场建立品牌奠定坚实的基础。
[利基]：您的回应应该表现出灵活性和创造力，同时保持对[利基]利基市场的专注，为在该市场建立品牌奠定坚实的基础。
[利基]：您的回应应该表现出灵活性和创造力，同时保持对[利基]利基市场的专注，为在该市场建立品牌奠定坚实的基础。[利基]：”
如果您有兴趣访问我的完整电源提示库，请在此处查看。
无论如何，我们的想法是将您的提示替换为您的目标，然后您就完成了！
将此 JavaScript 代码添加到您的工具页面：
1）再次打开工具页面的 Elementor 编辑器。
2）将“HTML”小部件拖放到您的页面上，就像我们之前所做的那样。
3）将 JavaScript 代码粘贴到“HTML 代码”框中。
4）单击“更新”保存您的更改。
或者您可以将代码粘贴到我们之前使用过的同一个 HTML 代码框中。
就是这样！您的工具页面现已连接到 OpenAI API 功能，用户应该能够根据他们选择的主题使用该工具。
优化我们的工具
一旦我们的工具启动并运行，这个过程就不会停止。是时候进行优化了。范围包括从完善 UI（用户界面）到添加验证码等安全措施。
像 ChatGPT 这样的现代人工智能的迷人之处之一是它的多功能性和适应性。例如，您可以要求 ChatGPT 优化代码、更改用户界面或修改该工具的任何其他方面。
假设您想要更改工具的用户界面。您可以简单地将此请求提供给 ChatGPT，例如：
“嘿，你能帮我为我的工具设计一个更干净、更专业的界面吗？”
ChatGPT 将提供建议，甚至根据您的需求定制一套全新的 HTML/CSS 代码。
添加验证码等安全措施也可以是一项重大改进，因为它有助于保护您的工具免受机器人攻击并确保真正的用户交互。您可以在线找到大量插件和资源，以将验证码添加到您的 WordPress 网站。
最后，请记住，根据用户反馈持续优化和更新您的工具是使您的工具更加用户友好和成功的关键。
作者：哈桑·阿布·哈桑