WordPress’te ChatGPT’yi Tooltip Eklentisiyle Entegre Etme: Adım Adım Kılavuz

WordPress sitenizin kullanıcı deneyimini (UX) geliştirmek için tooltip (açıklama balonu) özelliklerini kullanıyor olabilirsiniz. Peki bu tooltipleri yapay zeka ile güçlendirerek daha dinamik ve etkileşimli hale getirmeye ne dersiniz? Bu makalede, ChatGPT’yi bir WordPress tooltip eklentisiyle nasıl entegre edeceğinizi, kullanım senaryolarını ve karşılaşabileceğiniz sorunların çözümlerini adım adım anlatıyoruz.

1. Entegrasyon İçin Gerekenler

• Bir WordPress Sitesi: Kurulumu tamamlanmış ve yayında olan bir WordPress sitesi.
• OpenAI API Anahtarı: ChatGPT’ye erişmek için OpenAI platformundan alacağınız API anahtarı.
• Tooltip Eklentisi: Önerilen eklentiler:
• Tooltip Pro (Premium)
• WP Tooltips (Ücretsiz)
• CM Tooltip Glossary (Glossary entegrasyonu için ideal).

2. Adım Adım Entegrasyon

Adım 1: OpenAI API Anahtarını Alın

1. OpenAI hesabı oluşturun veya giriş yapın.
2. “API Keys” sekmesinden yeni bir API anahtarı oluşturun.
3. Anahtarı güvenli bir yere kaydedin (Not: Bu anahtar ücretlidir, kullanım maliyetlerini kontrol edin).

Adım 2: Tooltip Eklentisini Kurun ve Yapılandırın

Örnek olarak WP Tooltips eklentisini kullanalım:

1. WordPress admin panelinden Eklentiler > Yeni Ekle’ye gidin.
2. “WP Tooltips” araması yapın ve yükleyip etkinleştirin.
3. Eklenti ayarlarında tooltip stillerini (renk, boyut, animasyon) özelleştirin.

Adım 3: ChatGPT Entegrasyonu İçin Kod Ekleyin

Amaç: Tooltip tetiklendiğinde ChatGPT’den dinamik yanıt almak.
Yöntem: WordPress tema fonksiyonlarına özel kod ekleme.

a. functions.php Dosyasına API Bağlantısını Ekleyin

// OpenAI API Entegrasyonu
add_action('wp_ajax_chatgpt_tooltip', 'get_chatgpt_response');
add_action('wp_ajax_nopriv_chatgpt_tooltip', 'get_chatgpt_response');

function get_chatgpt_response() {
    $api_key = 'SK-XXXXXXXXXXXXXXXXXXXX'; // OpenAI API anahtarınız
    $prompt = sanitize_text_field($_POST['prompt']);

    $response = wp_remote_post('https://api.openai.com/v1/chat/completions', array(
        'headers' => array(
            'Content-Type' => 'application/json',
            'Authorization' => 'Bearer ' . $api_key
        ),
        'body' => json_encode(array(
            'model' => 'gpt-3.5-turbo',
            'messages' => array(
                array('role' => 'user', 'content' => $prompt)
            ),
            'max_tokens' => 150
        ))
    ));

    if (!is_wp_error($response)) {
        $body = json_decode($response['body'], true);
        echo $body['choices'][0]['message']['content'];
    }
    wp_die();
}

b. JavaScript ile Tooltip Dinamiğini Oluşturun

Tooltip’i tetiklemek için bir JavaScript dosyası ekleyin:

jQuery(document).ready(function($) {
    $('.chatgpt-tooltip').hover(function() {
        var element = $(this);
        var prompt = element.data('prompt');

        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'chatgpt_tooltip',
                prompt: prompt
            },
            success: function(response) {
                element.attr('title', response).tooltipster('content', response);
            }
        });
    });
});

Adım 4: Tooltip’leri Sayfalara Ekleyin

Kısa kod veya HTML ile tooltip öğelerini oluşturun:

<span class="chatgpt-tooltip" data-prompt="WordPress nedir? Kısaca açıkla.">
    WordPress hakkında bilgi almak için tıklayınız!
</span>

3. Özelleştirme İpuçları

• Tasarım: CSS ile tooltip arkaplan rengi, yazı tipi veya gölge ekleyin.
• Yanıt Uzunluğu: max_tokens değerini düşürerek kısa yanıtlar alın.
• Yükleniyor Göstergesi: AJAX çağrısı sırasında bir loading animasyonu ekleyin.
• Hata Yönetimi: API hatalarını yakalamak için try-catch blokları kullanın.

4. Kullanım Senaryoları

• SSS Bölümleri: “Ürün iade politikası nedir?” gibi sorulara anında yanıt.
• E-Ticaret Ürün Açıklamaları: Kullanıcılar ürün özelliklerini tooltip’te görsün.
• Eğitim Siteleri: Terimler sözlüğü için ideal (örneğin, “API nedir?”).
• Teknik Dokümantasyon: “404 hatası nasıl çözülür?” gibi sorulara anında çözüm.

5. Karşılaşabileceğiniz Sorunlar ve Çözümler

• API Maliyeti: Aşırı kullanımı önlemek için rate limit uygulayın veya cache mekanizması ekleyin.
• Gecikmeler: Sunucu yanıt süresini optimize etmek için max_tokens değerini düşürün.
• İçerik Doğruluğu: Yanlış bilgileri engellemek için kullanıcı girdilerini filtreleyin.

Değerlendirme

ChatGPT ile tooltip entegrasyonu, WordPress sitenize interaktif bir boyut kazandırır. Yukarıdaki adımları takip ederek teknik becerilerinizi kullanıcı deneyimiyle birleştirebilirsiniz. Test aşamasında staging ortamı kullanmayı ve API maliyetlerini takip etmeyi unutmayın.

Not: Bu entegrasyon için temel PHP/JavaScript bilgisi gereklidir. Kodları eklemeden önce yedek alın!