Wordpress İle Özel Bir Dinamik Veri Görselleştirme Grafiği Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Başarılı bir uygulama için WordPress geliştirme ortamınızın güncel olması gerekir. PHP 8.2 veya üzeri sürümler, performans ve güvenlik açısından zorunludur. Ayrıca, grafiklerin tarayıcı tarafında işlenmesi için Chart.js kütüphanesinin CDN üzerinden veya yerel olarak projeye dahil edilmesi gerekmektedir.

• WordPress 6.5+ sürümü (veya güncel sürüm).
• PHP 8.2+ sürümü.
• Temel düzeyde JavaScript (ES6+) ve jQuery bilgisi.
• Tema dosyalarınıza erişim (FTP/SFTP veya yerel geliştirme ortamı).

Veri Kaynağını Hazırlama ve PHP ile Veri Çekme

Dinamik bir grafik için öncelikle veritabanından veriyi güvenli bir şekilde çekmelisiniz. WordPress'in $wpdb sınıfını kullanarak SQL sorgularımızı optimize etmeli ve güvenlik açıklarını (SQL Injection) önlemek için hazırlanan ifadeleri kullanmalıyız.

// functions.php içerisine eklenecek veri çekme fonksiyonu
function get_dynamic_chart_data() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'satis_verileri';
    
    // Güvenli sorgu yapısı
    $results = $wpdb->get_results("SELECT ay, satis_miktari FROM $table_name ORDER BY id ASC", ARRAY_A);
    
    return $results;
}

Bu kod bloğu, veritabanınızdaki satış verilerini bir dizi (array) olarak döndürür. $wpdb->get_results metodu, verileri işlemek üzere PHP'ye aktarır. Veri tabanı tablonuzun varlığından ve doğru yetkilendirmelere sahip olduğundan emin olun.

Chart.js Kütüphanesini WordPress'e Entegre Etme

Grafiklerin düzgün çalışması için gerekli olan JavaScript kütüphanesini WordPress'in wp_enqueue_scripts kancası (hook) ile kuyruğa eklemeliyiz. Bu yöntem, kütüphanelerin yalnızca grafik sayfasında yüklenmesini sağlayarak site hızını optimize eder.

function enqueue_chart_scripts() {
    if (is_page('istatistikler')) {
        wp_enqueue_script('chart-js', 'https://cdn.jsdelivr.net/npm/chart.js', [], '4.4.0', true);
        
        // Veriyi JavaScript'e aktar
        $data = get_dynamic_chart_data();
        wp_localize_script('chart-js', 'chartData', $data);
    }
}
add_action('wp_enqueue_scripts', 'enqueue_chart_scripts');

Burada wp_localize_script fonksiyonu hayati öneme sahiptir. Bu fonksiyon, PHP tarafındaki veriyi bir JavaScript nesnesine dönüştürerek doğrudan tarayıcıya "enjekte" eder.

Grafik İçin HTML Yapısını Oluşturma

Grafiğin görüntüleneceği bir kapsayıcıya (container) ihtiyacımız var. Bu HTML yapısını bir kısa kod (shortcode) veya sayfa şablonu içerisinde tanımlayabilirsiniz.

// Kısa kod oluşturma
function render_chart_shortcode() {
    return '
';
}
add_shortcode('dinamik_grafik', 'render_chart_shortcode');

Bu kısa kod, sitenizin herhangi bir yerinde [dinamik_grafik] şeklinde kullanıldığında, grafik için gerekli olan canvas elementini oluşturacaktır.

JavaScript ile Veriyi Görselleştirme

Şimdi, PHP'den gelen veriyi Chart.js ile birleştirme zamanı. Aşağıdaki kod, veriyi işler ve grafiği sayfaya çizer.

document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('myDynamicChart').getContext('2d');
    const labels = chartData.map(item => item.ay);
    const data = chartData.map(item => item.satis_miktari);

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: 'Aylık Satışlar',
                data: data,
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        }
    });
});

Bu JavaScript kodu, chartData nesnesini döngüye sokar ve Chart.js'in beklediği formatta etiketleri ve değerleri ayıklar. type: 'bar' kısmını değiştirerek grafiği 'line', 'pie' veya 'radar' olarak özelleştirebilirsiniz.

Veri Görselleştirme Yöntemlerinin Karşılaştırılması

Kritik Güvenlik Uyarısı: Veritabanı sorgularınızda her zaman $wpdb->prepare() kullanın. Kullanıcıdan gelen verileri asla doğrudan sorguya dahil etmeyin. Üretim ortamında (production) hata ayıklama modunu (WP_DEBUG) kapalı tutun.

Sıkça Sorulan Sorular

Grafik neden sayfada görünmüyor?

Öncelikle tarayıcı konsolunu (F12) kontrol edin. Eğer "chartData is not defined" hatası alıyorsanız, wp_localize_script fonksiyonunun doğru kancaya bağlandığından emin olun.

Verilerim anlık güncellenmiyor, ne yapmalıyım?

