Wordpress İle Özel Bir Dinamik İçerik Paylaşım Butonu Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi hayata geçirmek için temel düzeyde PHP, HTML ve JavaScript bilginizin olması yeterlidir. WordPress 6.x ve üzeri sürümlerle uyumlu olan bu yöntem, herhangi bir dış kütüphane gerektirmez. Çalışmaya başlamadan önce şu araçların hazır olduğundan emin olun:

• Aktif bir WordPress kurulumu (tercihen yerel geliştirme ortamı).
• Tema dosyalarınıza erişim (FTP/SFTP veya Yönetim Paneli üzerinden Tema Dosya Düzenleyici).
• Bir kod editörü (VS Code gibi).
• Çocuk tema (Child Theme) kullanımı (ana temanın güncellemelerinde kodlarınızın silinmemesi için kritik önem taşır).

Adım 1: Paylaşım Butonu İçin HTML Yapısını Oluşturma

İlk adım olarak, paylaşım butonunu sayfada temsil edecek HTML kodunu oluşturmalıyız. Bu buton, dinamik içerik çekebilmemiz için gerekli olan veri niteliklerini (data attributes) içermelidir.

Adım 2: JavaScript ile Dinamik Veri Çekme ve Paylaşım Tetikleme

HTML yapısını oluşturduktan sonra, kullanıcının butona tıkladığında o anki sayfanın başlığını ve URL'sini dinamik olarak almasını sağlayacak JavaScript kodunu yazmalıyız. Bu işlem, herhangi bir eklentiye ihtiyaç duymadan tarayıcının yerel API'lerini kullanmamıza olanak tanır.

Aşağıdaki kodu temanızın js/custom-share.js dosyasına ekleyin veya functions.php üzerinden wp_footer kancası ile doğrudan sayfaya enjekte edin:

document.addEventListener('DOMContentLoaded', function() {
    const shareBtn = document.querySelector('.custom-share-btn');
    
    if (shareBtn) {
        shareBtn.addEventListener('click', function(e) {
            e.preventDefault();
            
            const shareData = {
                title: document.title,
                text: 'Bu harika içeriğe göz atın!',
                url: window.location.href
            };

            if (navigator.share) {
                navigator.share(shareData)
                    .then(() => console.log('Paylaşım başarılı!'))
                    .catch((error) => console.error('Paylaşım hatası:', error));
            } else {
                // Web Share API desteklenmiyorsa panoya kopyala
                const tempInput = document.createElement('input');
                document.body.appendChild(tempInput);
                tempInput.value = window.location.href;
                tempInput.select();
                document.execCommand('copy');
                document.body.removeChild(tempInput);
                alert('Link panoya kopyalandı!');
            }
        });
    }
});






Adım 3: Performans Optimizasyonu ve Hata Ayıklama

Özel bir paylaşım butonu geliştirirken, sitenizin yüklenme hızını (Core Web Vitals) olumsuz etkilememek için dikkat etmeniz gereken bazı kritik noktalar vardır. Özellikle JavaScript dosyalarınızın "async" veya "defer" olarak yüklenmesi, sayfa performansını doğrudan iyileştirir.

Performans İpuçları

    
Dosya Sıkıştırma: JavaScript kodunuzu minify ederek dosya boyutunu küçültün.
    
Koşullu Yükleme: Eğer buton sadece tekil yazılarda (single post) görünüyorsa, script dosyasını sadece bu sayfalarda yüklemek için is_single() şartını kullanın.
    
CSS Kullanımı: Butonun stilini oluştururken ağır kütüphaneler yerine saf CSS (Flexbox/Grid) tercih edin.


Hata Ayıklama (Debugging) Süreci
Kodunuz çalışmadığında izlemeniz gereken adımlar şunlardır:

    
Tarayıcı Konsolu: Chrome Geliştirici Araçları'nı (F12) açarak "Console" sekmesinde herhangi bir syntax hatası olup olmadığını kontrol edin.
    
HTTPS Kontrolü: Web Share API, güvenlik gereği sadece HTTPS protokolü üzerinden çalışan sitelerde aktif olur. Yerel ortamda çalışırken SSL sertifikası kullandığınızdan emin olun.
    
Kanca Kontrolü: wp_enqueue_script fonksiyonunun doğru sırada çalışıp çalışmadığını wp_head veya wp_footer üzerinden doğrulayın.



    İpucu: Eğer butonun mobil cihazlarda farklı, masaüstünde farklı bir davranış sergilemesini istiyorsanız, CSS içerisinde @media sorgularını kullanarak butonun görünürlüğünü ve konumunu dinamik olarak yönetebilirsiniz.