在這篇文章中，我將教你如何5分鐘創建 WordPress 人工智能工具，建立Wordpress Chatgpt AI 插件是大趨勢
為什麼創建線上人工智能工具？
在創新和自動化驅動的時代，在線工具不僅僅是一種趨勢。它們是多方面的資產，可以增強網站的價值、功能和吸引力。以下是您可能需要考慮創建在線工具並將其添加到您的網站的原因：
1.獲得更多流量：
- 參與度：在線工具，尤其是那些由人工智能驅動的工具，可以吸引和吸引用戶，使他們在您的網站上花費更多時間。
- SEO 的好處：獨特的交互式內容可以提高網站的搜索引擎排名，帶來更多的自然流量。
- 可分享性：如果您的工具提供價值，用戶就更有可能在社交媒體上分享它，從而進一步擴大您的影響力。
2. 銷售流程獲取商機 (Leads)：
- 捕獲信息：需要用戶輸入或註冊的工具可以幫助您捕獲有價值的信息，例如電子郵件地址。
- 細分：通過了解訪問者如何使用您的工具，您可以細分受眾以進行更個性化的營銷。
- 建立信任：免費或試用提供有價值的工具可以培養信任和忠誠度，將訪問者轉化為長期客戶或訂閱者。
3. 獲得收入：
- 訂閱模式：您可以限制對高級功能的訪問，為不同的用戶需求提供分層訂閱模式。
- 廣告收入：如果該工具吸引了大量用戶群，您可以通過有針對性的廣告獲利。
- B2B 合作夥伴關係：您的工具可能會吸引對白標解決方案或協作感興趣的商業客戶。
創建人工智能工具主要步驟
在 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 連接，根據用戶的提示生成文本。
Wordpress Chatgpt AI 插件詳細教學
獲取 OpenAI API 密鑰
要使用 OpenAI 的任何模型，您必須首先獲取 API 訪問密鑰。操作方法如下：
- 轉到OpenAI 的 API 頁面並單擊“註冊”按鈕。
- 系統將提示您創建帳戶。驗證您的電子郵件以完成註冊過程。
- 登錄後，您可以在帳戶儀表板下找到您的 API 密鑰。
如需更深入的指導，您可以在此處查看我的有關 GPT-4 API 入門的完整指南
第1步：添加API調用功能
在此步驟中，我們將添加 PHP 函數，使我們的工具能夠與 OpenAI API 進行通信。為此，我們將使用WordPress 中的WPCode插件。
WPCode 插件是什麼？
WPCode是一個 WordPress 插件，提供了簡單方法在您的網站上運行 PHP 代碼片段。你無需自行把代碼片段添加到主題functions.php文件。
安裝並激活代碼片段插件
- 從 WordPress 儀表板中，轉到“插件 > 添加新插件”。
- 在搜索欄中輸入“ WPCode ”
- 在搜索結果中找到該插件，然後單擊“立即安裝”，然後單擊“激活”。
添加 OpenAI API 調用
激活插件後，請按照以下步驟添加 API 調用：
- 從 WordPress 儀表板中，導航至“代碼片段> 添加新內容”。
- 在“標題”字段中，為新代碼段命名，例如“OpenAI API 調用”。
- 將代碼類型設置為PHP
- 在“代碼”文本框中，您將輸入 PHP 代碼。下面是如何構造此代碼的示例：
function openai_generate_text() {
// Get the topic from the AJAX request
$prompt = $_POST[‘prompt’];
// OpenAI API URL and key
$api_url = ‘https://api.openai.com/v1/chat/completions’;
$api_key = ‘sk-XXX’; // Replace with your actual OpenAI API key
// Headers for the OpenAI API
$headers = [
‘Content-Type’ => ‘application/json’,
‘Authorization’ => ‘Bearer ‘ . $api_key
];
// Body for the OpenAI API
$body = [
‘model’ => ‘gpt-3.5-turbo’,
‘messages’ => [[‘role’ => ‘user’, ‘content’ => $prompt]],
‘temperature’ => 0.7
];
// Args for the WordPress HTTP API
$args = [
‘method’ => ‘POST’,
‘headers’ => $headers,
‘body’ => json_encode($body),
‘timeout’ => 120
];
// Send the request
$response = wp_remote_request($api_url, $args);
// Handle the response
if (is_wp_error($response)) {
$error_message = $response->get_error_message();
wp_send_json_error(“Something went wrong: $error_message”);
} else {
$body = wp_remote_retrieve_body($response);
$data = json_decode($body, true);
if (json_last_error() !== JSON_ERROR_NONE) {
wp_send_json_error(‘Invalid JSON in API response’);
} elseif (!isset($data[‘choices’])) {
wp_send_json_error(‘API request failed. Response: ‘ . $body);
} else {
wp_send_json_success($data);
}
}
// Always die in functions echoing AJAX content
wp_die();
}
add_action(‘wp_ajax_openai_generate_text’, ‘openai_generate_text’);
add_action(‘wp_ajax_nopriv_openai_generate_text’, ‘openai_generate_text’);
Show more +該代碼定義了一個名為 的 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
- 從 WordPress 儀表板中，轉到“插件 > 添加新插件”。
- 在搜索欄中，輸入“ Elementor ”。
- 在搜索結果中找到該插件，然後單擊“立即安裝”，然後單擊“激活”。
使用 Elementor 創建新頁面
- 從 WordPress 儀表板導航至“頁面 > 添加新內容”。
- 輸入頁面的標題，例如“AI Tool”。
- 單擊“使用 Elementor 編輯”開始設計頁面。
在 Elementor 中添加自定義 HTML
要在 Elementor 中添加自定義 HTML，您需要將 HTML 代碼小部件拖放到頁面中。按著這些次序：
- 在 Elementor 編輯器頁面上，您會在左側看到一個帶有幾個圖標的側邊欄。單擊看起來像網格或矩陣的那個。
- 這將打開您可以使用的小部件列表。查找“HTML”小部件
您可以在此處粘貼 AI 工具的自定義 HTML 代碼。在我們的例子中，它將包括輸入字段、按鈕和輸出結果文本區域的代碼。
基本示例：
順便一提！我用 ChatGPT 在大約 5 分鐘內生成了這段代碼！
請隨意使用此代碼作為您想要創建的任何工具的基線。例如，如果您想更改輸入字段中的佔位符文本，請調整此行：
但這還不是全部。您甚至可以將此代碼輸入 ChatGPT 並要求其為您進行修改。讓我們看一個實際的例子：
提示：“將輸入框更新為下拉列表，我可以在其中選擇以下選項之一：（愛、幫助、友誼）”
運行此提示後，ChatGPT 生成的內容如下：
像 ChatGPT 這樣的人工智能模型的可能性幾乎是無限的，這就是為什麼學習如何與這些模型交互是當今最受歡迎的技能之一，並且在未來也將繼續如此。
這項技能通常被稱為“即時工程”，是有效利用人工智能的一個關鍵方面。如果您有興趣了解有關此主題的更多信息，我鼓勵您查看我的即時工程綜合課程，請點擊此處。
保存您的頁面！
粘貼代碼後，單擊“更新”以保存更改。
完美的！您現在已經為 AI 工具創建了一個頁面並添加了必要的 HTML 元素。下一步將涉及將此頁面連接到我們的 OpenAI API 函數。
第3步：將頁面與API函數連接
現在我們已經設置了 API 函數和工具頁面，是時候連接它們了。這就是JavaScript (JS) 代碼的用武之地。
這段 JavaScript 代碼的作用是什麼？
此 JS 代碼在“生成故事！”上設置一個事件偵聽器 按鈕，以便當單擊該按鈕時，它會收集用戶選擇的主題並使用 AJAX 將其發送到我們的 OpenAI API 函數。
生成故事時，它會顯示一個加載旋轉器。返回故事後，它會隱藏加載微調器並將其顯示在結果文本區域中。
如果任何時候出現錯誤，它都會在結果文本區域中顯示錯誤消息。
該代碼還在“複製”按鈕上設置了一個事件偵聽器，以便在單擊時將生成的故事複製到剪貼板。
添加 JavaScript 代碼
以下是您需要添加的 JavaScript 代碼：
如果您有興趣訪問我的完整電源提示庫，請在此處查看。
無論如何，我們的想法是將您的提示替換為您的目標，然後您就完成了！
將此 JavaScript 代碼添加到您的工具頁面：
- 再次打開工具頁面的 Elementor 編輯器。
- 將“HTML”小部件拖放到您的頁面上，就像我們之前所做的那樣。
- 將 JavaScript 代碼粘貼到“HTML 代碼”框中。
- 單擊“更新”保存您的更改。
或者您可以將代碼粘貼到我們之前使用過的同一個 HTML 代碼框中。
就是這樣！您的工具頁面現已連接到 OpenAI API 功能，用戶應該能夠根據他們選擇的主題使用該工具。
優化我們的工具
一旦我們的工具啟動並運行，這個過程就不會停止。是時候進行優化了。範圍包括從完善 UI（用戶界面）到添加驗證碼等安全措施。
像 ChatGPT 這樣的現代人工智能的迷人之處之一是它的多功能性和適應性。例如，您可以要求 ChatGPT 優化代碼、更改用戶界面或修改該工具的任何其他方面。
假設您想要更改工具的用戶界面。您可以簡單地將此請求提供給 ChatGPT，例如：
“嘿，你能幫我為我的工具設計一個更乾淨、更專業的界面嗎？”
ChatGPT 將提供建議，甚至根據您的需求定制一套全新的 HTML/CSS 代碼。
添加驗證碼等安全措施也可以是一項重大改進，因為它有助於保護您的工具免受機器人攻擊並確保真正的用戶交互。您可以在線找到大量插件和資源來將驗證碼添加到您的 WordPress 網站。
最後，請記住，根據用戶反饋持續優化和更新您的工具是使您的工具更加用戶友好和成功的關鍵。
獎勵：將您的工具貨幣化！
請記住，WordPress 不僅允許您創建和共享內容；還允許您創建和共享內容。它還提供了將人工智能工具轉變為收入來源的可能性。無論您開發的是單個工具還是一整套人工智能解決方案，使用 WordPress 都有多種獲利途徑。這是詳細指南：
1. 會員模式：
您可以在網站上創建會員專區，提供對 AI 工具的獨占訪問權限。Promembership、MemberPress 等插件就是為此目的量身定制的。
- ProMembership：該插件非常適合創建分層會員資格，允許您根據訂閱計劃授予不同的訪問級別，從而為各種價位提供機會。
- MemberPress： MemberPress 以其用戶友好性而聞名，它允許您限制對特定頁面或整個內容類別的訪問。您可以設置一次性付款或定期訂閱以進行訪問。
2. 廣告和聯屬營銷：
如果您不想直接向用戶收費，您可以通過廣告或聯屬營銷來獲利。與相關行業合作夥伴合作，或使用適合您的受眾的廣告網絡。
3. 將工具構建為自由服務：
您可以作為自由職業者提供這項服務。
您的 WordPress 網站可以託管這些工具並充當組合，展示用戶對您的服務的期望。潛在客戶可以與您的工具進行交互，獲得有關您的工作質量和功能的第一手經驗。您還可以考慮提供案例研究或推薦來進一步證明您的專業知識。
4. 使用 WordPress 創建 SaaS：
結合上述策略，您基本上可以使用 WordPress 構建一個軟件即服務 (SaaS) 平台。利用各種插件創建無縫工作流程，集成支付網關，並為您的用戶提供專業、精緻的體驗。
通過 WordPress 將人工智能工具貨幣化不僅可行，而且回報豐厚。通過一系列適合不同工具和目標受眾的選項，您可以選擇最適合您的目標和用戶需求的方法。
