ما به یک پلاگین ساده نیاز داریم که پیام‌ها را از کاربران دریافت کرده و با استفاده از ChatGPT API (یا مدل هوش مصنوعی دیگری) پاسخ‌های مربوطه را ارسال کند و این پیام‌ها را در پایگاه داده ذخیره نماید. به علاوه، در تنظیمات پلاگین، باید فضایی برای وارد کردن API Key برای ارتباط با OpenAI فراهم کنیم.

در ادامه، مراحل گام به گام ایجاد این پلاگین برای وردپرس توضیح داده شده است.

گام اول: ساختار پلاگین

ساختار دایرکتوری پلاگین وردپرس به شکل زیر خواهد بود:

/wp-content/plugins/
    /chat-ai/
        chat-ai.php
        /admin/
            settings.php
        /assets/
            /js/
                script.js
            /css/
                style.css
        /includes/
            /db.php
            /chat.php

گام دوم: ساخت فایل اصلی پلاگین (chat-ai.php)

در ابتدا، باید یک فایل اصلی برای پلاگین خود بسازید که وردپرس آن را شناسایی کند. این فایل باید اطلاعات مربوط به پلاگین را داشته باشد و همچنین افزونه را بارگذاری کند.

<?php
/*
Plugin Name: Chat AI
Plugin URI: https://example.com/chat-ai
Description: پلاگین چت با هوش مصنوعی با استفاده از APIهای GPT-3 یا GPT-4
Version: 1.0
Author: Your Name
Author URI: https://example.com
License: GPL2
*/

if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly
}

// بارگذاری فایل‌های اسکریپت و استایل
function chat_ai_enqueue_scripts() {
    wp_enqueue_script('chat-ai-js', plugin_dir_url(__FILE__) . 'assets/js/script.js', array('jquery'), null, true);
    wp_enqueue_style('chat-ai-css', plugin_dir_url(__FILE__) . 'assets/css/style.css');
}
add_action('wp_enqueue_scripts', 'chat_ai_enqueue_scripts');

// ایجاد جدول در پایگاه داده هنگام فعال‌سازی پلاگین
function chat_ai_install() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'chat_messages';

    // بررسی وجود جدول و ایجاد آن
    if ($wpdb->get_var("SHOW TABLES LIKE '$table_name'") != $table_name) {
        $charset_collate = $wpdb->get_charset_collate();
        $sql = "CREATE TABLE $table_name (
            id mediumint(9) NOT NULL AUTO_INCREMENT,
            user_message text NOT NULL,
            ai_response text NOT NULL,
            timestamp datetime DEFAULT CURRENT_TIMESTAMP NOT NULL,
            PRIMARY KEY  (id)
        ) $charset_collate;";

        require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
        dbDelta($sql);
    }
}
register_activation_hook(__FILE__, 'chat_ai_install');

// ایجاد منو برای تنظیمات پلاگین در پنل مدیریت وردپرس
function chat_ai_admin_menu() {
    add_menu_page('Chat AI Settings', 'Chat AI', 'manage_options', 'chat-ai', 'chat_ai_settings_page');
}
add_action('admin_menu', 'chat_ai_admin_menu');

// صفحه تنظیمات پلاگین در پنل مدیریت
function chat_ai_settings_page() {
    ?>
    <div class="wrap">
        <h1>تنظیمات Chat AI</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('chat_ai_options_group');
            do_settings_sections('chat-ai');
            ?>
            <table class="form-table">
                <tr valign="top">
                    <th scope="row">کلید API ChatGPT</th>
                    <td><input type="text" name="chat_ai_api_key" value="<?php echo esc_attr(get_option('chat_ai_api_key')); ?>" /></td>
                </tr>
            </table>

            <?php submit_button(); ?>
        </form>
    </div>
    <?php
}

// ثبت تنظیمات پلاگین
function chat_ai_register_settings() {
    register_setting('chat_ai_options_group', 'chat_ai_api_key');
}
add_action('admin_init', 'chat_ai_register_settings');

گام سوم: ایجاد فایل‌های جاوااسکریپت و استایل

در پوشه /assets/js/، یک فایل جاوااسکریپت به نام script.js بسازید که مسئول ارسال پیام‌ها به سرور و دریافت پاسخ باشد.

// assets/js/script.js
jQuery(document).ready(function($) {
    $('#chat-send-btn').click(function() {
        var userMessage = $('#user-message').val();
        if (userMessage.trim() === "") return;

        // نمایش پیام کاربر
        $('#chat-box').append('<div><strong>شما:</strong> ' + userMessage + '</div>');
        $('#user-message').val(''); // پاک کردن ورودی

        // ارسال درخواست به سرور
        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'chat_ai_send_message',
                user_message: userMessage
            },
            success: function(response) {
                // نمایش پاسخ هوش مصنوعی
                var aiResponse = response.ai_response;
                $('#chat-box').append('<div><strong>هوش مصنوعی:</strong> ' + aiResponse + '</div>');
                $('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
            }
        });
    });
});

