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

Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce geliştirme ortamınızın güncel olduğundan emin olmalısınız. Dinamik veri görselleştirme paneli için aşağıdaki araçlara ve sürümlere ihtiyacınız olacak:

• WordPress 6.5 veya üzeri bir sürüm.
• PHP 8.1 veya üzeri (Performans ve güvenlik güncellemeleri için kritik).
• Temel düzeyde JavaScript (ES6+ sözdizimi).
• Chart.js kütüphanesine erişim (CDN üzerinden veya yerel dosya olarak).
• Veritabanı erişimi için $wpdb sınıfına hakimiyet.

Geliştirme yaparken mutlaka bir "Child Theme" (Alt Tema) veya özel bir eklenti dosyası kullanın. Asla ana temanızın dosyalarını doğrudan düzenlemeyin; aksi takdirde tema güncellemelerinde tüm emekleriniz silinecektir.

Veritabanından Dinamik Veri Çekme

WordPress veritabanından veri çekerken doğrudan SQL sorguları yazmak yerine, WordPress'in sunduğu güvenli $wpdb yöntemlerini kullanmalıyız. SQL injection saldırılarından korunmak için prepare() metodunu kullanmak bir zorunluluktur.

function get_custom_data_for_chart() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'custom_data_table';
    
    // Güvenli sorgu hazırlığı
    $results = $wpdb->get_results(
        $wpdb->prepare("SELECT label, value FROM $table_name WHERE status = %s", 'active'),
        ARRAY_A
    );
    
    return $results;
}

Yukarıdaki kod, veritabanından aktif durumdaki verileri çeker. %s kullanımı, verinin string olarak işlenmesini sağlayarak SQL injection riskini ortadan kaldırır. Bu fonksiyonu, verileri JSON formatında ön yüze aktarmak için bir API endpoint'i veya kısa kod (shortcode) içerisinde kullanacağız.

Veriyi JavaScript'e Aktarma ve Güvenlik

PHP tarafındaki veriyi JavaScript'e aktarmanın en temiz yolu wp_localize_script fonksiyonudur. Bu fonksiyon, PHP değişkenlerini JavaScript nesnelerine dönüştürerek güvenli bir şekilde tarayıcıya iletir.

function enqueue_chart_scripts() {
    wp_enqueue_script('chart-js', 'https://cdn.jsdelivr.net/npm/chart.js');
    wp_enqueue_script('custom-chart-init', get_template_directory_uri() . '/js/chart-init.js', ['chart-js'], '1.0', true);

    $data = get_custom_data_for_chart();
    wp_localize_script('custom-chart-init', 'chartData', [
        'data' => $data,
        'nonce' => wp_create_nonce('wp_rest')
    ]);
}
add_action('wp_enqueue_scripts', 'enqueue_chart_scripts');

Bu kod bloğu, Chart.js kütüphanesini yükler ve PHP'den gelen veriyi chartData isimli bir JavaScript nesnesine atar. wp_create_nonce kullanımı, daha sonra yapacağınız olası AJAX isteklerinde güvenlik doğrulaması yapmanızı sağlar.

Chart.js ile Görselleştirme Paneli Oluşturma

Veriler artık tarayıcıda hazır. Şimdi chart-init.js dosyası içerisinde bu verileri kullanarak bir grafik çizdirelim. Chart.js, HTML5 Canvas elementlerini kullanarak yüksek performanslı grafikler oluşturmamıza olanak tanır.

document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('myChart').getContext('2d');
    const labels = chartData.data.map(item => item.label);
    const values = chartData.data.map(item => item.value);

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

Bu JavaScript kodu, chartData nesnesinden gelen verileri ayrıştırır ve bir çubuk grafik (bar chart) oluşturur. DOMContentLoaded olayı, sayfa tamamen yüklendikten sonra grafiğin çizilmesini garanti altına alır.

Veri Görselleştirme Yöntemleri Karşılaştırması

Güvenlik Uyarısı: Veritabanı sorgularınızda asla kullanıcıdan gelen veriyi doğrudan kullanmayın. Her zaman sanitize_text_field() veya intval() gibi WordPress temizleme fonksiyonlarını kullanın. Ayrıca, üretim ortamında hata ayıklama (WP_DEBUG) modunu kapatmayı unutmayın.

Özel Kısa Kod (Shortcode) ile Paneli Sayfaya Ekleme

Paneli istediğiniz sayfada göstermek için bir kısa kod oluşturmak, yönetim paneli kullanımını kolaylaştırır. Aşağıdaki kod, bir fonksiyonu kısa kod olarak tanımlar.

function display_chart_shortcode() {
    return '';
}
add_shortcode('my_data_chart', 'display_chart_shortcode');

Artık WordPress editöründe [my_data_chart] kodunu kullanarak grafiği istediğiniz yazı veya sayfaya yerleştirebilirsiniz.

Sıkça Sorulan Sorular

Dinamik veriler gerçek zamanlı mı güncellenir?

Yukarıdaki yöntemle sayfa her yenilendiğinde veriler güncellenir. Gerçek zamanlı (anlık) güncelleme için AJAX veya WebSockets kullanmanız gerekir.

Çok büyük veri setlerinde performans sorunu yaşar mıyım?

