Wordpress İle Özel Bir Dinamik Fiyat Hesaplama Modülü Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Dinamik bir fiyat hesaplayıcı oluşturmadan önce geliştirme ortamınızın güncel olduğundan emin olmalısınız. 2026 yılı standartlarında, PHP 8.2 veya üzeri bir sürüm kullanmanız performans ve güvenlik açısından kritik öneme sahiptir.

• PHP 8.2+: Daha hızlı işlemci performansı ve tip güvenliği için gereklidir.
• WordPress 6.5+: Blok tabanlı yapı ve modern REST API entegrasyonları için şarttır.
• Child Theme (Alt Tema): Kodlarınızı ana tema dosyasına değil, mutlaka bir alt tema klasörüne eklemelisiniz.
• Kod Editörü: VS Code gibi modern bir editör, hata ayıklama (debug) süreçlerinizi kolaylaştıracaktır.

Kritik Uyarı: Canlı sitenizde yapacağınız tüm değişikliklerden önce mutlaka veritabanı yedeği alın. Kodları doğrudan yönetim panelindeki düzenleyici üzerinden değil, FTP veya SSH üzerinden dosyaları düzenleyerek ekleyin.

Adım 1: HTML Yapısını Oluşturma

Hesaplama modülünün ön yüzü (frontend) için temiz ve erişilebilir bir HTML yapısı oluşturmalıyız. Bu yapıyı bir WordPress "Shortcode" (kısa kod) fonksiyonu içerisine yerleştirerek sitenizin istediğiniz yerinde kullanabilirsiniz.

function ozel_fiyat_hesaplayici_shortcode() {
    ob_start();
    ?>
    

        Hizmet Tipi:
        
            Standart - 100 TL
            Premium - 250 TL
        
        Adet:
        
        
Toplam: 100 TL
    


Adım 2: JavaScript ile Dinamik Hesaplama Mantığını Kurma

HTML yapısını oluşturduktan sonra, kullanıcının yaptığı seçimleri anlık olarak işleyecek ve sonucu sayfayı yenilemeden güncelleyecek JavaScript kodlarını eklememiz gerekiyor. Bu işlem için addEventListener yöntemini kullanarak 'input' ve 'change' olaylarını dinleyeceğiz.

Aşağıdaki kodu, temanızın js klasörü altındaki hesaplayici.js dosyasına kaydedin ve wp_enqueue_script fonksiyonu ile sitenize dahil edin:

document.addEventListener('DOMContentLoaded', function() {
    const hizmetSelect = document.getElementById('hizmet_tipi');
    const adetInput = document.getElementById('adet');
    const sonucSpan = document.getElementById('toplam_fiyat');

    function hesapla() {
        const birimFiyat = parseFloat(hizmetSelect.value);
        const adet = parseInt(adetInput.value) || 0;
        const toplam = birimFiyat * adet;

        sonucSpan.textContent = toplam.toLocaleString('tr-TR') + ' TL';
    }

    hizmetSelect.addEventListener('change', hesapla);
    adetInput.addEventListener('input', hesapla);
});






Adım 3: Güvenlik ve Veri Doğrulama (Server-Side)

Frontend tarafında yapılan hesaplamalar kullanıcı deneyimi için kritiktir ancak asla güvenli kabul edilmemelidir. Kullanıcı, tarayıcı konsolu üzerinden fiyat değerlerini manipüle edebilir. Bu nedenle, eğer bu hesaplamayı bir sipariş formuna dönüştürecekseniz, verileri sunucu tarafında (PHP) mutlaka tekrar doğrulamalısınız.

Özellikle $_POST ile gelen verileri sanitize_text_field veya intval gibi fonksiyonlarla temizlemek, SQL Injection ve XSS saldırılarına karşı ilk savunma hattınızdır.

// Veri doğrulama örneği
if (isset($_POST['hizmet_tipi'])) {
    $secilen_fiyat = intval($_POST['hizmet_tipi']);
    $adet = intval($_POST['adet']);
    
    // Sadece izin verilen fiyatlar kontrolü
    $gecerli_fiyatlar = [100, 250];
    if (!in_array($secilen_fiyat, $gecerli_fiyatlar)) {
        wp_die('Geçersiz fiyat seçimi!');
    }
    
    $toplam = $secilen_fiyat * $adet;
}






Performans İpuçları ve Optimizasyon

Dinamik hesaplama modülünüzün sitenizin genel hızını etkilememesi için şu stratejileri uygulayın:


    
Script Yükleme: JavaScript dosyanızı sadece kısa kodun kullanıldığı sayfalarda yüklemek için has_shortcode() fonksiyonunu kullanın.
    
Gecikmeli Yükleme (Defer): JavaScript dosyanızı wp_enqueue_script fonksiyonunda $in_footer parametresini true yaparak sayfa sonuna taşıyın.
    
DOM Manipülasyonu: Çok fazla hesaplama içeren karmaşık formlarda, her tuş vuruşunda DOM'u güncellemek yerine requestAnimationFrame kullanarak tarayıcı performansını koruyun.


// Sadece kısa kodun olduğu sayfalarda script yükle
function ozel_script_yukle() {
    global $post;
    if (has_shortcode($post->post_content, 'ozel_fiyat_hesaplayici')) {
        wp_enqueue_script('hesaplayici-js', get_template_directory_uri() . '/js/hesaplayici.js', [], '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'ozel_script_yukle');