در پوشه /assets/css/، یک فایل CSS به نام style.css برای طراحی ساده چت ایجاد کنید.

/* assets/css/style.css */
#chat-box {
    width: 100%;
    height: 300px;
    border: 1px solid #ddd;
    padding: 10px;
    overflow-y: scroll;
}
#user-message {
    width: 80%;
    padding: 10px;
}
#chat-send-btn {
    padding: 10px;
}

گام چهارم: مدیریت درخواست‌ها و ذخیره پیام‌ها در پایگاه داده

برای ارسال و ذخیره پیام‌ها، نیاز داریم که یک اکشن AJAX تعریف کنیم. در فایل اصلی پلاگین (chat-ai.php)، این کد را اضافه کنید:

// مدیریت ارسال پیام و ذخیره آن در پایگاه داده
function chat_ai_send_message() {
    global $wpdb;

    // دریافت پیام از کاربر
    $user_message = sanitize_text_field($_POST['user_message']);

    // دریافت API key از تنظیمات پلاگین
    $api_key = get_option('chat_ai_api_key');
    if (empty($api_key)) {
        wp_send_json_error(array('ai_response' => 'کلید API معتبر نیست.'));
    }

    // درخواست به API ChatGPT (OpenAI)
    $ai_response = chat_ai_get_ai_response($user_message, $api_key);

    // ذخیره پیام و پاسخ در پایگاه داده
    $table_name = $wpdb->prefix . 'chat_messages';
    $wpdb->insert($table_name, array(
        'user_message' => $user_message,
        'ai_response' => $ai_response,
    ));

    // ارسال پاسخ به فرانت‌اند
    wp_send_json_success(array('ai_response' => $ai_response));
}
add_action('wp_ajax_chat_ai_send_message', 'chat_ai_send_message');

// ارسال درخواست به ChatGPT API
function chat_ai_get_ai_response($message, $api_key) {
    $url = 'https://api.openai.com/v1/completions';
    $data = array(
        'model' => 'gpt-4',
        'prompt' => $message,
        'max_tokens' => 150,
        'temperature' => 0.7
    );

    $args = array(
        'body'        => json_encode($data),
        'headers'     => array(
            'Content-Type'  => 'application/json',
            'Authorization' => 'Bearer ' . $api_key
        ),
        'method'      => 'POST',
        'data_format' => 'body'
    );

    $response = wp_remote_post($url, $args);
    $body = wp_remote_retrieve_body($response);
    $result = json_decode($body, true);
    
    return $result['choices'][0]['text'] ?? 'پاسخی یافت نشد.';
}

گام پنجم: نمایش فرم چت در فرانت‌اند

حالا باید کدی برای نمایش چت در صفحات سایت ایجاد کنیم. این کد باید از طریق شورت‌کد (shortcode) یا مستقیماً در تم قرار گیرد.

برای اضافه کردن شورت‌کد برای فرم چت:

// نمایش فرم چت در صفحات با استفاده از شورت‌کد
function chat_ai_display_chat() {
    ob_start();
    ?>
    <div id="chat-box"></div>
    <input type="text" id="user-message" placeholder="پیام خود را وارد کنید...">
    <button id="chat-send-btn">ارسال</button>
    <?php
    return ob_get_clean();
}
add_shortcode('chat_ai', 'chat_ai_display_chat');

گام ششم: نصب پلاگین

1. تمامی فایل‌های مربوطه را در پوشه پلاگین chat-ai/ قرار دهید.
2. پوشه پلاگین را به /wp-content/plugins/ منتقل کنید.
3. از بخش پلاگین ها نصب کنید.

پلاگین ها در پنل مدیریت وردپرس، پلاگین را فعال کنید. 4. پس از فعال‌سازی، به صفحه تنظیمات پلاگین بروید و کلید API ChatGPT خود را وارد کنید. 5. از شورت‌کد [chat_ai] برای نمایش فرم چت در هر صفحه یا پست استفاده کنید.

نتیجه نهایی:

حالا شما یک پلاگین وردپرس دارید که به شما این امکان را می‌دهد تا از طریق یک فرم چت با ChatGPT ارتباط برقرار کنید، پیام‌ها را در پایگاه داده ذخیره کنید و همچنین یک بخش تنظیمات برای وارد کردن API Key ایجاد کنید.

اگر به مشکلی برخوردید یا سوالی داشتید، خوشحال می‌شوم کمک کنم!