Evet, çok büyük verileri tarayıcıya (frontend) göndermek performans kaybına neden olur. Bu durumda veriyi sunucu tarafında özetleyip (aggregation) göndermelisiniz.

Grafik renklerini nasıl değiştirebilirim?

Chart.js yapılandırma nesnesi içerisindeki backgroundColor ve borderColor parametrelerini değiştirerek renkleri özelleştirebilirsiniz.

Mobil uyumluluk için ne yapmalıyım?

Chart.js varsayılan olarak responsive'dir. Ancak, Canvas elementinin kapsayıcı (container) div'inin genişliğini CSS ile kontrol etmeniz önerilir.

Veri güvenliğini nasıl sağlarım?

Veritabanı sorgularında $wpdb->prepare kullanarak ve REST API kullanıyorsanız permissions_callback ile yetkilendirme yaparak güvenliği sağlayabilirsiniz.

İleri Seviye Filtreleme ve Dinamik Kullanıcı Etkileşimi

Panelinizi statik bir görüntüleme aracından, kullanıcıların veriler üzerinde hakimiyet kurabildiği interaktif bir dashboard'a dönüştürmek için AJAX tabanlı filtreleme mekanizmaları kurmalısınız. Kullanıcıların belirli tarih aralıklarını veya kategori bazlı verileri seçebilmesi, veritabanı sorgularının dinamik olarak güncellenmesini gerektirir.

Aşağıdaki örnekte, bir tarih aralığı seçildiğinde veritabanından güncel veriyi çeken ve grafiği anlık olarak güncelleyen bir yapı bulunmaktadır:

// JavaScript: Tarih filtresi tetikleyicisi
document.getElementById('filter-btn').addEventListener('click', function() {
    const startDate = document.getElementById('start-date').value;
    const endDate = document.getElementById('end-date').value;

    fetch(wpApiSettings.root + 'my-plugin/v1/data?start=' + startDate + '&end=' + endDate, {
        headers: { 'X-WP-Nonce': wpApiSettings.nonce }
    })
    .then(response => response.json())
    .then(data => {
        myChart.data.datasets[0].data = data.values;
        myChart.update();
    });
});

Performans Optimizasyonu ve Veritabanı Sorgu Yönetimi

Veri setiniz büyüdükçe, her sayfa yüklemesinde tüm veritabanını taramak sunucu kaynaklarını tüketebilir. Performansı artırmak için "Transient API" kullanarak verileri belirli bir süre önbelleğe almanız kritik önem taşır. Bu sayede veritabanı sorgu yükünü ciddi oranda azaltabilirsiniz.

Transient API ile Önbellekleme Stratejisi

Verileri 1 saat boyunca önbellekte tutarak sunucu üzerindeki baskıyı hafifletmek için aşağıdaki yaklaşımı kullanabilirsiniz:

function get_cached_dashboard_data() {
    $data = get_transient('dashboard_data_cache');

    if (false === $data) {
        // Veritabanı sorgusu burada yapılır
        $data = $wpdb->get_results("SELECT * FROM wp_custom_stats WHERE created_at > NOW() - INTERVAL 30 DAY");
        set_transient('dashboard_data_cache', $data, HOUR_IN_SECONDS);
    }

    return $data;
}

Veritabanı İndeksleme

Sorgularınızın hızını artırmak için, veritabanı tablonuzda sorgulama yaptığınız sütunlara (örneğin created_at veya category_id) mutlaka indeks ekleyin. İndekslenmemiş büyük tablolarda yapılan SELECT sorguları, sitenizin genel yavaşlamasına neden olabilir.

Hata Ayıklama ve Loglama Süreçleri

Dinamik panellerde veri akışı kesintiye uğradığında sorunu tespit etmek için WordPress hata ayıklama modunu aktif kullanmalısınız. wp-config.php dosyanızda WP_DEBUG_LOG seçeneğini aktif ederek, veritabanı sorgularından kaynaklanan hataları wp-content/debug.log dosyasında takip edebilirsiniz.

İpucu: JavaScript tarafındaki hataları görmek için tarayıcınızın "Geliştirici Araçları" (F12) konsolunu kullanın. Özellikle 403 (Yetkisiz) veya 404 (Endpoint bulunamadı) hataları, genellikle REST API nonce veya rota tanımlamalarındaki yanlışlıklardan kaynaklanır.

Sonuç

WordPress ile özel bir dinamik veri görselleştirme paneli yapmak, doğru araçları ve güvenlik pratiklerini birleştirdiğinizde oldukça verimli bir süreçtir. Bu rehberde, veritabanından veri çekme, bu verileri güvenli şekilde JavaScript'e aktarma ve Chart.js ile görselleştirme adımlarını tamamladık. Bir sonraki adım olarak, kullanıcıların verileri filtreleyebileceği bir arayüz (tarih aralığı seçimi gibi) ekleyerek panelinizi daha profesyonel bir seviyeye taşıyabilirsiniz.

Sorumluluk Reddi: Bu rehberdeki kod örnekleri eğitim amaçlıdır. Uygulama öncesinde mutlaka veritabanı yedeği alın. Kodların üretim ortamındaki etkilerinden geliştirici sorumludur.