WordPress önbellekleme (caching) eklentileri veriyi dondurabilir. Dinamik veriler için AJAX kullanarak veriyi belirli aralıklarla yeniden çekmeyi düşünebilirsiniz.

Grafiği mobil uyumlu yapabilir miyim?

Evet, Chart.js varsayılan olarak duyarlıdır. Ancak kapsayıcı div elementinin genişliğini width: 100% olarak ayarladığınızdan emin olun.

Çok fazla veri olduğunda grafik bozuluyor, çözüm nedir?

Veri setiniz çok büyükse, Chart.js'in "data decimation" özelliğini kullanarak veriyi basitleştirebilir veya sunucu tarafında veriyi gruplandırarak (örneğin haftalık yerine aylık toplamlar) gönderebilirsiniz.

Başka kütüphaneler kullanabilir miyim?

Elbette, D3.js veya Highcharts gibi kütüphaneler de kullanılabilir. Ancak Chart.js, WordPress yapısına en kolay entegre olan ve en hafif olanıdır.

İleri Seviye İpuçları: Grafikleri Dinamik Filtreleme ile Güçlendirme

Grafiğinizi statik bir yapıdan kurtarıp kullanıcı etkileşimli bir hale getirmek, WordPress sitenizin kullanıcı deneyimini (UX) ciddi oranda artırır. Kullanıcıların verileri tarih aralığına veya kategoriye göre filtrelemesini sağlamak için AJAX metodolojisini kullanmanız gerekir.

Öncelikle, WordPress'in admin-ajax.php yapısını kullanarak veritabanından gelen veriyi dinamik olarak güncelleyen bir yapı kurmalısınız. Aşağıdaki örnek, bir HTML seçici (dropdown) ile veriyi nasıl tetikleyeceğinizi gösterir:

// JavaScript tarafında AJAX isteği
function updateChart(filterValue) {
    fetch(ajaxurl + '?action=get_filtered_data&filter=' + filterValue)
        .then(response => response.json())
        .then(data => {
            myChart.data.datasets[0].data = data.values;
            myChart.update();
        });
}

Bu yapıyı kurarken dikkat etmeniz gereken en önemli nokta, wp_localize_script fonksiyonu ile ajaxurl değişkenini JavaScript dosyanıza doğru bir şekilde aktarmaktır. Aksi takdirde, WordPress güvenlik katmanları isteğinizi engelleyecektir.

Performans Optimizasyonu ve Önbellekleme Stratejileri

Veri görselleştirme süreçleri, özellikle büyük veritabanı tablolarıyla çalışırken sunucu kaynaklarını tüketebilir. Her sayfa yüklenişinde karmaşık SQL sorguları çalıştırmak, sitenizin hızını olumsuz etkiler. Bu durumu engellemek için WordPress'in Transients API yapısını kullanmanız önerilir.

Transients API, sorgu sonuçlarını belirli bir süre boyunca veritabanında geçici olarak saklar. Böylece her kullanıcı için aynı sorguyu tekrar tekrar çalıştırmak yerine, önbellekteki veriyi çekersiniz.

// Önbellekleme örneği
function get_cached_chart_data() {
    $data = get_transient('my_chart_data');
    if (false === $data) {
        // Veritabanı sorgusu burada yapılır
        $data = $wpdb->get_results("SELECT * FROM wp_custom_data");
        set_transient('my_chart_data', $data, 12 * HOUR_IN_SECONDS);
    }
    return $data;
}

Bu yaklaşım, özellikle yüksek trafikli sitelerde sunucu yükünü %80'e varan oranlarda azaltabilir. Ayrıca, grafiğinizi sadece görünür alana (viewport) girdiğinde yüklemek için Intersection Observer API kullanmak, sayfa açılış hızını (LCP - Largest Contentful Paint) iyileştirecektir.

Hata Ayıklama İçin İpuçları

• Konsol Kontrolü: Tarayıcı geliştirici araçlarında (F12) "Network" sekmesini kontrol ederek AJAX isteklerinin 200 OK yanıtı dönüp dönmediğini doğrulayın.
• JSON Formatı: PHP tarafında wp_send_json_success() kullanarak verinin doğru formatta paketlendiğinden emin olun.
• Script Çakışmaları: wp_enqueue_script fonksiyonunda bağımlılıkları (dependencies) doğru tanımlayın (Örn: array('jquery')).

Sonuç

WordPress ile özel bir dinamik veri görselleştirme grafiği oluşturmak, sitenize profesyonel bir veri analizi katmanı ekler. Bu rehberde, PHP ile veritabanı sorgulama, JavaScript ile görselleştirme ve WordPress'in script yönetim sistemini kullanma süreçlerini tamamladınız. Bir sonraki adım olarak, grafiğinize "filtreleme" özelliği ekleyerek kullanıcıların verileri tarih aralığına göre seçmesini sağlayabilirsiniz.

Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri genel eğitim amaçlıdır. Uygulama öncesinde veritabanı yedeğinizi almanız ve kodları canlı sitenizde uygulamadan önce bir test ortamında denemeniz önemle tavsiye edilir.