WordPressでChatGPTを使ってAIチャットボットを作る方法

WordpressでChatGPTを使ってAIチャットボットを作る方法 ChatGPT

チャットボットと聞くと、難しそうに感じるかもしれませんが、実はWordPressで簡単に作ることができます。しかも、ChatGPTという最先端のAI技術を使えば、人間らしい会話ができるチャットボットを作ることができます。この記事では、WordPressでChatGPTを用いたチャットボットを実現する方法を紹介します。あなたもWordPressとChatGPTで、自分だけのオリジナルチャットボットを作ってみませんか？

WordPressでChatGPTを用いたチャットボットを実現するには、以下の手順に従ってください。

OpenAI APIキーを取得する

OpenAI APIを使用するには、まずOpenAIのAPIキーが必要です。OpenAIのWebサイトで登録し、APIキーを取得してください。

  1. OpenAIのWebサイトにアクセスし、ログインまたはサインアップします。
  2. ログイン後、右上のアカウントアイコンをクリックし、「View API keys」を選択します。
  3. 「API keys」のページに遷移すると、「+ Create new secret key」ボタンが表示されます。これをクリックします。
  4. APIキーが生成されるので、コピーアイコンをクリックして、APIキーをコピーします。

コーディング

WordPressのfunctions.phpに以下のコードを追加します。「yout-api-key」の部分を取得したOpenAI APIキーに書き換えるだけで動作します。

function chatgpt_api_request($data) {
    $api_key = 'yout-api-key';
    $headers = array(
        'Content-Type: application/json',
        'Authorization: Bearer ' . $api_key
    );

    $url = 'https://api.openai.com/v1/chat/completions';
    $body = array(
        'messages'=>array(array('role'=> 'user', 'content'=> $data['prompt'])),
        'max_tokens' => $data['max_tokens'],
        'temperature' => $data['temperature'],
        'n' => $data['n'],
        'stop' => $data['stop'],
        'model'=>"gpt-3.5-turbo",
    );

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($body));
    $result = curl_exec($ch);
    curl_close($ch);
    return json_decode($result, true);
}

function chatgpt_response($query) {
    $prompt = $query;
    $max_tokens = 150;
    $temperature = 0.5;
    $n = 1;
    $stop = '';

    $data = array(
        'prompt' => $prompt,
        'max_tokens' => $max_tokens,
        'temperature' => $temperature,
        'n' => $n,
        'stop' => $stop
    );

    $response = chatgpt_api_request($data);
    return $response['choices'][0]['message']['content'];
    //return $response;
}

function chatgpt_shortcode($atts = [], $content = null) {
    $content .= '<script>
        jQuery(document).ready(function($) {
            $("#chatgpt-submit").click(function(event) {
                event.preventDefault();
                var message = $("#chatgpt-message").val();
                var html = \'<div class="chatgpt-message chatgpt-message-user"><div class="chatgpt-message-text">\'+message+\'</div></div>\';
                $("#chatgpt-messages").append(html);
                $.ajax({
                    url: "'.admin_url('admin-ajax.php').'",
                    type: "POST",
                    data: {
                        action: "chatgpt_ajax",
                        message: message
                    },
                    success: function(response) {
                        var html = \'<div class="chatgpt-message chatgpt-message-bot"><div class="chatgpt-message-text">\'+response+\'</div></div>\';
                        $("#chatgpt-messages").append(html);
                        $("#chatgpt-message").val("");
                    },
                    error: function (e) {
                      console.log(e + "エラーが起きました");
                    },
                });
            });
        });
    </script>';
    $content .= '<div id="chatgpt-wrapper" style="
    font-size:13px;
    width: 250px;
    display: inline-block;
    margin: auto;
    padding: 10px;
    position: fixed;
    bottom: 80px;
    right: 0;
    -ms-transform: translate(120%,0);
    z-index: 9999;
    color: #333;
    box-shadow: -3px 3px 20px -8px #666;
    background-color: #fff;">
        <div id="chatgpt-messages"></div>
        <form id="chatgpt-form" method="post">
            <input type="text" name="message" id="chatgpt-message" placeholder="質問を入力してください" style="font-size:13px;">
            <button type="submit" id="chatgpt-submit" style="margin-top:10px;">送信</button>
</form>
</div>';

return $content;
}

add_shortcode('chatgpt', 'chatgpt_shortcode');

function chatgpt_ajax() {
$query = $_POST['message'];
$response = chatgpt_response($query);
echo $response;
wp_die();
}
add_action('wp_ajax_chatgpt_ajax', 'chatgpt_ajax');
add_action('wp_ajax_nopriv_chatgpt_ajax', 'chatgpt_ajax');

ショートコードの追加

ChatGPTを使用したチャットボットを表示するには、ショートコードを追加する必要があります。以下のようにショートコードをheader.phpなど好きな場所に追記してください。

<?php echo do_shortcode('[chatgpt]'); ?>

以下のように記載すれば、管理者としてログインしているユーザに限り、チャットボットを表示させることができます。

<?php if (is_user_administrator()) :
//管理者の場合 ?>
<?php echo do_shortcode('[chatgpt]'); ?>
<?php endif; ?>

動作確認

WordPressを表示し、チャットボットが画面右下に表示されることを確認してください。ユーザがメッセージを入力すると、ChatGPTが自動的に返信します。

WordpressでChatGPTを使ってAIチャットボットを作る方法-1
WordpressでChatGPTを使ってAIチャットボットを作る方法-2

WordPressでChatGPTを用いたチャットボットを実現する方法を紹介しました。WordPressとChatGPTの組み合わせは、簡単に人間らしい会話ができるチャットボットを作ることができます。チャットボットは、ブログの訪問者とのコミュニケーションや、商品やサービスの紹介など、様々な用途に活用できます。あなたもWordPressとChatGPTで、自分だけのオリジナルチャットボットを作ってみてください。きっと、新しい発見や楽しみがありますよ。

タイトルとURLをコピーしました